container
为你的 VuePress 站点注册自定义容器。
该插件简化了 markdown-it-container在新窗口打开 的使用方法，但同时也保留了其原本的能力。
默认主题的 自定义容器 就是由该插件支持的。
安装
npm i -D @vuepress/plugin-container@next
1
容器语法
::: <type> [info]
[content]
:::
1
2
3
2
3
type是必需的，应通过 type 配置项来指定。info是可选的，其默认值可以通过 locales 的defaultInfo配置项来指定。content可是任何合法的 Markdown 内容。
提示
该插件可以被多次使用，以便支持不同类型的容器。
配置项
type
类型：
string详情：
容器的类型。
它将会被用作 markdown-it-container在新窗口打开 的
name参数。
locales
类型：
Record<string, { defaultInfo: string }>详情：
容器在不同 locales 下的默认
info。如果没有指定该配置项，默认
info会使用大写的 type 。示例：
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
- 参考：
before
类型：
(info: string) => string默认值：
(info: string): string =>
`<div class="custom-container ${type}">${info ? `<p class="custom-container-title">${info}</p>` : ''}\n`
1
2
2
after
类型：
(info: string) => string默认值：
(): string => '</div>\n'
1
render
- 类型：
type MarkdownItContainerRenderFunction = (
tokens: Token[],
index: number,
options: any,
env: MarkdownEnv,
self: Renderer
) => string
1
2
3
4
5
6
7
2
3
4
5
6
7
详情：
markdown-it-container在新窗口打开 的
render配置项。该插件使用了一个默认的
render函数。但如果你指定了该配置项，那么默认的render函数就会被替换掉，此时 locales 、 before 和 after 配置项都会被忽略。
validate
类型：
(params: string) => boolean详情：
markdown-it-container在新窗口打开 的
validate配置项。
marker
类型：
string详情：
markdown-it-container在新窗口打开 的
marker配置项。