Expressive Code 示例 - SeraphinaGlacia's Blog

这里演示 Expressive Code 在当前站点中的显示效果。它适合用来展示代码、终端输出、diff、行高亮、折叠区块和行号。

语法高亮#

普通代码块#

1
console.log('这段代码会被语法高亮。')

ANSI 转义序列#

1
ANSI 颜色：
2
- 普通：红色 绿色 黄色 蓝色 洋红 青色
3
- 加粗：红色 绿色 黄色 蓝色 洋红 青色
4
- 变暗：红色 绿色 黄色 蓝色 洋红 青色
5

6
文本格式：加粗 变暗 斜体 下划线

编辑器和终端边框#

编辑器标题#

1
console.log('这个代码块带有标题。')

1
<div>也可以通过文件名注释生成标题。</div>

终端边框#

1
echo "这是一个没有标题的终端代码块"

1
Write-Output "这个终端代码块有标题。"

覆盖边框类型#

1
echo "这个代码块不显示边框。"

1
function Watch-Tail { Get-Content -Tail 20 -Wait $args }
2
New-Alias tail Watch-Tail

文本与行标记#

标记整行或行范围#

1
// 第 1 行会被标记
2
// 第 2 行
3
// 第 3 行
4
// 第 4 行会被标记
5
// 第 5 行
6
// 第 6 行
7
// 第 7 行和第 8 行会被标记
8
// 第 8 行

区分新增、删除和普通标记#

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>

diff 风格代码块#

1
这一行会显示为新增
2
这一行会显示为删除
3
 这一行是普通内容

1
function thisIsJavaScript() {
2
  console.log('旧代码')
3
  console.log('新代码')
4
}

标记行内文本#

1
function demo() {
2
  // 可以标记行内出现的给定文本
3
  return '多个给定文本也会被标记';
4
}

1
console.log('正则表达式会标记 yes 和 yep。')

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

自动换行#

为单个代码块开启换行#

1
function getLongString() {
2
  return '这是一段很长很长的字符串，如果容器宽度不够，它会按照设置自动换行，避免撑破文章布局。'
3
}

1
function getLongString() {
2
  return '这段长字符串不会主动换行，适合检查横向滚动和代码块宽度。'
3
}

控制换行后的缩进#

1
function getLongString() {
2
  return '开启 preserveIndent 时，换行后的缩进会尽量保持原来的代码结构。'
3
}

1
function getLongString() {
2
  return '关闭 preserveIndent 后，换行后的缩进不会继续跟随原始缩进。'
3
}

折叠区块#


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
console.log('这段代码会显示行号。')
2
console.log('这一行在第 2 行。')

console.log('这段代码不会显示行号。')
console.log('适合短代码片段。')

修改起始行号#

5
console.log('这一行显示为第 5 行。')
6
console.log('这一行显示为第 6 行。')