markdown-container

为你的 VuePress 站点注册自定义容器。

该插件简化了 @mdit/plugin-container 的使用方法，但同时也保留了其原本的能力。

使用方法

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

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

export default {
  plugins: [
    markdownContainerPlugin({
      // 配置项
    }),
  ],
}

容器语法

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

type 是必需的，应通过 type 配置项来指定。
info 是可选的，其默认值可以通过 locales 的 defaultInfo 配置项来指定。
content 可以是任何合法的 Markdown 内容。

提示

该插件可以被多次使用，以便支持不同类型的容器。

选项

type必填string

容器的类型。

它将会被用作 @mdit/plugin-container 的 name 配置项。

localesRecord<string, { defaultInfo: string }>

默认值{}

容器在不同 locales 下的默认 info。

如果没有指定该配置项，默认 info 会使用大写的 type。

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

参考：指南 > 多语言支持。

locales.<localePath>.defaultInfostring

容器在该 locale 下的默认 info。

before(info: string) => string

一个用于渲染容器起始标签的函数。

第一个参数是容器语法的 info 部分。

如果你没有设置 after 配置项，则该配置项也不会生效。

它的默认值为：

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

after(info: string) => string

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

一个用于渲染容器结束标签的函数。

第一个参数是容器语法的 info 部分。

如果你没有设置 before 配置项，则该配置项也不会生效。

renderMarkdownItContainerRenderFunction

容器的渲染函数。

它将会被同时用作 @mdit/plugin-container 的 openRenderer 和 closeRenderer 配置项。

该插件使用了一个默认的 render 函数。但如果你指定了该配置项，那么默认的 render 函数就会被替换掉，此时 locales、before 和 after 配置项都会被忽略。

它的类型为：

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

validate(params: string) => boolean

@mdit/plugin-container 的 validate 配置项。

markerstring

默认值':'

@mdit/plugin-container 的 marker 配置项。