Expressive Code 示例 - Hachi's blog

在这里，我们将探索使用 Expressive Code 的代码块效果。所提供的示例基于官方文档，你可以参考官方文档获取更多详情。

Expressive Code#

语法高亮#

常规语法高亮#

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

渲染 ANSI 转义序列#

1
ANSI colors:
2
- Regular: [31mRed[0m [32mGreen[0m [33mYellow[0m [34mBlue[0m [35mMagenta[0m [36mCyan[0m
3
- Bold:    [1;31mRed[0m [1;32mGreen[0m [1;33mYellow[0m [1;34mBlue[0m [1;35mMagenta[0m [1;36mCyan[0m
4
- Dimmed:  [2;31mRed[0m [2;32mGreen[0m [2;33mYellow[0m [2;34mBlue[0m [2;35mMagenta[0m [2;36mCyan[0m
5

6
256 colors (showing colors 160-177):
7
[38;5;160m160 [38;5;161m161 [38;5;162m162 [38;5;163m163 [38;5;164m164 [38;5;165m165[0m
8
[38;5;166m166 [38;5;167m167 [38;5;168m168 [38;5;169m169 [38;5;170m170 [38;5;171m171[0m
9
[38;5;172m172 [38;5;173m173 [38;5;174m174 [38;5;175m175 [38;5;176m176 [38;5;177m177[0m
10

11
Full RGB colors:
12
[38;2;34;139;34mForestGreen - RGB(34, 139, 34)[0m
13

14
Text formatting: [1mBold[0m [2mDimmed[0m [3mItalic[0m [4mUnderline[0m

编辑器与终端框架#

编辑器与终端框架

代码编辑器框架#

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 "Test" > /home/test.txt

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

1
function demo() {
2
  console.log('这些是已插入和已删除的标记类型');
3
  // return 语句使用默认标记类型
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
// 禁用换行的示例 (wrap=false)
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
// 不保留缩进的示例 (preserveIndent=false)
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(`计算结果：${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 行')