Setting the file. One moment.
Subchapter 12.7
references/features-code-blocks.mdMarkdown3 KBView on GitHub
VitePress uses Shiki for syntax highlighting with powerful code block features.
Specify language after opening backticks:
```js
export default {
name: 'MyComponent'
}
```Supports all languages (opens in a new tab) available in Shiki.
Highlight specific lines:
```js{4}
export default {
data() {
return {
msg: 'Highlighted!' // Line 4 highlighted
}
}
}
```Multiple lines and ranges:
```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:
```js
export default {
data() {
return {
msg: 'Highlighted!' // [!code highlight]
}
}
}
```Blur other code and focus specific lines:
```js
export default {
data() {
return {
msg: 'Focused!' // [!code focus]
}
}
}
```Focus multiple lines:
// [!code focus:3]Show additions and removals:
```js
export default {
data() {
return {
msg: 'Removed' // [!code --]
msg: 'Added' // [!code ++]
}
}
}
```Color lines as errors or warnings:
```js
export default {
data() {
return {
msg: 'Error', // [!code error]
msg: 'Warning' // [!code warning]
}
}
}
```Enable globally:
// .vitepress/config.ts
export default {
markdown: {
lineNumbers: true
}
}Per-block override:
```ts:line-numbers
// Line numbers enabled
const a = 1
```
```ts:no-line-numbers
// Line numbers disabled
const b = 2
```Start from specific number:
```ts:line-numbers=5
// Starts at line 5
const a = 1 // This is line 5
const b = 2 // This is line 6
```Tabbed code blocks:
::: code-group
```js [JavaScript]
export default { /* ... */ }
```
```ts [TypeScript]
export default defineConfig({ /* ... */ })
```
:::From external files:
<<< @/snippets/snippet.jsWith highlighting:
<<< @/snippets/snippet.js{2,4-6}Specific region:
<<< @/snippets/snippet.js#regionName{1,2}With language and line numbers:
<<< @/snippets/snippet.cs{1,2,4-6 c#:line-numbers}In code groups:
::: code-group
<<< @/snippets/config.js [JavaScript]
<<< @/snippets/config.ts [TypeScript]
:::Add filename labels to code blocks:
```js [vite.config.js]
export default defineConfig({})
```// [!code highlight] for inline highlighting// [!code focus] to focus with blur effect// [!code ++] and // [!code --] for diffs// [!code error] and // [!code warning] for status:line-numbers and :no-line-numbers control line numbers per block@ in imports refers to source root