\n\n[remarkjs][remarkjs] parser plugin for custom directive (compatible with new parser in remark. see [#536][536])\n\n> **Note**\n> This plugin is highly inspired by [vuepress-plugin-container][vuepress-plugin-container].\n\nThis package is ESM only: Node 12+ is needed to use it and it must be `import`ed instead of `require`d.\n\n## Syntax\n\nContainer described with `:::[space]{class name}[space]{container title}` and `:::`.\n\nexample:\n\n```markdown\n::: className Custom Title\n\nContainer Body\n\n:::\n```\n\nwill be rendered as follows\n\n```html\n
\n
\n Custom Title\n
\n Container Body\n
\n```\n\n## Install\n\n```shell\n$ npm install remark-custom-container\n```\n\n## Usage\n\n```javascript\nimport remark from \"remark\";\nimport remark2rehype from \"remark-rehype\";\nimport stringify from \"rehype-stringify\";\n\nimport container from \"remark-custom-container\";\n\nconst html = await remark()\n .use(container)\n .use(remark2rehype)\n .use(stringify);\n```\n\n## Options\n\n```javascript\nuse(container, {\n className: string, // optional, default to \"remark-container\",\n containerTag: string, // optional, default to \"div\"\n titleElement: Record | null, // optional, default to { className: string[] }\n additionalProperties: (className?: string, title?: string) => Record, // optional, default to undefined\n})\n```\n\n**`className`** is an option to provide custom className other than `remark-container`.\n\n**`containerTag`** is an option to provide custom HTML tag for the container other than `div`.\n\n**`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.\n\n```html\n
\n Container Body\n
\n```\n\n**`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.\n\nexample:\n\n```markdown\n::: warning My Custom Title\n\nmy paragraph\n\n:::\n```\n\n```javascript\nuse(container, {\n className: \"remark-custom-classname\",\n containerTag: \"article\",\n titleElement: null,\n additionalProperties: (className, title) => {\n title,\n [\"data-type\"]: className?.toLowerCase(),\n }\n})\n```\n\nis going to produce the container below:\n\n```html\n\n
my paragraph
\n\n```\n\n**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.\n\n[remarkjs]: https://github.com/remarkjs/remark\n[536]: https://github.com/remarkjs/remark/pull/536\n[vuepress-plugin-container]: https://github.com/vuepress/vuepress-community/tree/main/packages/vuepress-plugin-container\n","readmeFilename":"README.md","homepage":"https://github.com/koka831/remark-custom-container#readme","repository":{"type":"git","url":"git+ssh://git@github.com/koka831/remark-custom-container.git"},"bugs":{"url":"https://github.com/koka831/remark-custom-container/issues"}}
![\"npm](\"https://badge.fury.io/js/remark-custom-container.svg\"){kind=icon}
\n \n \n