如何正确使用 Expressive Code

1096 字

5 分钟

如何正确使用 Expressive Code

2024-04-10

基础设施

Markdown

/

基础设施

这里我们将展示利用 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
Forest 绿色 - RGB(34, 139, 34)
13

14
文字格式: 加粗 变暗 斜体 下划线

编辑器 & 终端边框#

编辑器 & 终端边框

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

文字 & 行数标记#

文字 & 行数标记

标记所有行 & 行数区间#

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 '支持多次给定文字的匹配';
4
}

正则表达式#

1
console.log('词汇是的和是哦将被匹配')

斜杠的转译#

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

选择行内标记种类#

1
function demo() {
2
  console.log('这些是被插入和删除的标记种类');
3
  // 返回声明使用默认的标记格式
4
  return true;
5
}

换行#

换行

单个代码块设置换行#

1
// 开启换行的示例
2
function getLongString() {
3
  return 'This is a very long string that will most probably not fit into the available space unless the container is extremely wide'
4
}

1
// 关闭换行的示例
2
function getLongString() {
3
  return 'This is a very long string that will most probably not fit into the available space unless the container is extremely wide'
4
}

设置换行的缩进#

1
// 保持首行缩进（默认）
2
function getLongString() {
3
  return 'This is a very long string that will most probably not fit into the available space unless the container is extremely wide'
4
}

1
// 不使用首行缩进
2
function getLongString() {
3
  return 'This is a very long string that will most probably not fit into the available space unless the container is extremely wide'
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(`Calculation result: ${a} + ${b} = ${c}`)
18
  return c
19
}
20

4 collapsed lines
21
// 下面所有代码也将被折叠
22
engine.closeConnection()
23
engine.freeMemory()
24
engine.shutdown({ reason: 'End of example boilerplate code' })

行数#

行数

单个代码块启用行数显示#

1
// 这个代码块将显示行数
2
console.log('这是第 2 行!')
3
console.log('这是第 3 行')

// 这个代码块禁用行数显示
console.log('Hello?')
console.log('Sorry, do you know what line I am on?')

修改从第几行开始#

5
console.log('这是第 5 行!')
6
console.log('这是第 6 行')

如何正确使用 Expressive Code

https://www.meaqua.work/posts/expressive-code/

作者

Meaqua Diary

发布于

2024-04-10

许可协议

CC BY-NC-SA 4.0

Markdown 扩充语法

Markdown 语法示例