表现力代码示例 - lyyovo's blog

本文将展示在 Markdown 中使用表现力代码 (Expressive Code) 渲染代码块的效果。以下示例均基于官方文档，如需深入了解核心配置，请参阅官方指南。

表现力代码 (Expressive Code)#

语法高亮 (Syntax Highlighting)#

常规语法高亮#

1
console.log('This code is syntax highlighted! // 此代码已启用语法高亮！')

渲染 ANSI 转义序列 (ANSI Escape Sequences)#

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)#

Editor & Terminal Frames

代码编辑器边框 (Code Editor Frames)#

1
console.log('Title attribute example')

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

终端边框 (Terminal Frames)#

1
echo "This terminal frame has no title"

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

覆盖边框类型 (Overriding Frame Types)#

1
echo "Look ma, no frame!"

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

文本与行标记 (Text & Line Markers)#

Text & Line Markers

标记整行与行范围 (Marking Full Lines & Line Ranges)#

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"

选择行标记类型 (Selecting Line Marker Types) (mark, 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
}

为行标记添加标签 (Adding Labels to Line Markers)#

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>

单独行为长标签占位 (Adding Long Labels on Their Own Lines)#

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 语法 (Using Diff-like Syntax)#

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 语法 (Combining Syntax Highlighting with Diff-like Syntax)#

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
}

标记行内的特定文本 (Marking Individual Text Inside Lines)#

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

正则表达式 (Regular Expressions)#

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

转义正斜杠 (Escaping Forward Slashes)#

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

选择内联标记类型 (Selecting Inline Marker Types) (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
}

自动换行 (Word Wrap)#

Word Wrap

按代码块配置自动换行 (Configuring Word Wrap per Block)#

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
}

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
}

配置换行缩进 (Configuring Indentation of Wrapped Lines)#

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
}

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
}

可折叠区块 (Collapsible Sections)#

Collapsible Sections


5 collapsed lines
1
// All this boilerplate setup code will be collapsed
2
// 该区间内所有样板 (Boilerplate) 初始代码将被折叠
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
// 此部分核心逻辑代码默认保持展开可见
10
engine.doSomething(1, 2, 3, calcFn)
11

3 collapsed lines
12
function calcFn() {
13
  // You can have multiple collapsed sections
14
  // 单个代码块内允许声明多个折叠区间
15
  const a = 1
16
  const b = 2
17
  const c = a + b
18

19
  // This will remain visible
20
  // 此处调试日志将保持可见
4 collapsed lines
21
  console.log(`Calculation result: ${a} + ${b} = ${c}`)
22
  return c
23
}
24

25
// All this code until the end of the block will be collapsed again
26
// 直至代码块结束的收尾逻辑将再次被折叠
27
engine.closeConnection()
28
engine.freeMemory()
29
engine.shutdown({ reason: 'End of example boilerplate code' })

行号 (Line Numbers)#

Line Numbers

按代码块显示行号 (Displaying Line Numbers per Block)#

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

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

更改起始行号 (Changing the Starting Line Number)#

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