Markdown Extension Examples

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

Syntax Highlighting

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

Input

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

Embedded Slidev Presentation

You can embed interactive presentations created with Slidev directly in VitePress using iframe. This example demonstrates a seamless integration:

幻灯片访问说明

由于幻灯片需要单独启动服务，请按照以下步骤访问：

1. 本地开发环境：运行 npm run slides:dev 启动演示幻灯片
2. 访问地址：http://localhost:3030
3. 生产环境：需要单独部署幻灯片服务

或者直接点击下方链接访问：

💻 查看演示幻灯片

More

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