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:
部落格快速鍵操作指南
上一篇 ←
下一篇 →
上一章節 Ctrl + ↑
下一章節 Ctrl + ↓
Hight Light Demo
md
```js{4}
export default {
data () {
return {
msg: 'Hight Light Demo!'
}
}
}
```1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
js
export default {
data () {
return {
msg: 'Hight Light Demo!'
}
}
}1
2
3
4
5
6
7
2
3
4
5
6
7
Add、Delete
VitePress provides Syntax Highlighting powered by Shiki, with additional features like line-highlighting:
Add、Delete Demo
md
```js
export default {
data () {
return {
msg: 'Hight Light Demo!'
msg: 'Add、Delete Demo!'
}
}
}
```1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
md
```js-vue
export default {
data () {
return {
msg: 'Hight Light Demo!' // [!!code --]
msg: 'Add、Delete Demo!' // [!!code ++]
}
}
}
```1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
js
export default {
data () {
return {
msg: 'Hight Light Demo!'
msg: 'Add、Delete Demo!'
}
}
}1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
Custom Containers
Input
md
::: 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.
:::1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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.