内容示例展示

GitHub 风格的警报

容器一

::: info
这是一条info，自定义格式：info+空格+自定义文字
:::

::: tip 提示
这是一个提示，自定义格式：tip+空格+自定义文字
:::

::: warning 警告
这是一条警告，自定义格式：warning+空格+自定义文字
:::

::: danger 危险
这是一个危险警告，自定义格式：danger+空格+自定义文字
:::

::: details 点我查看
这是一条详情，自定义格式：details+空格+自定义文字
:::

容器一演示

INFO

这是一条info，自定义格式：info+空格+自定义文字

提示

这是一个提示，自定义格式：tip+空格+自定义文字

警告

这是一条警告，自定义格式：warning+空格+自定义文字

危险

这是一个危险警告，自定义格式：danger+空格+自定义文字

点我查看

这是一条详情，自定义格式：details+空格+自定义文字

容器二

> [!INFO]
> 这是info信息

> [!NOTE]
> 强调用户在快速浏览文档时也不应忽略的重要信息。

> [!TIP]
> 有助于用户更顺利达成目标的建议性信息。

> [!IMPORTANT]
> 对用户达成目标至关重要的信息。

> [!WARNING]
> 因为可能存在风险，所以需要用户立即关注的关键内容。

> [!CAUTION]
> 行为可能带来的负面影响。

容器二演示

INFO

这是info信息

NOTE

强调用户在快速浏览文档时也不应忽略的重要信息。

TIP

有助于用户更顺利达成目标的建议性信息。

IMPORTANT

对用户达成目标至关重要的信息。

WARNING

因为可能存在风险，所以需要用户立即关注的关键内容。

CAUTION

行为可能带来的负面影响。

代码块聚焦示例

export default {
  data() {
    return {
      msg: 'Focused!', 
    };
  },
};

代码块中的颜色差异

export default {
  data () {
    return {
      msg: 'Removed'
      msg: 'Added'
    }
  }
}

代码组

config.js

/**
 * @type {import('vitepress').UserConfig}
 */
const config = {
  // ...
};

export default config;

config.ts

import type { UserConfig } from 'vitepress';

const config: UserConfig = {
  // ...
};

export default config;

bash

pnpm add vitepress-plugin-group-icons