Vitepress Markdown Demo

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:

Hight Light Demo

Input

```js{4}
export default {
  data () {
    return {
      msg: 'Hight Light Demo!'
    }
  }
}
```

Output

export default {
  data () {
    return {
      msg: 'Hight Light Demo!'
    }
  }
}

Add、Delete

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

Add、Delete Demo

```js
export default {
  data () {
    return {
      msg: 'Hight Light Demo!'
      msg: 'Add、Delete Demo!'
    }
  }
}
```

Input

```js-vue
export default {
  data () {
    return {
      msg: 'Hight Light Demo!' // [!!code --]
      msg: 'Add、Delete Demo!' // [!!code ++]
    }
  }
}
```

Output

export default {
  data () {
    return {
      msg: 'Hight Light Demo!'
      msg: 'Add、Delete Demo!'
    }
  }
}

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

細節：

This is an info box.

💡 錦囊 [Tips]：

This is a tip.

⚡ 注意 [Warning]：

This is a warning.

⛔ 錯誤 [Error]：

This is a dangerous warning.

詳細資料 [Details]：

This is a details block.

More

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