代码高亮

基于 Shiki 的代码高亮，构建时预渲染为静态 HTML。

示例

Rust
use std::future::Future;async fn map_concurrent<T, U, F, Fut>(items: Vec<T>, f: F) -> Vec<U>where    F: Fn(T) -> Fut,    Fut: Future<Output = U>,{    futures::future::join_all(items.into_iter().map(f)).await}

Markdown
```rustuse std::future::Future;async fn map_concurrent<T, U, F, Fut>(items: Vec<T>, f: F) -> Vec<U>where    F: Fn(T) -> Fut,    Fut: Future<Output = U>,{    futures::future::join_all(items.into_iter().map(f)).await}```

运行时

浅色模式使用 GitHub Light Default 主题，深色模式使用 GitHub Dark Default 主题。

可通过 vp/config/runtime.ts 的 server.highlight 自定义主题：

TypeScript
export default {  server: {    highlight: {      light: 'github-light-default',      dark: 'github-dark-default',    },  },};

light 或 dark 缺失、主题不存在或加载失败时，会使用默认主题。

支持主题

Shiki 提供了数十种主题，详情参考 Shiki 官方文档。

高级用法

行高亮

在代码块语言后添加 {行号}，可以高亮指定行。支持单行、多个行号和连续范围。

TypeScript
const name = 'VanillaPress';const version = '1.5';export function info() {  return `${name}@${version}`;}

Markdown
```ts {2,4-6}const name = 'VanillaPress';const version = '1.5';export function info() {  return `${name}@${version}`;}```

也可以使用 [!code highlight]。写在代码行末尾时作用于当前行；独占注释行时作用于下一行。标记会在构建时移除，不会出现在最终 HTML 中。

TypeScript
const name = 'VanillaPress';const version = '1.5';export function info() {  return `${name}@${version}`;}

Markdown
```tsconst name = 'VanillaPress';const version = '1.5'; // [!code highlight]export function info() {  // [!code highlight:3]  return `${name}@${version}`;}```

[!code highlight:3] 表示从目标行开始，连续高亮 3 行。

聚焦代码

使用 [!code focus] 可以突出关键代码，并弱化同一代码块中的其他行。

TypeScript
const name = 'VanillaPress';const version = '1.5';export function info() {  return `${name}@${version}`;}

Markdown
```tsconst name = 'VanillaPress';const version = '1.5'; // [!code focus]export function info() {  return `${name}@${version}`; // [!code focus]}```

同样支持连续行写法：

TypeScript
export function createApp() {  const app = {};  return app;}

Markdown
```tsexport function createApp() {  // [!code focus:3]  const app = {};  return app;}```

代码块中的颜色差异

使用 [!code ++] 和 [!code --] 表示新增和删除行，适合展示修改前后的差异。

TypeScript
const theme = 'github-light-default';const darkTheme = 'github-dark-default';const darkTheme = 'github-dark-high-contrast';

Markdown
```tsconst theme = 'github-light-default';const darkTheme = 'github-dark-default'; // [!code --]const darkTheme = 'github-dark-high-contrast'; // [!code ++]```

高亮错误和警告

使用 [!code warning] 和 [!code error] 标记警告或错误行。

TypeScript
function loadTheme(theme?: string) {  if (!theme) return 'github-light-default';  if (theme === 'unknown') throw new Error('Invalid theme');  return theme;}

Markdown
```tsfunction loadTheme(theme?: string) {  if (!theme) return 'github-light-default'; // [!code warning]  if (theme === 'unknown') throw new Error('Invalid theme'); // [!code error]  return theme;}```

行号

在代码块语言后添加 line-numbers 可以显示行号。

TypeScript
export const siteName = 'VanillaPress';export const version = '1.5';

Markdown
```ts line-numbersexport const siteName = 'VanillaPress';export const version = '1.5';```

也可以指定起始行号：

TypeScript
export function mount() {  return true;}

Markdown
```ts line-numbers=10export function mount() {  return true;}```