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('通过 title 属性指定文件名的示例')

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" 标记

指定行标记类型#

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 'Multiple matches of the given text are supported';
4
}

正则表达式匹配标记#

1
console.log('包含 yes 和 yep 的单词将会被自动标记匹配。')

转义正斜杠#

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

选择行内标记类型#

1
function demo() {
2
  console.log('这里展示了 inserted 与 deleted 行内标记类型');
3
  // return 语句使用默认标记类型
4
  return true;
5
}

自动换行#

自动换行文档

单独配置代码块的自动换行#

1
// 开启换行示例
2
function getLongString() {
3
  return '这是一段非常长的字符串内容，除非容器宽度极为充裕，否则在没有自动换行时会超出可用显示区域'
4
}

1
// 关闭换行示例
2
function getLongString() {
3
  return '这是一段非常长的字符串内容，除非容器宽度极为充裕，否则在没有自动换行时会超出可用显示区域'
4
}

配置换行后的缩进保持#

1
// 保持缩进示例
2
function getLongString() {
3
  return '这是一段非常长的字符串内容，除非容器宽度极为充裕，否则在没有自动换行时会超出可用显示区域'
4
}

1
// 不保持缩进示例
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 行')

Shirone

Expressive Code 核心特性#

语法高亮#

常规语法高亮#

渲染 ANSI 转义序列#

编辑器与终端边框#

代码编辑器边框#

终端边框#

覆盖边框类型#

文本与行标记#

标记整行与指定行范围#

指定行标记类型#

为行标记添加标签文本#

在单独行展示长文本标签#

使用类 Diff 语法#

结合语法高亮与 Diff 语法#

标记行内指定文本#

正则表达式匹配标记#

转义正斜杠#

选择行内标记类型#

自动换行#

单独配置代码块的自动换行#

配置换行后的缩进保持#

可折叠代码区域#

行号显示#

按代码块控制是否显示行号#

修改起始行号#

继续阅读

换条路线

Shirone

Expressive Code 核心特性#

语法高亮#

常规语法高亮#

渲染 ANSI 转义序列#

编辑器与终端边框#

代码编辑器边框#

终端边框#

覆盖边框类型#

文本与行标记#

标记整行与指定行范围#

指定行标记类型#

为行标记添加标签文本#

在单独行展示长文本标签#

使用类 Diff 语法#

结合语法高亮与 Diff 语法#

标记行内指定文本#

正则表达式匹配标记#

转义正斜杠#

选择行内标记类型#

自动换行#

单独配置代码块的自动换行#

配置换行后的缩进保持#

可折叠代码区域#

行号显示#

按代码块控制是否显示行号#

修改起始行号#

分享文章

沿着主题读

换条路线