代码块

更新于 2026年11月12日

围栏代码块使用 Shiki 和 catppuccin 主题进行语法高亮。每个代码块都带有一个自动换行切换按钮，可在横向滚动和自动换行之间切换。未指定语言或使用 Shiki 无法识别的语言的代码块，会以相同样式渲染为纯文本。

标题

为代码块添加文件名或标题：

```typescript title="livemark.config.ts"
import { defineConfig } from "livemark"
```

渲染效果：

livemark.config.ts

import { defineConfig } from "livemark"

export default defineConfig({
  include: "docs/*.md",
})

在 meta 字符串中使用 {line,range} 语法，或在代码块内使用 // [!code highlight] 注释，来高亮指定的行。

使用 meta 语法：

```typescript {2,4-6}
const a = 1
const b = 2
```

渲染效果：

const a = 1
const b = 2
const c = 3
const d = 4
const e = 5
const f = 6

使用注释语法（// [!code highlight]）：

```typescript
const greeting = "hello"
const target = "world"
```

渲染效果：

const greeting = "hello"
const target = "world"

注释形式的注解会从渲染结果中移除。同样支持块注释语法 /* [!code highlight] */。

使用 /TERM/ 语法高亮某个单词的所有出现位置：

```typescript /config/
const config = loadConfig()
export default config
```

渲染效果：

const config = loadConfig()
export default config

使用 lineNumbers 在代码旁显示行号：

```typescript lineNumbers
const a = 1
const b = 2
```

渲染效果：

const a = 1
const b = 2
const c = 3

使用 lineNumbers=N 从指定行开始编号：

```typescript lineNumbers=5
const a = 1
const b = 2
```

渲染效果：

const a = 1
const b = 2
const c = 3

使用 // [!code ++] 和 // [!code --] 将行标记为新增或删除：

```typescript
const old = "removed"
const next = "added"
```

渲染效果：

const old = "removed"
const next = "added"

使用 // [!code focus] 淡化除聚焦行以外的所有行：

```typescript
const a = 1
const b = 2
const c = 3
```

渲染效果：

const a = 1
const b = 2
const c = 3

使用 // [!code error] 和 // [!code warning] 将行标记为错误或警告：

```typescript
const valid = "ok"
const invalid = null!
const risky = getValue() 
```

渲染效果：

const valid = "ok"
const invalid = null!
const risky = getValue()

使用 maxLines=N 限制长代码块的可见高度。点击「Expand」按钮即可显示完整代码：

```typescript maxLines=3
const a = 1
const b = 2
const c = 3
const d = 4
const e = 5
const f = 6
```

渲染效果：

const a = 1
const b = 2
const c = 3
const d = 4
const e = 5
const f = 6

当代码块带有标题时，会自动在标题栏中显示语言图标。支持的语言包括 TypeScript、JavaScript、React、Python、Rust 和 shell。

example.ts

const greeting = "hello"

example.py

greeting = "hello"

example.rs

let greeting = "hello";

为 TypeScript 代码块添加 twoslash 即可启用行内类型信息。将鼠标悬停在高亮的标识符上即可查看其类型：

```typescript twoslash
const greeting = "hello"
//    ^?
```

渲染效果：

const 
const greeting: "hello"greeting = "hello"

使用 // @errors: 2304 展示预期的错误：

const const x: anyx = unknown_varCannot find name 'unknown_var'.

编写 npm 命令，即可自动生成适用于所有包管理器的标签页：

```npm
npm install livemark
```

渲染效果：

npm install livemark