Expressive Code 示例

1094 字

5 分钟

Expressive Code 示例

2026-02-16

2026-04-24

示例

Markdown

/

写作

/

示例

下面集中展示 Expressive Code 在 FangYuan 中的代码块效果。示例主要整理自官方文档，方便直接对照查看渲染结果。

Expressive Code#

语法高亮#

Syntax Highlighting

常规语法高亮#

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

代码编辑器边框#

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

标记整行与行区间#

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

5
  value={value}
6
  className={buttonClassName}
7

8
  disabled={disabled}
9
  active={active}
10
>
11

12
  {children &&
13
    !active &&
14
    (typeof children === "string" ? <span>{children}</span> : children)}
15
</button>

使用 diff 风格语法#

1
这一行会被标记为新增
2
这一行会被标记为删除
3
这一行是普通内容

1
--- a/README.md
2
+++ b/README.md
3
@@ -1,3 +1,4 @@
4
+这是一份真正的 diff 文件
5
-所有内容都会保持原样
6
 不会额外删除任何空白字符

结合语法高亮与 diff 风格语法#

1
function thisIsJavaScript() {
2
  // 这一整段都会按照 JavaScript 语法高亮，
3
  // 同时依然可以叠加 diff 标记！
4
  console.log("旧代码将被移除")
5
  console.log("这里换成新的代码")
6
}

标记行内的局部文本#

1
function demo() {
2
  // 可以在一行中标记任意指定文本
3
  return "支持对指定文本进行多次匹配";
4
}

正则表达式#

1
console.log("yes 和 yep 这两个单词都会被标记。")

转义正斜杠#

1
echo "测试" > /home/test.txt

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

1
function demo() {
2
  console.log("这里演示新增与删除两种行内标记");
3
  // return 语句会使用默认标记类型
4
  return true;
5
}

自动换行#

Word Wrap

按代码块配置换行#

1
// 启用自动换行的示例
2
function getLongString() {
3
  return "这是一段非常长的字符串，除非容器足够宽，否则大概率放不进可见区域"
4
}

1
// 禁用自动换行的示例
2
function getLongString() {
3
  return "这是一段非常长的字符串，除非容器足够宽，否则大概率放不进可见区域"
4
}

配置换行后的缩进#

1
// preserveIndent 示例（默认启用）
2
function getLongString() {
3
  return "这是一段非常长的字符串，除非容器足够宽，否则大概率放不进可见区域"
4
}

1
// preserveIndent=false 示例
2
function getLongString() {
3
  return "这是一段非常长的字符串，除非容器足够宽，否则大概率放不进可见区域"
4
}

可折叠区块#

Collapsible Sections


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

按代码块显示行号#

1
// 这个代码块会显示行号
2
console.log("这里是第 2 行")
3
console.log("这里是第 3 行")

// 这个代码块关闭了行号
console.log("你好")
console.log("现在你知道我在第几行了吗？")

修改起始行号#

5
console.log("这里是第 5 行")
6
console.log("这里是第 6 行")

Expressive Code 示例

https://fangyuan.oogoo.top/expressive-code/

作者

FangYuan

发布于

2026-02-16

许可协议

MIT