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

1export default {
2  data () {
3    return {
4      msg: 'Highlighted!'
5    }
6  }
7}

Custom Containers

Input

1::: info
2This is an info box.
3:::
4
5::: tip
6This is a tip.
7:::
8
9::: warning
10This is a warning.
11:::
12
13::: danger
14This is a dangerous warning.
15:::
16
17::: details
18This is a details block.
19:::

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.

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

Markdown Extension Examples#

Syntax Highlighting#

Custom Containers#

More#

Markdown Extension Examples

Syntax Highlighting

Custom Containers

More