markdown 示例

此页面演示了 VitePress 提供的一些内置 markdown 扩展。

引用信息

输入

> 这是一个引用 `VitePress`

输出

这是一个引用 VitePress

代码高亮

VitePress 使用 markdown-it 作为解析器，并使用 Shiki 来突出显示语言语法

输入

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

输出

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

代码块组

输入

::: code-group

```sh [pnpm]
#查询pnpm版本
pnpm -v
```

```sh [yarn]
#查询yarn版本
yarn -v
```

:::

输出

pnpm

#查询pnpm版本
pnpm -v

yarn

#查询yarn版本
yarn -v

提示信息

输入

::: 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.
:::

输出

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.

折叠语法

输入

<details>
  <summary>点我展开</summary>
  Markdown默认折叠语法，Vitepress可以使用容器折叠语法，更加美观
</details>

输出

点我展开

Markdown默认折叠语法，Vitepress可以使用容器折叠语法，更加美观