A remark plugin for rendering admonitions from directives.
$ npm i remark-admonitionimport { 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.
Stars are always welcome!
For bugs and feature requests, please create an issue.