Code Blocks
VitePress uses Shiki for syntax highlighting with powerful code block features.
Syntax Highlighting
Specify language after opening backticks:
md
```js
export default {
name: 'MyComponent',
};
```Supports all languages available in Shiki.
Line Highlighting
Highlight specific lines:
md
```js{4}
export default {
data() {
return {
msg: 'Highlighted!' // Line 4 highlighted
}
}
}
```Multiple lines and ranges:
md
```js{1,4,6-8}
// Line 1 highlighted
export default {
data() {
return { // Line 4
msg: 'Hi',
foo: 'bar', // Lines 6-8
baz: 'qux'
}
}
}
```Inline highlighting with comment:
md
```js
export default {
data() {
return {
msg: 'Highlighted!',
};
},
};
```Focus
Blur other code and focus specific lines:
md
```js
export default {
data() {
return {
msg: 'Focused!',
};
},
};
```Focus multiple lines:
js
Colored Diffs
Show additions and removals:
md
```js
export default {
data() {
return {
msg: 'Removed'
msg: 'Added'
}
}
}
```Errors and Warnings
Color lines as errors or warnings:
md
```js
export default {
data() {
return {
msg: 'Error',
msg: 'Warning',
};
},
};
```Line Numbers
Enable globally:
ts
// .vitepress/config.ts
export default {
markdown: {
lineNumbers: true,
},
};Per-block override:
md
```ts:line-numbers
// Line numbers enabled
const a = 1
```
```ts:no-line-numbers
// Line numbers disabled
const b = 2
```Start from specific number:
md
```ts:line-numbers=5
// Starts at line 5
const a = 1 // This is line 5
const b = 2 // This is line 6
```Code Groups
Tabbed code blocks:
md
::: code-group
```js [JavaScript]
export default {
/* ... */
};
```
```ts [TypeScript]
export default defineConfig({
/* ... */
});
```
:::Import Code Snippets
From external files:
md
<<< @/snippets/snippet.jsWith highlighting:
md
<<< @/snippets/snippet.js{2,4-6}Specific region:
md
<<< @/snippets/snippet.js#regionName{1,2}With language and line numbers:
md
<<< @/snippets/snippet.cs{1,2,4-6 c#:line-numbers}In code groups:
md
::: code-group
<<< @/snippets/config.js [JavaScript]
<<< @/snippets/config.ts [TypeScript]
:::File Labels
Add filename labels to code blocks:
md
```js [vite.config.js]
export default defineConfig({});
```Key Points
- Use
// [!code highlight]for inline highlighting - Use
// [!code focus]to focus with blur effect - Use
// [!code ++]and// [!code --]for diffs - Use
// [!code error]and// [!code warning]for status :line-numbersand:no-line-numberscontrol line numbers per block@in imports refers to source root- Code groups create tabbed interfaces
XiSenao