markdown-container

@vuepress/plugin-markdown-container

Register markdown custom containers in your VuePress site.

This plugin simplifies the use of markdown-it-container, but also retains its original capabilities.

The Custom Containers of default theme is powered by this plugin.

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

type

  • Type: string

  • Details:

    The type of the container.

    It will be used as the name param of markdown-it-container.

locales

  • Type: Record<string, { defaultInfo: string }>

  • Details:

    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.

  • Example:

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

before

  • Type: (info: string) => string

  • Default:

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

  • Details:

    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.

after

  • Type: (info: string) => string

  • Default:

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

  • Details:

    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.

render

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

  • Details:

    The render option of markdown-it-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.

validate

marker