自定义容器

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

配置

// .vuepress/config.ts
import { defineUserConfig } from "vuepress";
import { hopeTheme } from "vuepress-theme-hope";

export default defineUserConfig({
  theme: hopeTheme({
    plugins: {
      mdEnhance: {
        // this is the default option, so you can use it directly
        container: true,
      },
    },
  }),
});

// .vuepress/config.js
const { hopeTheme } = require("vuepress-theme-hope");

module.exports = {
  theme: hopeTheme({
    plugins: {
      mdEnhance: {
        // this is the default option, so you can use it directly
        container: true,
      },
    },
  }),
};

演示

INFO

信息容器。

NOTE

注释容器。

TIP

提示容器

WARNING

警告容器

DANGER

危险容器

Details

详情容器

自定义标题

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

const a = 1;

自定义标题

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

const a = 1;

自定义标题

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

const a = 1;

自定义标题

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

const a = 1;

自定义标题

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

const a = 1;

自定义标题

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

const a = 1;

自定义信息

自定义注释

自定义提示

自定义警告

自定义危险

::: 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 自定义危险
:::