remark-custom-container

remark-custom-container

remarkjs parser plugin for custom directive (compatible with new parser in remark. see #536)

Note This plugin is highly inspired by 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:

::: className Custom Title

Container Body

:::

will be rendered as follows

<div class="remark-container className">
  <div class="remark-container__title">
    Custom Title
  </div>
  Container Body
</div>

Install

$ npm install remark-custom-container

Usage

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

use(container, {
  className: string, // default to "remark-container",
  containerTag: string // default to "div"
})