【博客指南】Expressive-Code示例

1342 字

7 分钟

【博客指南】Expressive-Code示例

2024-05-01

Blog Guides

Markdown

/

Blogging

/

Demo

写在前面：本文将展示基于 Expressive Code 构建的增强型代码块显示效果。以下示例涵盖了从基础高亮到高级交互的各类场景，更多详细参数配置可参考官方文档。

核心功能演示#

1. 语法高亮#

📚 官方文档：语法高亮

常规语法高亮#

支持主流编程语言的自动着色。

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

渲染 ANSI 转义序列#

可以直接渲染终端输出中的 ANSI 颜色代码，非常适合展示 CLI 工具的输出结果。

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

2. 终端样式#

📚 官方文档：窗口框架

代码编辑器样式#

模拟 IDE 窗口，支持显示文件名或完整路径。

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

3. 文本标记#

📚 官方文档：文本标记

标记整行与多行#

通过行号或范围（如 7-8）来高亮特定代码行。

1
// Line 1 - 通过行号 {1} 选中
2
// Line 2
3
// Line 3
4
// Line 4 - 通过行号 {4} 选中
5
// Line 5
6
// Line 6
7
// Line 7 - 通过范围 {7-8} 选中
8
// Line 8 - 通过范围 {7-8} 选中

指定标记类型（高亮、新增、删除）#

除了默认的高亮，还支持 ins（新增/绿色）和 del（删除/红色）样式。

1
function demo() {
2
  console.log('这一行被标记为删除 (del)')
3
  // 下面两行被标记为新增 (ins)
4
  console.log('this is the second inserted line')
5

6
  return '这一行使用默认的中性标记 (mark)'
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 语法支持#

直接支持标准的 diff 格式。

1
这一行将被标记为新增
2
这一行将被标记为删除
3
这是一个普通行

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 与语法高亮#

你可以在保留 JavaScript 等语言高亮的同时，使用 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
  // Mark any given text inside lines
3
  return 'Multiple matches of the given text are supported';
4
}

正则表达式匹配#

支持使用正则进行灵活的文本匹配。

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

转义处理#

在正则模式中匹配正斜杠。

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

自定义行内标记样式#

行内文本同样支持 ins 和 del 样式。

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

4. 自动换行#

📚 官方文档：自动换行

开启与关闭#

控制长代码行是否自动换行。

1
// 开启自动换行 (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
// 关闭自动换行 (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
// 关闭缩进保留 (文字将顶格换行)
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. 代码折叠#

📚 官方文档：代码折叠

支持将不重要的样板代码（Boilerplate）折叠隐藏，点击即可展开。


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

2. 代码行号#

📚 官方文档：行号显示

控制行号显示#

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示例

https://xingguang641.com/posts/blog/blog-guide/expressive-code/

作者

星光

发布于

2024-05-01

许可协议

CC BY-NC-SA 4.0

【开源项目部署教程】JupyTrans项目教程

【博客指南】Markdown扩展功能