container
大约 2 分钟
container
为你的 VuePress 站点注册自定义容器。
该插件简化了 markdown-it-container 的使用方法,但同时也保留了其原本的能力。
默认主题的 自定义容器 就是由该插件支持的。
使用方法
npm i -D @vuepress/plugin-container@next
import { containerPlugin } from "@vuepress/plugin-container";
export default {
plugins: [
containerPlugin({
// 配置项
}),
],
};
容器语法
::: <type> [info]
[content]
:::
type
是必需的,应通过 type 配置项来指定。info
是可选的,其默认值可以通过 locales 的defaultInfo
配置项来指定。content
可是任何合法的 Markdown 内容。
提示
该插件可以被多次使用,以便支持不同类型的容器。
配置项
type
类型:
string
详情:
容器的类型。
它将会被用作 markdown-it-container 的
name
参数。
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`;
after
类型:
(info: string) => string
默认值:
(): string => "</div>\n";
render
- 类型:
type MarkdownItContainerRenderFunction = (
tokens: Token[],
index: number,
options: any,
env: MarkdownEnv,
self: Renderer
) => string;
详情:
markdown-it-container 的
render
配置项。该插件使用了一个默认的
render
函数。但如果你指定了该配置项,那么默认的render
函数就会被替换掉,此时 locales 、 before 和 after 配置项都会被忽略。
validate
类型:
(params: string) => boolean
详情:
markdown-it-container 的
validate
配置项。
marker
类型:
string
详情:
markdown-it-container 的
marker
配置项。