remark-block-directive

Remark plugin for turning HTML directive into MDX tags.

Example

Turn:

:::div{.foo}

bar

:::

Into:

<div class="foo">
bar
</div>

Tips

Only some HTML tags are supported.

Installation

npm install remark-block-directive --save-dev

Usage

import readFileSync from 'node:fs';

import { remark } from 'remark';
import { remarkBlockDirective } from 'remark-block-directive';
import remarkDirective from 'remark-directive';
import remarkMdx from 'remark-mdx';

const markdownText = readFileSync('example.md', 'utf8');

remark()
  .use(remarkMdx)
  .use(remarkDirective)
  .use(remarkBlockDirective)
  .process(markdownText)
  .then((file) => console.info(file))
  .catch((error) => console.warn(error));

Related

• markdown-code-block-meta
• rehype-extended-table
• remark-code-example
• remark-css-execute
• remark-docusaurus
• remark-kroki