Tables | Are | Cool |
---|---|---|
col 3 is | right-aligned | $1600 |
col 2 is | centered | $12 |
zebra stripes | are neat | $1 |
🎉 💯
Custom Containers
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!')
GitHub-flavored Alerts
NOTE
Highlights information that users should take into account, even when skimming.
TIP
Optional information to help a user be more successful.
IMPORTANT
Crucial information necessary for users to succeed.
WARNING
Critical content demanding immediate user attention due to potential risks.
CAUTION
Negative potential consequences of an action.
Syntax Highlighting in Code Blocks
js
export default {
name: 'MyComponent',
// ...
}
html
<ul>
<li v-for="todo in todos" :key="todo.id">
{{ todo.text }}
</li>
</ul>
Line Highlighting in Code Blocks
js
export default {
data () {
return {
msg: 'Highlighted!'
}
}
}
Focus in Code Blocks
js
export default {
data () {
return {
msg: 'Focused!'
}
}
}
Colored Diffs in Code Blocks
js
export default {
data () {
return {
msg: 'Removed'
msg: 'Added'
}
}
}
Errors and Warnings in Code Blocks
js
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'
ts
// 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'
Code Groups
js
/**
* @type {import('vitepress').UserConfig}
*/
const config = {
// ...
}
export default config
ts
import type { UserConfig } from 'vitepress'
const config: UserConfig = {
// ...
}
export default config