Expressive Code 示例 - 蓝色大肥鱼

下面来看看使用 Expressive Code 时，代码块会呈现出怎样的效果。文中的示例取自官方文档，需要更多细节可以查阅该文档。

Expressive Code#

语法高亮#

常规语法高亮#

1
console.log('This code is syntax highlighted!')

渲染 ANSI 转义序列#

1
ANSI colors:
2
- Regular: Red Green Yellow Blue Magenta Cyan
3
- Bold:    Red Green Yellow Blue Magenta Cyan
4
- Dimmed:  Red Green Yellow Blue Magenta Cyan
5

6
256 colors (showing colors 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
Full RGB colors:
12
ForestGreen - RGB(34, 139, 34)
13

14
Text formatting: Bold Dimmed Italic Underline

编辑器与终端外框#

Editor & Terminal Frames

代码编辑器外框#

1
console.log('Title attribute example')

1
<div>File name comment example</div>

终端外框#

1
echo "This terminal frame has no title"

1
Write-Output "This one has a title!"

覆盖外框类型#

1
echo "Look ma, no frame!"

1
# 若不覆盖外框类型，这里原本会渲染成终端外框
2
function Watch-Tail { Get-Content -Tail 20 -Wait $args }
3
New-Alias tail Watch-Tail

文本与行标记#

Text & Line Markers

标记整行与行范围#

1
// 第 1 行 —— 由行号定位
2
// Line 2
3
// Line 3
4
// 第 4 行 —— 由行号定位
5
// Line 5
6
// Line 6
7
// 第 7 行 —— 由范围 "7-8" 定位
8
// 第 8 行 —— 由范围 "7-8" 定位

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

1
function demo() {
2
  console.log('this line is marked as deleted')
3
  // 这一行与下一行被标记为新增
4
  console.log('this is the second inserted line')
5

6
  return 'this line uses the neutral default marker type'
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
this line will be marked as inserted
2
this line will be marked as deleted
3
this is a regular line

1
--- a/README.md
2
+++ b/README.md
3
@@ -1,3 +1,4 @@
4
+this is an actual diff file
5
-all contents will remain unmodified
6
 no whitespace will be removed either

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

1
function thisIsJavaScript() {
2
  // 整个代码块按 JavaScript 高亮，
3
  // 同时依然可以为它添加 diff 标记！
4
  console.log('Old code to be removed')
5
  console.log('New and shiny code!')
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

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

1
function demo() {
2
  console.log('These are inserted and deleted marker types');
3
  // return 语句使用默认的标记类型
4
  return true;
5
}

自动换行#

Word Wrap

为单个代码块配置自动换行#

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
// preserveIndent 的示例（默认启用）
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
}

可折叠区块#

Collapsible Sections


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' })

行号#

Line Numbers

为单个代码块显示行号#

1
// 这个代码块会显示行号
2
console.log('Greetings from line 2!')
3
console.log('I am on line 3')

// 该代码块已关闭行号
console.log('Hello?')
console.log('Sorry, do you know what line I am on?')

修改起始行号#

5
console.log('Greetings from line 5!')
6
console.log('I am on line 6')

蓝色大肥鱼

Expressive Code#

语法高亮#

常规语法高亮#

渲染 ANSI 转义序列#

编辑器与终端外框#

代码编辑器外框#

终端外框#

覆盖外框类型#

文本与行标记#

标记整行与行范围#

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

为行标记添加标签#

把长标签单独放成一行#

使用类 diff 语法#

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

标记行内的个别文本#

正则表达式#

转义正斜杠#

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

自动换行#

为单个代码块配置自动换行#

配置折行后的缩进#

可折叠区块#

行号#

为单个代码块显示行号#

修改起始行号#

继续阅读

换条路线

评论

蓝色大肥鱼

Expressive Code#

语法高亮#

常规语法高亮#

渲染 ANSI 转义序列#

编辑器与终端外框#

代码编辑器外框#

终端外框#

覆盖外框类型#

文本与行标记#

标记整行与行范围#

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

为行标记添加标签#

把长标签单独放成一行#

使用类 diff 语法#

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

标记行内的个别文本#

正则表达式#

转义正斜杠#

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

自动换行#

为单个代码块配置自动换行#

配置折行后的缩进#

可折叠区块#

行号#

为单个代码块显示行号#

修改起始行号#

分享文章

沿着主题读

换条路线