Markdown Extension Examples

Markdown 扩展示例

This page demonstrates some of the built-in markdown extensions provided by VitePress.

本页面演示了 VitePress 提供的一些内置 Markdown 扩展功能。

---

Syntax Highlighting

语法高亮

VitePress provides Syntax Highlighting powered by Shiki, with additional features like line-highlighting:

VitePress 使用 Shiki 提供语法高亮功能，并支持额外的功能如行高亮：

Input / 输入代码

<!-- 
  js 表示 JavaScript 语言
  {4} 表示高亮第4行
-->
```js{4}
export default {
  data () {
    return {
      msg: 'Highlighted!'  // 这一行会被高亮显示
    }
  }
}
```

Output / 输出效果

export default {
  data () {
    return {
      msg: 'Highlighted!'
    }
  }
}

---

Custom Containers

自定义容器

Input / 输入代码

<!-- 信息框 - 蓝色主题，用于一般性信息 -->
::: info
This is an info box.
:::

<!-- 提示框 - 绿色主题，用于提示性内容 -->
::: tip
This is a tip.
:::

<!-- 警告框 - 黄色主题，用于警告信息 -->
::: warning
This is a warning.
:::

<!-- 危险框 - 红色主题，用于重要警告 -->
::: danger
This is a dangerous warning.
:::

<!-- 详情框 - 可折叠的详情块 -->
::: details
This is a details block.
:::

Output / 输出效果

INFO

This is an info box. 这是一个信息框。

TIP

This is a tip. 这是一个提示。

WARNING

This is a warning. 这是一个警告。

DANGER

This is a dangerous warning. 这是一个危险警告。

Details

This is a details block. 这是一个可折叠的详情块。

---

More

更多内容

Check out the documentation for the full list of markdown extensions.

查看文档获取 完整的 Markdown 扩展列表。