A remark plugin for rendering admonitions from directives.
$ npm i remark-admonitionimport { 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.
Stars are always welcome!
For bugs and feature requests, please create an issue.
For pull requests, please read the contributing guidelines.
This is not an official Google product.