{"id":19904425,"url":"https://github.com/alloc/vite-remark-html","last_synced_at":"2025-05-03T00:31:39.096Z","repository":{"id":74203483,"uuid":"388560936","full_name":"alloc/vite-remark-html","owner":"alloc","description":"Process markdown modules with remark-html","archived":false,"fork":false,"pushed_at":"2021-07-30T22:31:25.000Z","size":28,"stargazers_count":4,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-25T20:50:15.958Z","etag":null,"topics":["html","remark","vite","vite-plugin"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/alloc.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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}},"created_at":"2021-07-22T18:29:51.000Z","updated_at":"2023-10-25T02:46:56.000Z","dependencies_parsed_at":"2023-02-27T06:15:40.079Z","dependency_job_id":null,"html_url":"https://github.com/alloc/vite-remark-html","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alloc%2Fvite-remark-html","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alloc%2Fvite-remark-html/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alloc%2Fvite-remark-html/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alloc%2Fvite-remark-html/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alloc","download_url":"https://codeload.github.com/alloc/vite-remark-html/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252126560,"owners_count":21698964,"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":["html","remark","vite","vite-plugin"],"created_at":"2024-11-12T20:28:22.896Z","updated_at":"2025-05-03T00:31:39.091Z","avatar_url":"https://github.com/alloc.png","language":"TypeScript","funding_links":["https://paypal.me/alecdotbiz"],"categories":[],"sub_categories":[],"readme":"# vite-remark-html\n\n[![npm](https://img.shields.io/npm/v/vite-remark-html.svg)](https://www.npmjs.com/package/vite-remark-html)\n[![Code style: Prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier)\n[![Donate](https://img.shields.io/badge/Donate-PayPal-green.svg)](https://paypal.me/alecdotbiz)\n\n\u003e Process markdown with [remark-html](https://www.npmjs.com/package/remark-html)\n\nBasically, when you import a `.md` file, you'll get back a JS module with an HTML string as its default export. There are various options to customize the HTML output.\n\n\u0026nbsp;\n\n## Usage\n\n```ts\nimport remarkHtml from 'vite-remark-html'\n\nexport default {\n  plugins: [remarkHtml()],\n}\n```\n\n### Remark plugins\n\nTo add Remark plugins, call the `use` method on the Vite plugin. It returns the Vite plugin, so you can easily chain together multiple `.use` calls.\n\n```ts\nimport remarkHtml from 'vite-remark-html'\nimport remarkSlug from 'remark-slug'\n\nexport default {\n  plugins: [remarkHtml().use(remarkSlug)],\n}\n```\n\n### Filter options\n\nMarkdown files can be filtered, in case you only want a subset to be processed by this plugin.\n\n```ts\nremarkHtml({\n  exclude: /\\/node_modules\\//,\n})\n```\n\nFor more details, see [here](https://github.com/rollup/plugins/tree/master/packages/pluginutils#include-and-exclude).\n\n### HTML options\n\nAll options listed [here](https://github.com/syntax-tree/hast-util-to-html/tree/7.1.3#tohtmltree-options) are also supported.\n\n```ts\nremarkHtml({\n  allowDangerousHtml: true,\n})\n```\n\n### Using the HTML\n\nIn your client code, you can use `import` or dynamic `import()` to load the HTML string.\n\n```ts\nimport html from './test.md'\n// or\nconst htmlPromise = import('./test.md').then(module =\u003e module.default)\n```\n\nThen you can use that as the `innerHTML` of another element.\n\n```tsx\ndocument.getElementById('markdown').innerHTML = html\n// or\n\u003cdiv dangerouslySetInnerHtml={{ __html: html }} /\u003e\n```\n\n[Try the demo](./demo) to see it in action.\n\n### TypeScript usage\n\nIn your `tsconfig.json`\n\n```json\n{\n  \"compilerOptions\": {\n    \"types\": [\"vite-remark-html/client\"]\n  }\n}\n```\n\nThis lets you import `.md` files with type-checking support.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falloc%2Fvite-remark-html","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falloc%2Fvite-remark-html","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falloc%2Fvite-remark-html/lists"}