Expressive Code 代码展示示例

1305 字

7 分钟

Expressive Code 代码展示示例

2024-04-10

Fuwari文章Translate

无标签

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

Expressive Code 功能#

语法高亮#

语法高亮

常规语法高亮#

1
console.log('这段代码有语法高亮效果!')

渲染 ANSI 转义序列#

1
ANSI 颜色：
2
- 常规：红色 绿色 黄色 蓝色 洋红色 青色
3
- 粗体：红色 绿色 黄色 蓝色 洋红色 青色
4
- 暗淡：红色 绿色 黄色 蓝色 洋红色 青色
5

6
256 色（显示颜色 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
全 RGB 颜色：
12
森林绿 - RGB(34, 139, 34)
13

14
文本格式：粗体 暗淡 斜体 下划线
15

16
格式是: [ 配置 内容  [ 0m
17
实际使用的时候将上面的文本连在一起

编辑器与终端框架#

编辑器与终端框架

代码编辑器框架#

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

文本与行标记#

文本与行标记

标记整行和行范围js {1, 4, 7-8}#

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
}

为行标记添加标签jsx {“1”:5} del={“2”:7-8} ins={“3”:10-12}#

1
// 带标签的行标记.jsx
2
<button
3
  role="button"
4
  {...props}
5
  value={value}
6
  className={buttonClassName}
7
  disabled={disabled}
8
  active={active}
9
>
10
  {children &&
11
    !active &&
12
    (typeof children === 'string' ? <span>{children}</span> : children)}
13
</button>

在单独行上添加长标签#

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}

1
// 带标签的行标记.jsx
2
<button
3
  role="button"
4
  {...props}
5

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

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

13
  {children &&
14
    !active &&
15
    (typeof children === 'string' ? <span>{children}</span> : children)}
16
</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
  // 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

选择行内标记类型 (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
}

自动换行#

自动换行

按代码块配置自动换行#

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
  // 这是一个非常长的字符串，除非容器极其宽，否则很可能无法适应可用空间(启用)
5
}

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
  // 这是一个非常长的字符串，除非容器极其宽，否则很可能无法适应可用空间(禁用)
5
}

配置换行行的缩进#

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
  // 这是一个非常长的字符串，除非容器极其宽，否则很可能无法适应可用空间(启用)
5
}

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
  // 这是一个非常长的字符串，除非容器极其宽，否则很可能无法适应可用空间(禁用)
5
}

可折叠部分#

可折叠部分


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

Expressive Code 代码展示示例

https://derckhanna.github.io/ForestBlog-Source/posts/expressive-code/

作者

Snowy Owl hydrogen flare

发布于

2024-04-10

许可协议

CC BY-NC-SA 4.0

Markdown 扩展功能

Fuwari 简单使用指南