富有表现力的代码示例

在这里，我们将探讨如何使用表达性代码。提供的示例基于官方文档，您可以参考这些文档了解更多详细信息。

富有表现力的代码#

语法突出显示（高亮）#

常规语法突出显示#

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

在 Markdown 中这样写：

1
‎```js
2
‎console.log('This code is syntax highlighted!')
3
‎```

渲染 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

编辑器 & 终端#

编辑器 & 终端

编辑器样式#

可以通过加上 title="xxx.xx" 做到：

1
console.log('Title attribute example')

在 Markdown 中这样写：

1
‎```js title="my-test-file.js"
2
‎console.log('Title attribute example')
3
‎```

而html文件可以直接在代码里注释文件路径，这个注释不会在代码中显示出来，但是会读取并当做编辑器标签

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

在 Markdown 中这样写：

1
‎```html
2
‎<!-- src/content/index.html -->
3
‎<div>File name comment example</div>
4
‎```

终端样式#

在渲染出来的终端中显示代码：

1
echo "This terminal frame has no title"

在 Markdown 中这样写：
1
‎```bash
2
‎echo "This terminal frame has no title"
3
‎```

带上标题同样是使用 title="xxx"

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

在 Markdown 中这样写：

1
‎```powershell title="PowerShell terminal example"
2
‎Write-Output "This one has a title!"
3
‎```

覆盖原有框架#

不使用渲染的终端窗口显示代码，可以用 frame="none"：

1
echo "Look ma, no frame!"

在 Markdown 中这样写：
1
‎```sh frame="none"
2
‎echo "Look ma, no frame!"
3
‎```

自定义一下可以做到：

1
# Without overriding, this would be a terminal frame
2
function Watch-Tail { Get-Content -Tail 20 -Wait $args }
3
New-Alias tail Watch-Tail

在 Markdown 中这样写：

1
‎```ps frame="code" title="PowerShell Profile.ps1"
2
‎# Without overriding, this would be a terminal frame
3
‎function Watch-Tail { Get-Content -Tail 20 -Wait $args }
4
‎New-Alias tail Watch-Tail
5
‎```

文本和线条标记#

文本和线条标记

标记整行 & 行范围#

使用 {} 括起需要标记的行号和行范围，之间用 , 隔开

1
// Line 1 - targeted by line number
2
// Line 2
3
// Line 3
4
// Line 4 - targeted by line number
5
// Line 5
6
// Line 6
7
// Line 7 - targeted by range "7-8"
8
// Line 8 - targeted by range "7-8"

在 Markdown 中这样写：

1
‎```js {1, 4, 7-8}
2
‎// Line 1 - targeted by line number
3
‎// Line 2
4
‎// Line 3
5
‎// Line 4 - targeted by line number
6
‎// Line 5
7
‎// Line 6
8
‎// Line 7 - targeted by range "7-8"
9
‎// Line 8 - targeted by range "7-8"
10
‎```

展示行号不是必须的。关闭展示行号后仍然可以用行号定位：

// Line 1 - targeted by line number
// Line 2
// Line 3
// Line 4 - targeted by line number
// Line 5
// Line 6
// Line 7 - targeted by range "7-8"
// Line 8 - targeted by range "7-8"

在 Markdown 中这样写：

1
‎```js showLineNumbers=false {1, 4, 7-8}
2
‎// Line 1 - targeted by line number
3
‎// Line 2
4
‎// Line 3
5
‎// Line 4 - targeted by line number
6
‎// Line 5
7
‎// Line 6
8
‎// Line 7 - targeted by range "7-8"
9
‎// Line 8 - targeted by range "7-8"
10
‎```

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

标记的时候可以标记这行代码是新添加进来还是删除的，只需要分别为它们添加标识 ins= 和 del=。不添加的会保持原样：

1
function demo() {
2
  console.log('this line is marked as deleted')
3
  // This line and the next one are marked as inserted
4
  console.log('this is the second inserted line')
5

6
  return 'this line uses the neutral default marker type'
7
}

在 Markdown 中这样写：

1
‎```js title="line-markers.js" del={2} ins={3-4} {6}
2
‎function demo() {
3
‎  console.log('this line is marked as deleted')
4
‎  // This line and the next one are marked as inserted
5
‎  console.log('this is the second inserted line')
6
‎
7
‎  return 'this line uses the neutral default marker type'
8
‎}
9
‎```

向线标记添加标签#

在 {} 内写入标签名，冒号后面跟上行号(标签名太长会遮住代码)：

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>
13
<button>
14
  <span>abc</span>
15
      <span>abc</span>
16
</button>

在 Markdown 中这样写：

1
‎```jsx {"1":5} del={"2":7-8} ins={"3":10-12} ins={"标签A":15} ins={"标签B":16}
2
// labeled-line-markers.jsx
3
<button
4
  role="button"
5
  {...props}
6
  value={value}
7
  className={buttonClassName}
8
  disabled={disabled}
9
  active={active}
10
>
11
  {children &&
12
    !active &&
13
    (typeof children === 'string' ? <span>{children}</span> : children)}
14
</button>
15
<button>
16
<span>abc</span>
17
      <span>abc</span>
18
</button>
19
‎```

关于行号
从上面这个例子也可以看出行号是从源码中开始数的。开头的
‎// labeled-line-markers.jsx
也算进行号里面，但在展示时这行忽略并提取成了文件名，所以导致展示的行号和标记的行号不一致。

在单独的行上添加长标签#

前面提到，标签太长会遮住代码，如果一定要写长标签，就在那一行上方留出一个空行，将两行一起标起来：

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>

在 Markdown 中这样写：

1
‎```jsx {"1. Provide the value prop here:":5-6} del={"2. Remove the disabled and active states:":8-10} ins={"3. Add this to render the children inside the button:":12-15}
2
// labeled-line-markers.jsx
3
<button
4
  role="button"
5
  {...props}
6

7
  value={value}
8
  className={buttonClassName}
9

10
  disabled={disabled}
11
  active={active}
12
>
13

14
  {children &&
15
    !active &&
16
    (typeof children === 'string' ? <span>{children}</span> : children)}
17
</button>
18
‎```

也可以使用类似 diff 的语法#

1
this line will be marked as inserted
2
this line will be marked as deleted
3
this is a regular line

在 Markdown 中这样写：

1
‎```diff
2
+this line will be marked as inserted
3
-this line will be marked as deleted
4
this is a regular line
5
‎```

或者这样：

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

在 Markdown 中这样写：

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

将语法突出显示与类似 diff 的语法相结合#

1
function thisIsJavaScript() {
2
  // This entire block gets highlighted as JavaScript,
3
  // and we can still add diff markers to it!
4
  console.log('Old code to be removed')
5
  console.log('New and shiny code!')
6
}

在 Markdown 中这样写：

1
‎```diff  lang="js"
2
  function thisIsJavaScript() {
3
    // This entire block gets highlighted as JavaScript,
4
    // and we can still add diff markers to it!
5
-   console.log('Old code to be removed')
6
+   console.log('New and shiny code!')
7
  }
8
‎```

在行内标记单个文本#

这我前面一直在用。

1
function demo() {
2
  // Mark any given text inside lines
3
  return 'Multiple matches of the given text are supported';
4
}

在 Markdown 中这样写：

1
‎```js "given text"
2
function demo() {
3
  // Mark any given text inside lines
4
  return 'Multiple matches of the given text are supported';
5
}
6
‎```

注意不要他妈这么写：
1
‎```js ""
2
function demo() {
3
  // Mark any given text inside lines
4
  return 'Multiple matches of the given text are supported';
5
}
6
‎```
这对空白引号会泄露内存，然后把你的网站搞崩掉。这在 Expressive Code 的内联文本标记（inline text markers）语法中会被解析为：“标记所有空字符串”。
但由于空字符串在每一行都“匹配无数次”（比如行首、行中、行尾的零宽位置），Expressive Code 会尝试为每一个匹配位置生成标记节点，导致：

AST 节点爆炸式增长；

内存占用急剧上升；

最终触发 JavaScript heap out of memory。

这本质上是一个边界情况下的解析陷阱，虽然语法上合法，但语义上无意义且极具破坏性。

所以不要写空引号 "" 和空正则 // (下面会讲)

正则表达式#

1
console.log('The words yes and yep will be marked.')

在 Markdown 中这样写：

1
‎```ts /ye[sp]/
2
console.log('The words yes and yep will be marked.')
3
‎```

转义正斜杠#

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

在 Markdown 中这样写：
1
‎```sh /\/ho.*\//
2
echo "Test" > /home/test.txt
3
‎```

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

1
function demo() {
2
  console.log('These are inserted and deleted marker types');
3
  // The return statement uses the default marker type
4
  return true;
5
}

在 Markdown 中这样写：

1
‎```js "return true;" ins="inserted" del="deleted"
2
function demo() {
3
  console.log('These are inserted and deleted marker types');
4
  // The return statement uses the default marker type
5
  return true;
6
}
7
‎```

自动换行#

自动换行

配置每个块的自动换行#

1
// Example with wrap
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
}

在 Markdown 中这样写：

1
‎```js wrap
2
// Example with wrap
3
function getLongString() {
4
  return 'This is a very long string that will most probably not fit into the available space unless the container is extremely wide'
5
}
6
‎```

1
// Example with 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
}

在 Markdown 中这样写：

1
‎```js wrap=false
2
// Example with wrap=false
3
function getLongString() {
4
  return 'This is a very long string that will most probably not fit into the available space unless the container is extremely wide'
5
}
6
‎```

配置换行的缩进#

1
// Example with preserveIndent (enabled by default)
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
}

在 Markdown 中这样写：

1
‎```js wrap preserveIndent
2
// Example with preserveIndent (enabled by default)
3
function getLongString() {
4
  return 'This is a very long string that will most probably not fit into the available space unless the container is extremely wide'
5
}
6
‎```

1
// Example with 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
}

在 Markdown 中这样写：

1
‎```js wrap preserveIndent=false
2
// Example with preserveIndent=false
3
function getLongString() {
4
  return 'This is a very long string that will most probably not fit into the available space unless the container is extremely wide'
5
}
6
‎```

可折叠部分#

可折叠部分

用 collapse={} 来设置哪些行号被折叠：


5 collapsed lines
1
// All this boilerplate setup code will be collapsed
2
import { someBoilerplateEngine } from '@example/some-boilerplate'
3
import { evenMoreBoilerplate } from '@example/even-more-boilerplate'
4

5
const engine = someBoilerplateEngine(evenMoreBoilerplate())
6

7
// This part of the code will be visible by default
8
engine.doSomething(1, 2, 3, calcFn)
9

10
function calcFn() {
11
  // You can have multiple collapsed sections
3 collapsed lines
12
  const a = 1
13
  const b = 2
14
  const c = a + b
15

16
  // This will remain visible
17
  console.log(`Calculation result: ${a} + ${b} = ${c}`)
18
  return c
19
}
20

4 collapsed lines
21
// All this code until the end of the block will be collapsed again
22
engine.closeConnection()
23
engine.freeMemory()
24
engine.shutdown({ reason: 'End of example boilerplate code' })

在 Markdown 中这样写：

1
‎```js collapse={1-5, 12-14, 21-24}
2
// All this boilerplate setup code will be collapsed
3
import { someBoilerplateEngine } from '@example/some-boilerplate'
4
import { evenMoreBoilerplate } from '@example/even-more-boilerplate'
5

6
const engine = someBoilerplateEngine(evenMoreBoilerplate())
7

8
// This part of the code will be visible by default
9
engine.doSomething(1, 2, 3, calcFn)
10

11
function calcFn() {
12
  // You can have multiple collapsed sections
13
  const a = 1
14
  const b = 2
15
  const c = a + b
16

17
  // This will remain visible
18
  console.log(`Calculation result: ${a} + ${b} = ${c}`)
19
  return c
20
}
21

22
// All this code until the end of the block will be collapsed again
23
engine.closeConnection()
24
engine.freeMemory()
25
engine.shutdown({ reason: 'End of example boilerplate code' })
26
‎```

行号#

行号

显示每个块的行号#

可以用 showLineNumbers，也可以不用（默认显示行号）

1
// This code block will show line numbers
2
console.log('Greetings from line 2!')
3
console.log('I am on line 3')

在 Markdown 中这样写：

1
‎```js showLineNumbers
2
// This code block will show line numbers
3
console.log('Greetings from line 2!')
4
console.log('I am on line 3')
5
‎```

或者不显示行号#

需要额外设置 showLineNumbers=false：

// Line numbers are disabled for this block
console.log('Hello?')
console.log('Sorry, do you know what line I am on?')

在 Markdown 中这样写：

1
‎```js showLineNumbers=false
2
// Line numbers are disabled for this block
3
console.log('Hello?')
4
console.log('Sorry, do you know what line I am on?')
5
‎```

更改起始行号#

设置 startLineNumber=5

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

在 Markdown 中这样写：

1
‎```js showLineNumbers startLineNumber=5
2
console.log('Greetings from line 5!')
3
console.log('I am on line 6')
4
‎```

这篇文章在fuwari示例文档的基础上翻译并添加了许多内容。

‎