自定义容器

让你的 VuePress 站点中的 Markdown 文件支持自定义容器。

主题可以为你添加提示、注释、信息、注意、警告和详情自定义容器的支持。

语法

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

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

TIP

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

示例

输入

::: info
信息容器。
:::

::: note
注释容器。
:::

::: tip
提示容器
:::

::: warning
警告容器
:::

::: danger
危险容器
:::

::: details
详情容器
:::

::: info 自定义标题

一个有 `代码` 和 [链接](#markdown) 的信息容器。

```js
const a = 1;
```

:::

::: note 自定义标题

一个有 `代码` 和 [链接](#markdown) 的注释容器。

```js
const a = 1;
```

:::

::: tip 自定义标题

一个有 `代码` 和 [链接](#markdown) 的提示容器。

```js
const a = 1;
```

:::

::: warning 自定义标题

一个有 `代码` 和 [链接](#markdown) 的警告容器。

```js
const a = 1;
```

:::

::: danger 自定义标题

一个有 `代码` 和 [链接](#markdown) 的危险容器。

```js
const a = 1;
```

:::

::: details 自定义标题

一个有 `代码` 和 [链接](#markdown) 的详情容器。

```js
const a = 1;
```

:::

::: info 自定义信息
:::

::: note 自定义注释
:::

::: tip 自定义提示
:::

::: warning 自定义警告
:::

::: danger 自定义危险
:::

输出

INFO

信息容器。

NOTE

注释容器。

TIP

提示容器

WARNING

警告容器

DANGER

危险容器

Details

详情容器

自定义标题

一个有 代码 和 链接 的信息容器。

const a = 1;

自定义标题

一个有 代码 和 链接 的注释容器。

const a = 1;

自定义标题

一个有 代码 和 链接 的提示容器。

const a = 1;

自定义标题

一个有 代码 和 链接 的警告容器。

const a = 1;

自定义标题

一个有 代码 和 链接 的危险容器。

const a = 1;

自定义标题

一个有 代码 和 链接 的详情容器。

const a = 1;

自定义信息

自定义注释

自定义提示

自定义警告

自定义危险

参考

• vuepress-plugin-container