markdown-container

This plugin simplifies the use of @mdit/plugin-container, but also retains its original capabilities.

Usage

npm i -D @vuepress/plugin-markdown-container@next

.vuepress/config.ts
import { markdownContainerPlugin } from '@vuepress/plugin-markdown-container'

export default {
  plugins: [
    markdownContainerPlugin({
      // options
    }),
  ],
}

Container Syntax

::: <type> [info]
[content]
:::

The type is required and should be specified via type option.
The info is optional, and the default value can be specified via defaultInfo in locales option.
The content can be any valid markdown content.

Tips

This plugin can be used multiple times to support different types of containers.

Options

typeRequiredstring

The type of the container.

It will be used as the name option of @mdit/plugin-container.

localesRecord<string, { defaultInfo: string }>

Default{}

The default info of the container in different locales.

If this option is not specified, the default info will fallback to the uppercase of the type option.

.vuepress/config.ts
export default {
  plugins: [
    markdownContainerPlugin({
      type: 'tip',
      locales: {
        '/': {
          defaultInfo: 'TIP',
        },
        '/zh/': {
          defaultInfo: '提示',
        },
      },
    }),
  ],
}

See also: Guide > I18n.

locales.<localePath>.defaultInfostring

The default info of the container in this locale.

before(info: string) => string

A function to render the starting tag of the container.

The first param is the info part of container syntax.

This option will not take effect if you don't specify the after option.

Its default value is:

;(info: string): string =>
  `<div class="custom-container ${type}">${info ? `<p class="custom-container-title">${info}</p>` : ''}\n`

after(info: string) => string

Default(): string => '</div>\n'

A function to render the ending tag of the container.

The first param is the info part of container syntax.

This option will not take effect if you don't specify the before option.

renderMarkdownItContainerRenderFunction

The render function of the container.

It will be used as both the openRenderer and closeRenderer options of @mdit/plugin-container.

This plugin uses a default render function. If you specify this option, the default render function will be replaced, and the locales, before and after options will be ignored.

Its type is:

type MarkdownItContainerRenderFunction = (
  tokens: Token[],
  index: number,
  options: unknown,
  env: MarkdownEnv,
  self: Renderer,
) => string

validate(params: string) => boolean

The validate option of @mdit/plugin-container.

markerstring

Default':'

The marker option of @mdit/plugin-container.