跳至主要內容

container

大约 2 分钟

container

@vuepress/plugin-container

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

该插件简化了 markdown-it-containeropen in new window 的使用方法,但同时也保留了其原本的能力。

默认主题的 自定义容器 就是由该插件支持的。

使用方法

npm i -D @vuepress/plugin-container@next
import { containerPlugin } from "@vuepress/plugin-container";

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

容器语法

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

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

提示

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

配置项

type

locales

  • 类型: Record<string, { defaultInfo: string }>

  • 详情:

    容器在不同 locales 下的默认 info

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

  • 示例:

export default {
  plugins: [
    containerPlugin({
      type: "tip",
      locales: {
        "/": {
          defaultInfo: "TIP",
        },
        "/zh/": {
          defaultInfo: "提示",
        },
      },
    }),
  ],
};

before

  • 类型: (info: string) => string

  • 默认值:

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

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

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

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

after

  • 类型: (info: string) => string

  • 默认值:

(): string => "</div>\n";
  • 详情:

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

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

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

render

  • 类型:
type MarkdownItContainerRenderFunction = (
  tokens: Token[],
  index: number,
  options: any,
  env: MarkdownEnv,
  self: Renderer
) => string;

validate

marker