{"id":17262821,"url":"https://github.com/igassmann/remark-directive-rehype","last_synced_at":"2026-04-01T18:25:17.142Z","repository":{"id":47440418,"uuid":"428216613","full_name":"IGassmann/remark-directive-rehype","owner":"IGassmann","description":"Remark plugin to enable Markdown directives to be parsed as HTML.","archived":false,"fork":false,"pushed_at":"2023-03-01T20:59:53.000Z","size":166,"stargazers_count":32,"open_issues_count":7,"forks_count":3,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-07T03:09:33.192Z","etag":null,"topics":["directive","hast","markdown","mdast","plugin","rehype","remark","remark-directive","remark-plugin","unified"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"unlicense","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/IGassmann.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"docs/CONTRIBUTING.md","funding":null,"license":null,"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-11-15T10:22:55.000Z","updated_at":"2025-03-14T02:45:30.000Z","dependencies_parsed_at":"2024-06-18T17:04:57.427Z","dependency_job_id":"9e681b46-14a9-41fc-b349-694df62c9306","html_url":"https://github.com/IGassmann/remark-directive-rehype","commit_stats":{"total_commits":36,"total_committers":2,"mean_commits":18.0,"dds":"0.13888888888888884","last_synced_commit":"6ba8e22991b4a760c718aae50799564af907ed50"},"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IGassmann%2Fremark-directive-rehype","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IGassmann%2Fremark-directive-rehype/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IGassmann%2Fremark-directive-rehype/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IGassmann%2Fremark-directive-rehype/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/IGassmann","download_url":"https://codeload.github.com/IGassmann/remark-directive-rehype/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248839609,"owners_count":21169835,"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":["directive","hast","markdown","mdast","plugin","rehype","remark","remark-directive","remark-plugin","unified"],"created_at":"2024-10-15T07:54:48.790Z","updated_at":"2026-03-27T04:02:53.567Z","avatar_url":"https://github.com/IGassmann.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# remark-directive-rehype\n\n**[remark][]** plugin to integrate [remark-directive][] with [remark-rehype][].\n\n## What is this?\n\nThis package is a [unified][] ([remark][]) plugin to enable Markdown directives to be parsed as HTML\nwhen using [remark-rehype][]. Markdown directives are first parsed with [remark-directive][]\nwhich needs to be used before this plugin.\n\n**unified** is a project that transforms content with abstract syntax trees\n(ASTs).\n**remark** adds support for markdown to unified.\n**rehype** adds support for HTML to unified.\n**mdast** is the markdown AST that remark uses.\n**hast** is the HTML AST that rehype uses.\nThis is a remark plugin that transforms mdast.\n\n## When should I use this?\n\nThis project is useful when you want directives parsed by [remark-directive][] to be later parsed as\nHTML ([hast][] nodes) when using [remark-rehype][]. This is specifically useful when one wants to\nconvert Markdown directives into HTML tags that can be outputted as components with\n[react-markdown][].\n\n## Installation\n\nThis package is [ESM only](https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c).\nIn Node.js (version 20+), install with [npm][]:\n\n```sh\nnpm install remark-directive-rehype\n```\n\n## Usage\n\nSay we have the following file, `example.md`:\n\n```markdown\n:::documentation-page{title=\"Welcome\"}\n\nPlease install :inline-code[unified]!\n\n::copyright-notice{year=\"2020\"}\n\n:::\n```\n\nAnd our module `example.js` looks as follows:\n\n```js\nimport {read} from 'to-vfile'\nimport {unified} from 'unified'\nimport remarkParse from 'remark-parse'\nimport remarkDirective from 'remark-directive'\nimport remarkDirectiveRehype from 'remark-directive-rehype'\nimport remarkRehype from 'remark-rehype'\nimport rehypeStringify from 'rehype-stringify'\n\nconst file = await unified()\n  .use(remarkParse)\n  .use(remarkDirective)\n  .use(remarkDirectiveRehype)\n  .use(remarkRehype)\n  .use(rehypeStringify)\n  .process(await read('example.md'))\n\nconsole.log(String(file))\n```\n\nNow running `node example` yields:\n\n```html\n\u003cdocumentation-page title=\"Welcome\"\u003e\n  \u003cp\u003ePlease install \u003cinline-code\u003eunified\u003c/inline-code\u003e!\u003c/p\u003e\n  \u003ccopyright-notice year=\"2020\"\u003e\u003c/copyright-notice\u003e\n\u003c/documentation-page\u003e\n```\n\n## Examples\n\n### Example: `react-markdown`\n\nYou can use it with [react-markdown][] to render custom React components for each defined directive.\n\n```js\nimport { createRoot } from 'react-dom/client'\nimport Markdown from 'react-markdown'\nimport remarkDirective from 'remark-directive'\nimport remarkDirectiveRehype from 'remark-directive-rehype'\n\nconst markdown = `\n# Cat videos\n\n::youtube-video[Video of a cat in a box]{#01ab2cd3efg}\n`\n\nconst YouTubeVideo = ({id, children}) =\u003e (\n  \u003ciframe\n    src={'https://www.youtube.com/embed/' + id}\n    width=\"200\"\n    height=\"200\"\n  \u003e\n    {children}\n  \u003c/iframe\u003e\n)\n\ncreateRoot(document.getElementById('root')).render(\n  \u003cMarkdown\n    remarkPlugins={[remarkDirective, remarkDirectiveRehype]}\n    components={{\n      'youtube-video': YouTubeVideo\n    }}\n  \u003e\n    {markdown}\n  \u003c/Markdown\u003e\n)\n```\n\nYields:\n\n```html\n\u003ch1\u003eCat videos\u003c/h1\u003e\n\u003ciframe src=\"https://www.youtube.com/embed/01ab2cd3efg\" width=\"200\" height=\"200\"\u003eVideo of a cat in a box\u003c/iframe\u003e\n```\n\n### Example: `rehype-components`\n\nYou can use in conjunction with [rehype-components][] to render components made with [hastscript][].\n\n```js\n// …\n\nconst file = await unified()\n  .use(remarkParse)\n  .use(remarkDirective)\n  .use(remarkDirectiveRehype)\n  .use(remarkRehype)\n  .use(rehypeComponents, {\n    components: {\n      'documentation-page': DocumentationPage,\n      'inline-code': InfoBox,\n      'copyright-notice': CopyrightNotice,\n    },\n  })\n  .use(rehypeStringify)\n  .process(await read('example.md'))\n\nconsole.log(String(file))\n```\n\nSee [rehype-components][] for more information on how to implement the components.\n\n\n\u003c!-- Definitions --\u003e\n\n[remark]: https://github.com/remarkjs/remark\n\n[remark-directive]: https://github.com/remarkjs/remark-directive\n\n[remark-rehype]: https://github.com/remarkjs/remark-rehype\n\n[unified]: https://github.com/unifiedjs/unified\n\n[hast]: https://github.com/syntax-tree/hast\n\n[npm]: https://docs.npmjs.com/cli/install\n\n[react-markdown]: https://github.com/remarkjs/react-markdown\n\n[rehype-components]: https://github.com/marekweb/rehype-components\n\n[hastscript]: https://github.com/syntax-tree/hastscript\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Figassmann%2Fremark-directive-rehype","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Figassmann%2Fremark-directive-rehype","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Figassmann%2Fremark-directive-rehype/lists"}