my paragraph
remark parser plugin for custom directive in markdown
npm install remark-custom-container[remarkjs][remarkjs] parser plugin for custom directive (compatible with new parser in remark. see [#536][536])
> Note
> This plugin is highly inspired by [vuepress-plugin-container][vuepress-plugin-container].
This package is ESM only: Node 12+ is needed to use it and it must be imported instead of required.
Container described with :::[space]{class name}[space]{container title} and :::.
example:
``markdown
::: className Custom Title
Container Body
:::
`
will be rendered as follows
`html`
Custom Title
Container Body
`shell`
$ npm install remark-custom-container
`javascript
import remark from "remark";
import remark2rehype from "remark-rehype";
import stringify from "rehype-stringify";
import container from "remark-custom-container";
const html = await remark()
.use(container)
.use(remark2rehype)
.use(stringify);
`
`javascript`
use(container, {
className: string, // optional, default to "remark-container",
containerTag: string, // optional, default to "div"
titleElement: Record
additionalProperties: (className?: string, title?: string) => Record
})
className is an option to provide custom className other than remark-container.
containerTag is an option to provide custom HTML tag for the container other than div.
titleElement is an option to construct custom _inner title div element_. The default is pre-defined { className: string[] }, so the plugin is going to add an _inner title div element_ as a default. You can provide an object in order to set additional properties for the _inner title div element_. If you set null, the plugin is going to remove the _inner title div element_ like below.
`html`
Container Body
additionalProperties is an option to set additional properties for the custom container. It is a callback function that takes the className and the title as optional arguments and returns the object which is going to be used for adding additional properties into the container.
example:
`markdown
::: warning My Custom Title
my paragraph
:::
`
`javascript`
use(container, {
className: "remark-custom-classname",
containerTag: "article",
titleElement: null,
additionalProperties: (className, title) => {
title,
["data-type"]: className?.toLowerCase(),
}
})
is going to produce the container below:
` my paragraphhtml`
Note : The containerTag is not prefered to be a span or similar, if there is an inner title div element. This may cause a problem because of a div element under a span` element.
[remarkjs]: https://github.com/remarkjs/remark
[536]: https://github.com/remarkjs/remark/pull/536
[vuepress-plugin-container]: https://github.com/vuepress/vuepress-community/tree/main/packages/vuepress-plugin-container