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.

Syntax

Container described with :::[space]{class name}[space]{container title} and :::.

example:

``markdown
::: className Custom Title

Container Body

:::
`

will be rendered as follows

`html


`shell
$ npm install remark-custom-container
`

Usage

`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);
`

Options

`javascript
use(container, {
className: string, // optional, default to "remark-container",
containerTag: string, // optional, default to "div"
titleElement: Record | null, // optional, default to { className: string[] }
additionalProperties: (className?: string, title?: string) => Record, // optional, default to undefined
})
`

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


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:

`html


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