Using custom anchors
Table
| Tables | Are | Cool |
|---|---|---|
| col 3 is | right-aligned | $1600 |
| col 2 is | centered | $12 |
| zebra stripes | are neat | $1 |
Emoji
🎉 💯
Toc
Custom Containers
Default Title
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.
Custom Title
STOP
Danger zone, do not proceed
Click me to view the code
js
console.log("Hello, VitePress!");console.log("Hello, VitePress!");Code Blocks
Syntax Highlighting in Code Blocks
js
export default {
name: "MyComponent",
// ...
};export default {
name: "MyComponent",
// ...
};html
<ul>
<li v-for="todo in todos" :key="todo.id">{{ todo.text }}</li>
</ul><ul>
<li v-for="todo in todos" :key="todo.id">{{ todo.text }}</li>
</ul>Line Highlighting in Code Blocks
js
export default { // Highlighted
data () {
return {
msg: `Highlighted!
This line isn't highlighted,
but this and the next 2 are.`,
motd: 'VitePress is awesome',
lorem: 'ipsum'
}
}
}export default { // Highlighted
data () {
return {
msg: `Highlighted!
This line isn't highlighted,
but this and the next 2 are.`,
motd: 'VitePress is awesome',
lorem: 'ipsum'
}
}
}Focus in Code Blocks
js
export default {
data() {
return {
msg: "Focused!",
};
},
};export default {
data() {
return {
msg: "Focused!",
};
},
};Colored Diffs in Code Blocks
js
export default {
data () {
return {
msg: 'Removed'
msg: 'Added'
}
}
}export default {
data () {
return {
msg: 'Removed'
msg: 'Added'
}
}
}Errors and Warnings in Code Blocks
js
export default {
data() {
return {
msg: "Error",
msg: "Warning",
};
},
};export default {
data() {
return {
msg: "Error",
msg: "Warning",
};
},
};Line Numbers
ts
// line-numbers is disabled by default
const line2 = "This is line 2";
const line3 = "This is line 3";// line-numbers is disabled by default
const line2 = "This is line 2";
const line3 = "This is line 3";ts
// line-numbers is enabled
const line2 = 'This is line 2'
const line3 = 'This is line 3'// line-numbers is enabled
const line2 = 'This is line 2'
const line3 = 'This is line 3'ts
// line-numbers is enabled and start from 2
const line3 = 'This is line 3'
const line4 = 'This is line 4'// line-numbers is enabled and start from 2
const line3 = 'This is line 3'
const line4 = 'This is line 4'Code Groups
js
/**
* @type {import('vitepress').UserConfig}
*/
const config = {
// ...
};
export default config;/**
* @type {import('vitepress').UserConfig}
*/
const config = {
// ...
};
export default config;ts
import type { UserConfig } from "vitepress";
const config: UserConfig = {
// ...
};
export default config;import type { UserConfig } from "vitepress";
const config: UserConfig = {
// ...
};
export default config;距离上次更新已经 372 天了, 文章内容可能已经过时。
- 本文链接：
- 版权声明：本博客所有文章除特别声明外，均默认采用 CC BY-NC-SA 4.0 许可协议。
我很可爱，请给我钱
