Expressive Code Example - Shirley Auspice's Blog

NOTE
Fuwari使用Expressive Code来呈现代码块，但是由于我自己总是忘记这些代码到底怎么写，干脆~~水一篇文章~~把它记下来方便查阅

TIP
以下是渲染后的结果，原始 Markdown 格式文本在文章末尾
~~（别问，问就是水字数的）~~

语法高亮#

常规语法高亮#

1
console.log("这段代码带有语法高亮！");

渲染 ANSI 转义序列#

1
ANSI Colors:
2
- Regular: Red Green Yellow Blue Magenta Cyan
3
- Bold:    Red Green Yellow Blue Magenta Cyan
4
- Dimmed:  Red Green Yellow Blue Magenta Cyan
5

6
256 colors (showing colors 160-177):
7
160 161 162 163 164 165
8
166 167 168 169 170 171
9
172 173 174 175 176 177
10

11
Full RGB colors:
12
ForestGreen - RGB(34, 139, 34)
13

14
Text formatting: Bold Dimmed Italic Underline

编辑器与终端框架#

Editor & Terminal Frames - Expressive Code

代码编辑器框架#

1
console.log("标题属性示例");

1
<div>文件名注释示例</div>

终端框架#

1
echo "此终端框架没有标题"

1
Write-Output "这个有标题！"

覆盖框架类型#

1
echo "看，没有框架！"

1
# 如果不覆盖，这里会显示为终端框架
2
function Watch-Tail { Get-Content -Tail 20 -Wait $args }
3
New-Alias tail Watch-Tail

文本与行标记#

Text & Line Markers - Expressive Code

标记完整行与行范围#

1
// 第 1 行 - 通过行号定位
2
// 第 2 行
3
// 第 3 行
4
// 第 4 行 - 通过行号定位
5
// 第 5 行
6
// 第 6 行
7
// 第 7 行 - 通过范围“7-8”定位
8
// 第 8 行 - 通过范围“7-8”定位

选择行标记类型（mark、ins、del）#

1
function demo() {
2
  console.log("这一行被标记为删除");
3
  // 这一行和下一行被标记为插入
4
  console.log("这是第二行插入的内容");
5

6
  return "这一行使用默认的中性标记类型";
7
}

为行标记添加标签#

1
<button
2
  role="button"
3
  {...props}
4
  value={value}
5
  className={buttonClassName}
6
  disabled={disabled}
7
  active={active}
8
>
9
  {children &&
10
    !active &&
11
    (typeof children === "string" ? <span>{children}</span> : children)}
12
</button>

将长标签放在独立行上#

1
<button
2
  role="button"
3
  {...props}
4
  value={value}
5
  className={buttonClassName}
6
  disabled={disabled}
7
  active={active}
8
>
9
  {children &&
10
    !active &&
11
    (typeof children === "string" ? <span>{children}</span> : children)}
12
</button>

使用类似 diff 的语法#

1
这一行将被标记为插入
2
这一行将被标记为删除
3
这是一行普通内容

1
--- a/README.md
2
+++ b/README.md
3
@@ -1,3 +1,4 @@
4
+这是一个实际的差异文件
5
-所有内容将保持不变
6
不会移除任何空白字符

将语法高亮与 diff 式语法结合#

1
function thisIsJavaScript() {
2
  // 整个代码块都将作为 JavaScript 进行高亮，
3
  // 并且我们仍然可以向其中添加差异标记！
4
  console.log('要移除的旧代码')
5
  console.log('崭新闪亮的代码！')
6
}

标记行内的单个文本#

1
function demo() {
2
  // 标记行内任意给定的文本
3
  return "支持给定文本的多次匹配";
4
}

正则表达式#

1
console.log("单词 yes 和 yep 将被标记。");

转义正斜杠#

1
echo "Test" > /home/test.txt

选择内联标记类型（mark、ins、del）#

1
function demo() {
2
  console.log("这些是插入和删除标记类型");
3
  // return 语句使用默认标记类型
4
  return true;
5
}

自动换行#

Word Wrap - Expressive Code

按代码块配置自动换行#

1
// 启用换行的示例
2
function getLongString() {
3
  return "这是一个非常长的字符串，很可能在可用空间内无法完全显示，除非容器非常宽";
4
}

1
// 禁用换行的示例
2
function getLongString() {
3
  return "这是一个非常长的字符串，很可能在可用空间内无法完全显示，除非容器非常宽";
4
}

配置换行行的缩进#

1
// 启用 preserveIndent 的示例（默认启用）
2
function getLongString() {
3
  return "这是一个非常长的字符串，很可能在可用空间内无法完全显示，除非容器非常宽";
4
}

1
// 禁用 preserveIndent 的示例
2
function getLongString() {
3
  return "这是一个非常长的字符串，很可能在可用空间内无法完全显示，除非容器非常宽";
4
}

可折叠部分#

Collapsible Sections - Expressive Code


5 collapsed lines
1
// 以下所有样板设置代码将被折叠
2
import { someBoilerplateEngine } from "@example/some-boilerplate";
3
import { evenMoreBoilerplate } from "@example/even-more-boilerplate";
4

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

7
// 这部分代码默认可见
8
engine.doSomething(1, 2, 3, calcFn);
9

10
function calcFn() {
11
  // 你可以有多个可折叠部分
3 collapsed lines
12
  const a = 1;
13
  const b = 2;
14
  const c = a + b;
15

16
  // 这部分保持可见
17
  console.log(`计算结果：${a} + ${b} = ${c}`);
18
  return c;
19
}
20

4 collapsed lines
21
// 从此处到代码块末尾的所有代码将再次折叠
22
engine.closeConnection();
23
engine.freeMemory();
24
engine.shutdown({ reason: "样板代码示例结束" });

行号#

Line Numbers - Expressive Code

按代码块显示行号#

1
// 此代码块将显示行号
2
console.log("来自第 2 行的问候！");
3
console.log("我在第 3 行");

// 此代码块已禁用行号
console.log("你好？");
console.log("抱歉，你知道我在哪一行吗？");

更改起始行号#

5
console.log("来自第 5 行的问候！");
6
console.log("我在第 6 行");

原始 Markdown 格式文本#

1
## 语法高亮
2

3
[Syntax Highlighting - Expressive Code](https://expressive-code.com/key-features/syntax-highlighting/)
4

5
### 常规语法高亮
6

7
```js
8
console.log("这段代码带有语法高亮！");
9
```
10

11
### 渲染 ANSI 转义序列
12

13
```ansi
14
ANSI Colors:
15
- Regular: [31mRed[0m [32mGreen[0m [33mYellow[0m [34mBlue[0m [35mMagenta[0m [36mCyan[0m
16
- Bold:    [1;31mRed[0m [1;32mGreen[0m [1;33mYellow[0m [1;34mBlue[0m [1;35mMagenta[0m [1;36mCyan[0m
17
- Dimmed:  [2;31mRed[0m [2;32mGreen[0m [2;33mYellow[0m [2;34mBlue[0m [2;35mMagenta[0m [2;36mCyan[0m
18

19
256 colors (showing colors 160-177):
20
[38;5;160m160 [38;5;161m161 [38;5;162m162 [38;5;163m163 [38;5;164m164 [38;5;165m165[0m
21
[38;5;166m166 [38;5;167m167 [38;5;168m168 [38;5;169m169 [38;5;170m170 [38;5;171m171[0m
22
[38;5;172m172 [38;5;173m173 [38;5;174m174 [38;5;175m175 [38;5;176m176 [38;5;177m177[0m
23

24
Full RGB colors:
25
[38;2;34;139;34mForestGreen - RGB(34, 139, 34)[0m
26

27
Text formatting: [1mBold[0m [2mDimmed[0m [3mItalic[0m [4mUnderline[0m
28
```
29

30
## 编辑器与终端框架
31

32
[Editor & Terminal Frames - Expressive Code](https://expressive-code.com/key-features/frames/)
33

34
### 代码编辑器框架
35

36
```js title="my-test-file.js"
37
console.log("标题属性示例");
38
```
39

40
---
41

42
```html
43
<!-- src/content/index.html -->
44
<div>文件名注释示例</div>
45
```
46

47
### 终端框架
48

49
```bash
50
echo "此终端框架没有标题"
51
```
52

53
---
54

55
```powershell title="PowerShell 终端示例"
56
Write-Output "这个有标题！"
57
```
58

59
### 覆盖框架类型
60

61
```sh frame="none"
62
echo "看，没有框架！"
63
```
64

65
---
66

67
```ps frame="code" title="PowerShell Profile.ps1"
68
# 如果不覆盖，这里会显示为终端框架
69
function Watch-Tail { Get-Content -Tail 20 -Wait $args }
70
New-Alias tail Watch-Tail
71
```
72

73
## 文本与行标记
74

75
[Text & Line Markers - Expressive Code](https://expressive-code.com/key-features/text-markers/)
76

77
### 标记完整行与行范围
78

79
```js {1, 4, 7-8}
80
// 第 1 行 - 通过行号定位
81
// 第 2 行
82
// 第 3 行
83
// 第 4 行 - 通过行号定位
84
// 第 5 行
85
// 第 6 行
86
// 第 7 行 - 通过范围“7-8”定位
87
// 第 8 行 - 通过范围“7-8”定位
88
```
89

90
### 选择行标记类型（mark、ins、del）
91

92
```js title="line-markers.js" del={2} ins={3-4} {6}
93
function demo() {
94
  console.log("这一行被标记为删除");
95
  // 这一行和下一行被标记为插入
96
  console.log("这是第二行插入的内容");
97

98
  return "这一行使用默认的中性标记类型";
99
}
100
```
101

102
### 为行标记添加标签
103

104
```jsx {"1":5} del={"2":7-8} ins={"3":10-12}
105
// labeled-line-markers.jsx
106
<button
107
  role="button"
108
  {...props}
109
  value={value}
110
  className={buttonClassName}
111
  disabled={disabled}
112
  active={active}
113
>
114
  {children &&
115
    !active &&
116
    (typeof children === "string" ? <span>{children}</span> : children)}
117
</button>
118
```
119

120
### 将长标签放在独立行上
121

122
```jsx {"1. 在此处提供 value 属性：":5-6} del={"2. 移除 disabled 和 active 状态：":8-10} ins={"3. 添加此代码以在按钮内渲染 children：":12-15}
123
// labeled-line-markers.jsx
124
<button
125
  role="button"
126
  {...props}
127
  value={value}
128
  className={buttonClassName}
129
  disabled={disabled}
130
  active={active}
131
>
132
  {children &&
133
    !active &&
134
    (typeof children === "string" ? <span>{children}</span> : children)}
135
</button>
136
```
137

138
### 使用类似 diff 的语法
139

140
```diff
141
+这一行将被标记为插入
142
-这一行将被标记为删除
143
这是一行普通内容
144
```
145

146
---
147

148
```diff
149
--- a/README.md
150
+++ b/README.md
151
@@ -1,3 +1,4 @@
152
+这是一个实际的差异文件
153
-所有内容将保持不变
154
不会移除任何空白字符
155
```
156

157
### 将语法高亮与 diff 式语法结合
158

159
```diff lang="js"
160
  function thisIsJavaScript() {
161
    // 整个代码块都将作为 JavaScript 进行高亮，
162
    // 并且我们仍然可以向其中添加差异标记！
163
-   console.log('要移除的旧代码')
164
+   console.log('崭新闪亮的代码！')
165
  }
166
```
167

168
### 标记行内的单个文本
169

170
```js "给定文本"
171
function demo() {
172
  // 标记行内任意给定的文本
173
  return "支持给定文本的多次匹配";
174
}
175
```
176

177
### 正则表达式
178

179
```ts /ye[sp]/
180
console.log("单词 yes 和 yep 将被标记。");
181
```
182

183
### 转义正斜杠
184

185
```sh //ho.*//
186
echo "Test" > /home/test.txt
187
```
188

189
### 选择内联标记类型（mark、ins、del）
190

191
```js "return true;" ins="已插入" del="已删除"
192
function demo() {
193
  console.log("这些是插入和删除标记类型");
194
  // return 语句使用默认标记类型
195
  return true;
196
}
197
```
198

199
## 自动换行
200

201
[Word Wrap - Expressive Code](https://expressive-code.com/key-features/word-wrap/)
202

203
### 按代码块配置自动换行
204

205
```js wrap
206
// 启用换行的示例
207
function getLongString() {
208
  return "这是一个非常长的字符串，很可能在可用空间内无法完全显示，除非容器非常宽";
209
}
210
```
211

212
---
213

214
```js wrap=false
215
// 禁用换行的示例
216
function getLongString() {
217
  return "这是一个非常长的字符串，很可能在可用空间内无法完全显示，除非容器非常宽";
218
}
219
```
220

221
### 配置换行行的缩进
222

223
```js wrap preserveIndent
224
// 启用 preserveIndent 的示例（默认启用）
225
function getLongString() {
226
  return "这是一个非常长的字符串，很可能在可用空间内无法完全显示，除非容器非常宽";
227
}
228
```
229

230
---
231

232
```js wrap preserveIndent=false
233
// 禁用 preserveIndent 的示例
234
function getLongString() {
235
  return "这是一个非常长的字符串，很可能在可用空间内无法完全显示，除非容器非常宽";
236
}
237
```
238

239
## 可折叠部分
240

241
[Collapsible Sections - Expressive Code](https://expressive-code.com/plugins/collapsible-sections/)
242

243
```js collapse={1-5, 12-14, 21-24}
244
// 以下所有样板设置代码将被折叠
245
import { someBoilerplateEngine } from "@example/some-boilerplate";
246
import { evenMoreBoilerplate } from "@example/even-more-boilerplate";
247

248
const engine = someBoilerplateEngine(evenMoreBoilerplate());
249

250
// 这部分代码默认可见
251
engine.doSomething(1, 2, 3, calcFn);
252

253
function calcFn() {
254
  // 你可以有多个可折叠部分
255
  const a = 1;
256
  const b = 2;
257
  const c = a + b;
258

259
  // 这部分保持可见
260
  console.log(`计算结果：${a} + ${b} = ${c}`);
261
  return c;
262
}
263

264
// 从此处到代码块末尾的所有代码将再次折叠
265
engine.closeConnection();
266
engine.freeMemory();
267
engine.shutdown({ reason: "样板代码示例结束" });
268
```
269

270
## 行号
271

272
[Line Numbers - Expressive Code](https://expressive-code.com/plugins/line-numbers/)
273

274
### 按代码块显示行号
275

276
```js showLineNumbers
277
// 此代码块将显示行号
278
console.log("来自第 2 行的问候！");
279
console.log("我在第 3 行");
280
```
281

282
---
283

284
```js showLineNumbers=false
285
// 此代码块已禁用行号
286
console.log("你好？");
287
console.log("抱歉，你知道我在哪一行吗？");
288
```
289

290
### 更改起始行号
291

292
```js showLineNumbers startLineNumber=5
293
console.log("来自第 5 行的问候！");
294
console.log("我在第 6 行");
295
```