VincentZyuVitePress

Appearance

Markdown Extension Examples ​

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

Custom Containers ​

VitePress supports these built-in ::: container types:

  • info
  • tip
  • warning
  • danger
  • details
  • raw

info ​

INFO

This is an info box.

tip ​

TIP

This is a tip box.

warning ​

WARNING

This is a warning box.

danger ​

DANGER

This is a danger box.

details ​

Click me

This is a collapsible details block.

details open ​

Open by default

This details block is open by default.

Custom Title ​

提示

You can append a custom title after the container type.

注意事项

This is useful for note-style documentation.

STOP

Danger zone, do not proceed.

raw ​

md
::: raw
<div class="custom-demo">
  This content is wrapped in a raw container.
</div>
:::

raw is a special container used to reduce style and router conflicts.

Syntax Highlighting ​

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

Input

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

Output

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