Expressive Code 示例

本文展示使用 Expressive Code 时各类代码块的效果。示例基于官方文档，更多细节可参阅原文。

Expressive Code#

语法高亮#

常规语法高亮#

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

渲染 ANSI 转义序列#

1
ANSI 颜色：
2
- 常规： 红 绿 黄 蓝 品红 青
3
- 粗体:    红 绿 黄 蓝 品红 青
4
- 暗淡:  红 绿 黄 蓝 品红 青
5

6
256 色（展示颜色 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
完整 RGB 颜色：
12
森林绿 - RGB(34, 139, 34)
13

14
文本格式： 粗体 暗淡 斜体 下划线

编辑器与终端边框#

编辑器与终端边框

代码编辑器边框#

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

文本与行标记#

文本与行标记

标记整行与行范围#

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('这里展示 inserted 和 deleted 标记类型');
3
  // return 语句使用默认标记类型
4
  return true;
5
}

自动换行#

自动换行

按代码块配置自动换行#

1
// 使用 wrap 的示例
2
function getLongString() {
3
  return '这是一个非常长的字符串，除非容器特别宽，否则它很可能无法完整放入可用的显示空间'
4
}

1
// 使用 wrap=false 的示例
2
function getLongString() {
3
  return '这是一个非常长的字符串，除非容器特别宽，否则它很可能无法完整放入可用的显示空间'
4
}

配置换行后的缩进#

1
// 使用 preserveIndent 的示例（默认启用）
2
function getLongString() {
3
  return '这是一个非常长的字符串，除非容器特别宽，否则它很可能无法完整放入可用的显示空间'
4
}

1
// 使用 preserveIndent=false 的示例
2
function getLongString() {
3
  return '这是一个非常长的字符串，除非容器特别宽，否则它很可能无法完整放入可用的显示空间'
4
}

可折叠代码段#

可折叠代码段


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: '示例样板代码结束' })

行号#

行号

按代码块显示行号#

1
// 这个代码块会显示行号
2
console.log('来自第 2 行的问候！')
3
console.log('我在第 3 行')

// 这个代码块不显示行号
console.log('你好？')
console.log('打扰一下，你知道我在第几行吗？')

修改起始行号#

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

蛋壳宇宙

Expressive Code#

语法高亮#

常规语法高亮#

渲染 ANSI 转义序列#

编辑器与终端边框#

代码编辑器边框#

终端边框#

覆盖边框类型#

文本与行标记#

标记整行与行范围#

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

为行标记添加标签#

将长标签放在单独的行上#

使用类似 diff 的语法#

结合语法高亮与类 diff 语法#

标记行内的指定文本#

正则表达式#

转义正斜杠#

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

自动换行#

按代码块配置自动换行#

配置换行后的缩进#

可折叠代码段#

行号#

按代码块显示行号#

修改起始行号#

继续阅读

换条路线

评论

蛋壳宇宙

Expressive Code 示例

Expressive Code#

语法高亮#

常规语法高亮#

渲染 ANSI 转义序列#

编辑器与终端边框#

代码编辑器边框#

终端边框#

覆盖边框类型#

文本与行标记#

标记整行与行范围#

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

为行标记添加标签#

将长标签放在单独的行上#

使用类似 diff 的语法#

结合语法高亮与类 diff 语法#

标记行内的指定文本#

正则表达式#

转义正斜杠#

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

自动换行#

按代码块配置自动换行#

配置换行后的缩进#

可折叠代码段#

行号#

按代码块显示行号#

修改起始行号#

分享文章

沿着主题读

换条路线

评论