remark-admonition

A remark plugin for rendering admonitions from directives.

Install

$ npm i remark-admonition

Usage

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

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.

For pull requests, please read the contributing guidelines.

License

Apache License 2.0

This is not an official Google product.