CavinHuangNote笔记
github icon

自定义容器

category icon
tag icon

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

配置

:::: code-group

::: code-group-item TS

// .vuepress/config.ts
import { defineUserConfig } from "vuepress";
import { weaselTheme } from "@mr-huang/vuepress-theme-weasel";

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







 
 
 
 



:::

::: code-group-item JS

// .vuepress/config.js
const { weaselTheme } = require("@mr-huang/vuepress-theme-weasel");

module.exports = {
  theme: weaselTheme({
    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 自定义危险
:::