我们采用表达力更强，更美观的 Expressive Code 来展示代码块，更多的语法上的用法可以关注官方的文档。

配置

我们在 config/site.toml 中可以对代码块使用的主题以及一些插件进行配置：

1
[config.code]
2
lightTheme = "catppuccin-latte"
3
darkTheme = "catppuccin-macchiato"
4
lineNumbers = true
5
wrap = true
6
preserveIndent = true
7
collapseStyle = "collapsible-auto"

我们的主题默认启用以下功能：

显示行号
自动折行
折叠长代码

主题

我们可以在主题页面来找到支持的主题，自行填写中意的代码主题即可

但是注意，如果只想要单一主题的话（例如都是暗色主题），那么需要填写为：

1
[config.code]
2
lightTheme = "catppuccin-macchiato"
3
darkTheme = "catppuccin-macchiato"

显示行号与标题

我们可以通过 showLineNumbers 这个选项来知道显式的决定是否显示行号（默认为显示），例如：

1
```js showLineNumbers=false
2
const foo = 'bar';
3
```

其显示为：

const foo = 'bar';

如果想要显示标题，我们可以考虑：

1
```js title="这是标题"
2
const foo = 'bar';
3
```

显示为：

1
const foo = 'bar';

高亮行与文字

高亮行支持以下三种格式：

github 的插入格式，写法为 ins={"desc": lineno-lineno}
github 的删除格式，写法为 del={"desc": lineno-lineno}
普通高亮模式，写法为 {"desc": lineno-lineno}

注意，"desc" 也会占用一行，如果要添加这样的描述，需要注意自己的行数没有数错。

例如：

1
```js ins={1-3} del={5} {"desc": 6-7}
2
const line1 = 'insert';
3
const line2 = 'ii';
4
const line3 = 'nn';
5

6
const line5 = 'del';
7

8
const line7 = 'mark';
9
```

显示为：

1
const line1 = 'insert';
2
const line2 = 'ii';
3
const line3 = 'nn';
4

5
const line5 = 'del';
6

7
const line7 = 'mark';

而高亮文字，可以写为：

1
```js "foo"
2
const foo = 'foo' + 'bar';
3
```

显示为：

1
const foo = 'foo' + 'bar';

长代码折叠

1
```js collapse={1-5, 12-14, 21-24}
2
// All this boilerplate setup code will be collapsed
3
import { someBoilerplateEngine } from '@example/some-boilerplate';
4
import { evenMoreBoilerplate } from '@example/even-more-boilerplate';
5

6
const engine = someBoilerplateEngine(evenMoreBoilerplate());
7

8
// This part of the code will be visible by default
9
engine.doSomething(1, 2, 3, calcFn);
10

11
function calcFn() {
12
  // You can have multiple collapsed sections
13
  const a = 1;
14
  const b = 2;
15
  const c = a + b;
16

17
  // This will remain visible
18
  console.log(`Calculation result: ${a} + ${b} = ${c}`);
19
  return c;
20
}
21

22
// All this code until the end of the block will be collapsed again
23
engine.closeConnection();
24
engine.freeMemory();
25
engine.shutdown({ reason: 'End of example boilerplate code' });
26
```

我们默认的格式为 github 折叠格式，显示为：


5 collapsed lines
1
// All this boilerplate setup code will be collapsed
2
import { someBoilerplateEngine } from '@example/some-boilerplate';
3
import { evenMoreBoilerplate } from '@example/even-more-boilerplate';
4

5
const engine = someBoilerplateEngine(evenMoreBoilerplate());
6

7
// This part of the code will be visible by default
8
engine.doSomething(1, 2, 3, calcFn);
9

10
function calcFn() {
11
  // You can have multiple collapsed sections
3 collapsed lines
12
  const a = 1;
13
  const b = 2;
14
  const c = a + b;
15

16
  // This will remain visible
17
  console.log(`Calculation result: ${a} + ${b} = ${c}`);
18
  return c;
19
}
20

4 collapsed lines
21
// All this code until the end of the block will be collapsed again
22
engine.closeConnection();
23
engine.freeMemory();
24
engine.shutdown({ reason: 'End of example boilerplate code' });