Code Blocks

Syntax highlighting, line highlighting, colored diffs, focus, and line numbers

VitePress uses Shiki for syntax highlighting with powerful code block features.

Syntax Highlighting

Specify language after opening backticks:

```js
export default {
  name: 'MyComponent'
}
```

Supports all languages available in Shiki.

Line Highlighting

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]
    }
  }
}
```

Focus

Blur other code and focus specific lines:

```js
export default {
  data() {
    return {
      msg: 'Focused!' // [!code focus]
    }
  }
}
```

Focus multiple lines:

// [!code focus:3]

Colored Diffs

Show additions and removals:

```js
export default {
  data() {
    return {
      msg: 'Removed' // [!code --]
      msg: 'Added'   // [!code ++]
    }
  }
}
```

Errors and Warnings

Color lines as errors or warnings:

```js
export default {
  data() {
    return {
      msg: 'Error',   // [!code error]
      msg: 'Warning'  // [!code warning]
    }
  }
}
```

Line Numbers

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
```

Code Groups

Tabbed code blocks:

::: code-group

```js [JavaScript]
export default { /* ... */ }
```

```ts [TypeScript]
export default defineConfig({ /* ... */ })
```

:::

Import Code Snippets

From external files:

<<< @/snippets/snippet.js

With 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]

:::

File Labels

Add filename labels to code blocks:

```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-numbers and :no-line-numbers control line numbers per block

• @ in imports refers to source root

• Code groups create tabbed interfaces