{"id":16258953,"url":"https://github.com/dword-design/nuxt-content-body-html","last_synced_at":"2025-03-16T13:31:03.381Z","repository":{"id":39851872,"uuid":"386713084","full_name":"dword-design/nuxt-content-body-html","owner":"dword-design","description":"Adds a property to each @nuxt/content document containing the raw HTML body, rendered from markdown.","archived":false,"fork":false,"pushed_at":"2025-02-14T05:06:09.000Z","size":1916,"stargazers_count":11,"open_issues_count":12,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-26T14:48:15.953Z","etag":null,"topics":["body","feed","nuxt","nuxt-content","nuxt-module","nuxtjs","rss"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dword-design.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"custom":["buymeacoffee.com/dword","paypal.me/SebastianLandwehr"],"github":"dword-design","patreon":"dworddesign"}},"created_at":"2021-07-16T17:17:53.000Z","updated_at":"2025-02-14T05:06:12.000Z","dependencies_parsed_at":"2023-11-22T06:23:35.457Z","dependency_job_id":"2644da73-9a6f-4ec2-b46f-4097fc63f8c6","html_url":"https://github.com/dword-design/nuxt-content-body-html","commit_stats":{"total_commits":134,"total_committers":9,"mean_commits":14.88888888888889,"dds":0.6865671641791045,"last_synced_commit":"5d42c54407ca1734ff54069b93e95e0dd7d2b746"},"previous_names":[],"tags_count":32,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dword-design%2Fnuxt-content-body-html","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dword-design%2Fnuxt-content-body-html/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dword-design%2Fnuxt-content-body-html/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dword-design%2Fnuxt-content-body-html/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dword-design","download_url":"https://codeload.github.com/dword-design/nuxt-content-body-html/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243815582,"owners_count":20352194,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["body","feed","nuxt","nuxt-content","nuxt-module","nuxtjs","rss"],"created_at":"2024-10-10T16:01:00.480Z","updated_at":"2025-03-16T13:31:03.022Z","avatar_url":"https://github.com/dword-design.png","language":"JavaScript","funding_links":["buymeacoffee.com/dword","paypal.me/SebastianLandwehr","https://github.com/sponsors/dword-design","https://patreon.com/dworddesign","https://www.buymeacoffee.com/dword","https://paypal.me/SebastianLandwehr","https://www.patreon.com/dworddesign"],"categories":["JavaScript"],"sub_categories":[],"readme":"\u003c!-- TITLE/ --\u003e\n# nuxt-content-body-html\n\u003c!-- /TITLE --\u003e\n\n\u003c!-- BADGES/ --\u003e\n  \u003cp\u003e\n    \u003ca href=\"https://npmjs.org/package/nuxt-content-body-html\"\u003e\n      \u003cimg\n        src=\"https://img.shields.io/npm/v/nuxt-content-body-html.svg\"\n        alt=\"npm version\"\n      \u003e\n    \u003c/a\u003e\u003cimg src=\"https://img.shields.io/badge/os-linux%20%7C%C2%A0macos%20%7C%C2%A0windows-blue\" alt=\"Linux macOS Windows compatible\"\u003e\u003ca href=\"https://github.com/dword-design/nuxt-content-body-html/actions\"\u003e\n      \u003cimg\n        src=\"https://github.com/dword-design/nuxt-content-body-html/workflows/build/badge.svg\"\n        alt=\"Build status\"\n      \u003e\n    \u003c/a\u003e\u003ca href=\"https://codecov.io/gh/dword-design/nuxt-content-body-html\"\u003e\n      \u003cimg\n        src=\"https://codecov.io/gh/dword-design/nuxt-content-body-html/branch/master/graph/badge.svg\"\n        alt=\"Coverage status\"\n      \u003e\n    \u003c/a\u003e\u003ca href=\"https://david-dm.org/dword-design/nuxt-content-body-html\"\u003e\n      \u003cimg src=\"https://img.shields.io/david/dword-design/nuxt-content-body-html\" alt=\"Dependency status\"\u003e\n    \u003c/a\u003e\u003cimg src=\"https://img.shields.io/badge/renovate-enabled-brightgreen\" alt=\"Renovate enabled\"\u003e\u003cbr/\u003e\u003ca href=\"https://gitpod.io/#https://github.com/dword-design/nuxt-content-body-html\"\u003e\n      \u003cimg\n        src=\"https://gitpod.io/button/open-in-gitpod.svg\"\n        alt=\"Open in Gitpod\"\n        width=\"114\"\n      \u003e\n    \u003c/a\u003e\u003ca href=\"https://www.buymeacoffee.com/dword\"\u003e\n      \u003cimg\n        src=\"https://www.buymeacoffee.com/assets/img/guidelines/download-assets-sm-2.svg\"\n        alt=\"Buy Me a Coffee\"\n        width=\"114\"\n      \u003e\n    \u003c/a\u003e\u003ca href=\"https://paypal.me/SebastianLandwehr\"\u003e\n      \u003cimg\n        src=\"https://sebastianlandwehr.com/images/paypal.svg\"\n        alt=\"PayPal\"\n        width=\"163\"\n      \u003e\n    \u003c/a\u003e\u003ca href=\"https://www.patreon.com/dworddesign\"\u003e\n      \u003cimg\n        src=\"https://sebastianlandwehr.com/images/patreon.svg\"\n        alt=\"Patreon\"\n        width=\"163\"\n      \u003e\n    \u003c/a\u003e\n\u003c/p\u003e\n\u003c!-- /BADGES --\u003e\n\n\u003c!-- DESCRIPTION/ --\u003e\nAdds a property to each @nuxt/content document containing the raw HTML body, rendered from markdown.\n\u003c!-- /DESCRIPTION --\u003e\n\n\u003c!-- INSTALL/ --\u003e\n## Install\n\n```bash\n# npm\n$ npm install nuxt-content-body-html\n\n# Yarn\n$ yarn add nuxt-content-body-html\n```\n\u003c!-- /INSTALL --\u003e\n\nSometimes you need the raw HTML code of `@nuxt/content` documents for processing. A frequent use case is to generate an RSS feed and to add the HTML as `content:encoded`. The module will use the default remark and rehype plugins. You can also add additional plugins.\n\n## Nuxt 3\n\nAdd the module to your `nuxt.config.js` file:\n\n```js\nexport default {\n  modules: [\n    '@nuxt/content',\n    'nuxt-content-body-html',\n  },\n}\n```\n\nTo generate the HTML, you have two options: 1. Add fields to the module config and 2. use the `useNuxtContentBodyHtml` composable. If you just need a simple HTML version of your markdown content, the module config is fine. But if you want to add extra remark or rehype plugins involving functions, you will need to use the composable because Nuxt won't be able to serialize it into the runtime config.\n\n### Module config\n\n```js\nexport default {\n  modules: [\n    '@nuxt/content',\n    ['nuxt-content-body-html', {\n      fields: {\n        bodyHtml: {},\n      },\n    }],\n  },\n}\n```\n\nThis is the simplest way of generating the `bodyHtml` field into the file objects.\n\n### Composable\n\nAdd a Nitro plugin to `server/plugins`. We will hook into `content:file:beforeParse` and add our HTML code by calling the composable. Unfortunately, there is currently an [open issue in @nuxt/content](https://github.com/nuxt/content/issues/2056) that does not persist variables added in `content:file:beforeParse`. So we will have to store them and restore them in `content:file:afterParse`. Hopefully this will be fixed soon.\n\n```js\n// server/plugins/body-html.js\n\nimport { defineNitroPlugin, useNuxtContentBodyHtml } from '#imports'\n\nconst nuxtContentBodyHtml = useNuxtContentBodyHtml()\n\nexport default defineNitroPlugin(nitroApp =\u003e {\n  const bodyHtmls = {}\n\n  nitroApp.hooks.hook('content:file:beforeParse', async file =\u003e\n    bodyHtmls[file._id] = await nuxtContentBodyHtml.generate(file)\n  )\n  nitroApp.hooks.hook('content:file:afterParse', file =\u003e (file.bodyHtml = bodyHtmls[file._id]))\n})\n```\n\n### Adding Remark and Rehype plugins\n\nIn some cases you will want to add additional plugins to customize the HTML. E.g. in an RSS feed you want to have absolute URLs. You can add plugins to the field configs and the composable like so:\n\n```js\nexport default {\n  modules: [\n    '@nuxt/content',\n    ['nuxt-content-body-html', {\n      fields: {\n        bodyHtml: {\n          remarkPlugins: {\n            'remark-foo': {},\n          },\n          rehypePlugins: {\n            'rehype-foo: {},\n          },\n        },\n      },\n    }],\n  },\n}\n```\n\n```js\nawait useNuxtContentBodyHtml.generate(file, {\n  remarkPlugins: {\n    'remark-foo': {},\n  },\n  rehypePlugins: {\n    'rehype-foo: {},\n  },\n})\n```\n\n### Enabling the highlighter\n\nYou can easily enable syntax highlighting like so:\n\n```js\nexport default {\n  modules: [\n    '@nuxt/content',\n    ['nuxt-content-body-html', {\n      fields: {\n        bodyHtml: { highlight: true },\n      },\n    }],\n  },\n}\n```\n\n```js\nawait useNuxtContentBodyHtml.generate(file, { highlight: true })\n```\n\n## Nuxt 2 and @nuxt/content@^1\n\n`nuxt-content-body-html` works similarly for Nuxt 2 with some minor differences. Firstly, you need to add the module to your `nuxt.config.js` file **before** `@nuxt/content`:\n\n```js\nexport default {\n  modules: [\n    'nuxt-content-body-html',\n    '@nuxt/content',\n  },\n}\n```\n\nThen, the HTML code will be generated in module context and not in Nitro context, so you can completely configure your fields via the module config and you do not need a composable.\n\nFor convenience, if you do not configure any field, a `bodyHtml` field will be configured by default. So the above config will already generate a field.\n\nTo add fields or have a different name for the field, you can add fields like so:\n\n```js\nexport default {\n  modules: [\n    ['nuxt-content-body-html', {\n      fooHtml: {},\n    }],\n    '@nuxt/content',\n  ],\n}\n```\n\n### Plugins\n\nYou can also add plugins to the config. Note that the plugins are arrays:\n\n```js\nexport default {\n  modules: [\n    ['nuxt-content-body-html', {\n      fooHtml: {\n        remarkPlugins: [\n          'plugin1',\n          ['plugin2', { /* options */ }],\n        ],\n        rehypePlugins: [\n          'plugin1',\n          ['plugin2', { /* options */ }],\n        ],\n      },\n    }],\n    '@nuxt/content',\n  ],\n}\n```\n\n### Overriding or disabling the highlighter\n\nIn `@nuxt/content^1` the highlighter is enabled by default. You can explicitly override or disable the highlighter by setting it in the config:\n\n```js\nexport default {\n  modules: [\n    ['nuxt-content-body-html', {\n      // Pass a custom highlighter\n      highlighter: customHighlighter,\n\n      // Disable the highlighter by setting a noop function\n      highlighter: code =\u003e `\u003cpre\u003e\u003ccode class=\"language-js\"\u003e${code}\u003c/code\u003e\u003c/pre\u003e`,\n    }],\n    '@nuxt/content',\n  ],\n}\n```\n\n## Usage for RSS feeds\n\nYou can customize the module so that you can use the resulting HTML code for RSS feeds.\n\nFirstly, RSS feeds require URLs to be absolute. You can use [rehype-urls](https://github.com/brechtcs/rehype-urls) to make relative URLs absolute. At the time of writing, the npm version is not compatible with `@nuxt/content@^2`, you will need to fix the issue in [this PR](https://github.com/brechtcs/rehype-urls/pull/3).\n\n```js\n// nuxt.config.js\n\n// Set process.env.BASE_URL to the domain to prepend\n\nexport default {\n  runtimeConfig: {\n    baseUrl: process.env.BASE_URL,\n  },\n  modules: [\n    '@nuxt/content',\n    'nuxt-content-body-html',\n  ],\n}\n```\n\n```js\n// server/plugins/body-html.js\n\nimport { defineNitroPlugin, useNuxtContentBodyHtml, useRuntimeConfig } from '#imports'\n\nconst { baseUrl } = useRuntimeConfig()\nconst nuxtContentBodyHtml = useNuxtContentBodyHtml()\n\nexport default defineNitroPlugin(nitroApp =\u003e {\n  const bodyHtmls = {}\n\n  nitroApp.hooks.hook('content:file:beforeParse', async file =\u003e\n    bodyHtmls[file._id] = await nuxtContentBodyHtml.generate(file, {\n      rehypePlugins: {\n        'rehype-urls', { transform: url =\u003e (url.host ? url : new URL(url.href, baseUrl)) },\n      },\n    })\n  )\n  nitroApp.hooks.hook('content:file:afterParse', file =\u003e (file.bodyHtml = bodyHtmls[file._id]))\n})\n```\n\n\u003c!-- LICENSE/ --\u003e\n## Contribute\n\nAre you missing something or want to contribute? Feel free to file an [issue](https://github.com/dword-design/nuxt-content-body-html/issues) or a [pull request](https://github.com/dword-design/nuxt-content-body-html/pulls)! ⚙️\n\n## Support\n\nHey, I am Sebastian Landwehr, a freelance web developer, and I love developing web apps and open source packages. If you want to support me so that I can keep packages up to date and build more helpful tools, you can donate here:\n\n\u003cp\u003e\n  \u003ca href=\"https://www.buymeacoffee.com/dword\"\u003e\n    \u003cimg\n      src=\"https://www.buymeacoffee.com/assets/img/guidelines/download-assets-sm-2.svg\"\n      alt=\"Buy Me a Coffee\"\n      width=\"114\"\n    \u003e\n  \u003c/a\u003e\u0026nbsp;If you want to send me a one time donation. The coffee is pretty good 😊.\u003cbr/\u003e\n  \u003ca href=\"https://paypal.me/SebastianLandwehr\"\u003e\n    \u003cimg\n      src=\"https://sebastianlandwehr.com/images/paypal.svg\"\n      alt=\"PayPal\"\n      width=\"163\"\n    \u003e\n  \u003c/a\u003e\u0026nbsp;Also for one time donations if you like PayPal.\u003cbr/\u003e\n  \u003ca href=\"https://www.patreon.com/dworddesign\"\u003e\n    \u003cimg\n      src=\"https://sebastianlandwehr.com/images/patreon.svg\"\n      alt=\"Patreon\"\n      width=\"163\"\n    \u003e\n  \u003c/a\u003e\u0026nbsp;Here you can support me regularly, which is great so I can steadily work on projects.\n\u003c/p\u003e\n\nThanks a lot for your support! ❤️\n\n## See also\n\n* [nuxt-content-git](https://github.com/dword-design/nuxt-content-git): Adds a property to each @nuxt/content document containing the raw HTML body, rendered from markdown.\n* [nuxt-mail](https://github.com/dword-design/nuxt-mail): Adds email sending capability to a Nuxt.js app. Adds a server route, an injected variable, and uses nodemailer to send emails.\n* [nuxt-route-meta](https://github.com/dword-design/nuxt-route-meta): Adds Nuxt page data to route meta at build time.\n* [nuxt-modernizr](https://github.com/dword-design/nuxt-modernizr): Adds a Modernizr build to your Nuxt.js app.\n* [nuxt-mermaid-string](https://github.com/dword-design/nuxt-mermaid-string): Embed a Mermaid diagram in a Nuxt.js app by providing its diagram string.\n\n## License\n\n[MIT License](https://opensource.org/licenses/MIT) © [Sebastian Landwehr](https://sebastianlandwehr.com)\n\u003c!-- /LICENSE --\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdword-design%2Fnuxt-content-body-html","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdword-design%2Fnuxt-content-body-html","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdword-design%2Fnuxt-content-body-html/lists"}