1.0.0 • Published 16 days ago
remark-admonition v1.0.0
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
This is not an official Google product.
1.0.0
16 days ago