{"id":22799064,"url":"https://github.com/thomd/rehype-block","last_synced_at":"2026-05-07T13:04:48.121Z","repository":{"id":249718977,"uuid":"832340263","full_name":"thomd/rehype-block","owner":"thomd","description":"rehype plugin to wrap a block of markdown with a HTML tag","archived":false,"fork":false,"pushed_at":"2024-11-16T17:46:29.000Z","size":33,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-05T21:42:31.025Z","etag":null,"topics":["markdown","rehype","rehype-plugin"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/thomd.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":"2024-07-22T20:28:55.000Z","updated_at":"2024-11-16T17:46:32.000Z","dependencies_parsed_at":"2025-02-05T21:36:38.638Z","dependency_job_id":null,"html_url":"https://github.com/thomd/rehype-block","commit_stats":null,"previous_names":["thomd/rehype-block"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thomd%2Frehype-block","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thomd%2Frehype-block/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thomd%2Frehype-block/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thomd%2Frehype-block/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/thomd","download_url":"https://codeload.github.com/thomd/rehype-block/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246365651,"owners_count":20765549,"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":["markdown","rehype","rehype-plugin"],"created_at":"2024-12-12T07:07:49.558Z","updated_at":"2026-05-07T13:04:48.116Z","avatar_url":"https://github.com/thomd.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# rehype-block\n\n![Build][build-badge]\n\n`rehype-block` is a [rehype][rehype] plugin to wrap a block of markdown with a HTML tag. So what is does in fact is simply replacing markdown lines like for example `:::aside` and `:::` with `\u003caside\u003e` and `\u003c/aside\u003e` respectively.\n\nThe opening block requires an appended name to be used for the HTML tag (see example below).\n\n\u003e [!NOTE]\n\u003e This plugin does in fact the same as the plugin [remark-directive](https://github.com/remarkjs/remark-directive) but is less generic which can be a better fit for certain markdown situations. If you need more flexibility, use `remark-directive` instead.\n\n## Usage\n\nSay we have the following markdown file `example.md`:\n\n```markdown\n# headline\n\n:::aside\n\nfoo\n\n:::\n\ntext\n\n:::aside:2\n\nbar\n\n:::\n```\n\nand a module `example.js`:\n\n```js\nimport { remark } from 'remark'\nimport remarkRehype from 'remark-rehype'\nimport rehypeBlock from 'rehype-block'\nimport rehypeStringify from 'rehype-stringify'\nimport rehypeDocument from 'rehype-document'\nimport rehypeFormat from 'rehype-format'\nimport { read } from 'to-vfile'\n\nconst file = await remark()\n   .use(remarkRehype)\n   .use(rehypeBlock, { blockSymbol: ':::', classSymbol: ':' })\n   .use(rehypeDocument)\n   .use(rehypeFormat, { indent: '\\t' })\n   .use(rehypeStringify)\n   .process(await read('example.md'))\n\nconsole.log(file.value)\n```\n\nthen running `node example.js` yields:\n\n```html\n\u003c!doctype html\u003e\n\u003chtml lang=\"en\"\u003e\n   \u003chead\u003e\n      \u003cmeta charset=\"utf-8\" /\u003e\n      \u003ctitle\u003eexample\u003c/title\u003e\n      \u003cmeta content=\"width=device-width, initial-scale=1\" name=\"viewport\" /\u003e\n   \u003c/head\u003e\n   \u003cbody\u003e\n      \u003ch1\u003eheadline\u003c/h1\u003e\n      \u003caside\u003e\n         \u003cp\u003efoo\u003c/p\u003e\n      \u003c/aside\u003e\n      \u003cp\u003etext\u003c/p\u003e\n      \u003caside class=\"aside2\"\u003e\n         \u003cp\u003ebar\u003c/p\u003e\n      \u003c/aside\u003e\n   \u003c/body\u003e\n\u003c/html\u003e\n```\n\n## Test\n\n    npm run test\n\n## API\n\nThe default export is `rehypeBlock`.\n\n```js\nunified().use(rehypeBlock, options)\n```\n\n### Options\n\nThe following options are available:\n\n-  `blockSymbol` (`string`, optional) — symbol to be used to define a block. Default is `:::`.\n\n-  `classSymbol` (`string`, optional) — symbol to be used to separate an optional CSS class-name. Default is `:`.\n\n-  `prefixClassWithBlockSymbol` (`Boolean`, optional) — prefix CSS class-name with block symbol. Default is `false`.\n\n-  `wrapperTag` (`string`, optional) — tag name to be used to wrap the content of a block. Default is no wrapper tag.\n\n[rehype]: https://github.com/rehypejs/rehype\n[build-badge]: https://github.com/thomd/rehype-block/workflows/plugin-test/badge.svg\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthomd%2Frehype-block","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthomd%2Frehype-block","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthomd%2Frehype-block/lists"}