container

@vuepress/plugin-container

Register markdown custom containers in your VuePress site.

This plugin simplifies the use of markdown-it-containeropen in new window, but also retains its original capabilities.

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

Container Syntax

::: <type> [info]
[content]
:::
1
2
3
  • 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.

TIP

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

Options

type

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:

module.exports = {
  plugins: [
    [
      '@vuepress/container',
      {
        type: 'tip',
        locales: {
          '/': {
            defaultInfo: 'TIP',
          },
          '/zh/': {
            defaultInfo: '提示',
          },
        },
      },
    ],
  ],
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

before

  • Type: (info: string) => string

  • Default:

(info: string): string =>
  `<div class="custom-container ${type}">${info ? `<p class="custom-container-title">${info}</p>` : ''}\n`
1
2
  • 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'
1
  • 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: any,
  env: MarkdownEnv,
  self: Renderer
) => string
1
2
3
4
5
6
7

validate

marker