Install

$ npm i remark-admonition

Usage

import { unified } from 'unified'
import remarkParse from 'remark-parse'
import remarkDirective from 'remark-directive'
import remarkRehype from 'remark-rehype'
import rehypeStringify from 'rehype-stringify'
import { DEFAULT_ADMONITION_TYPES, remarkAdmonition } from 'remark-admonition'

console.log(
  unified()
    .use(remarkParse)
    .use(remarkDirective)
    .use(remarkAdmonition, {
      defaultElement: `section`,
      defaultProperties: { 'data-admonish': `true` },
      types: new Map([
        ...DEFAULT_ADMONITION_TYPES,
        [
          `fyi`,
          {
            defaultLabel: `FYI`,
            element: `div`,
            properties: { style: `color: blue;` },
          },
        ],
      ]),
    })
    .use(remarkRehype)
    .use(rehypeStringify).processSync(`
# Hello World!

:::note
Be careful folks!
:::

:::fyi[**title** time]
Wowowow!
:::
    `),
)

Output:

<h1>Hello World!</h1>
<section
  data-admonition-name="note"
  data-admonition-label="Note"
  data-admonish="true"
>
  <p>Be careful folks!</p>
</section>
<div
  data-admonition-name="fyi"
  data-admonition-label="title time"
  data-admonish="true"
  style="color: blue;"
>
  <p>Wowowow!</p>
</div>

Of course, instead of directly converting to HTML you can write a plugin that processes the attributes added by this plugin.

Contributing

Stars are always welcome!

For bugs and feature requests, please create an issue.

License

MIT © Tomer Aberbach
Apache 2.0 © Google