Code Blocks

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!', 
    };
  },
};
```

Focus

Blur other code and focus specific lines:

```js
export default {
  data() {
    return {
      msg: 'Focused!', 
    };
  },
};
```

Focus multiple lines:

Colored Diffs

Show additions and removals:

```js
export default {
  data() {
    return {
      msg: 'Removed'
      msg: 'Added'
    }
  }
}
```

Errors and Warnings

Color lines as errors or warnings:

```js
export default {
  data() {
    return {
      msg: 'Error', 
      msg: '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