Firefly 代码块示例 - Satxm's Books

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

表达性代码#

语法高亮#

常规语法高亮#

1
console.log('此代码有语法高亮!')

渲染 ANSI 转义序列#

1
ANSI 颜色:
2

3
默认：
4
30黑  91亮红  31红  92亮绿  32绿  93亮黄  33黄  94亮蓝  34蓝  95亮品红  35品红  96亮青  36青  37浅灰  90灰  97亮白
5

6
反显：
7
30黑  91亮红  31红  92亮绿  32绿  93亮黄  33黄  94亮蓝  34蓝  95亮品红  35品红  96亮青  36青  37浅灰  90灰  97亮白
8

9
设置背景色：
10
40黑  101亮红  41红  102亮绿  42绿  103亮黄  43黄  104亮蓝  44蓝  105亮品红  45品红  106亮青  46青  47浅灰  100灰  107亮白

1
256 颜色:
2
  0   16   40   64   88  112  136  160  184  208  232
3
  1   17   41   65   89  113  137  161  185  209  233
4
  2   18   42   66   90  114  138  162  186  210  234
5
  3   19   43   67   91  115  139  163  187  211  235
6
  4   20   44   68   92  116  140  164  188  212  236
7
  5   21   45   69   93  117  141  165  189  213  237
8
  6   22   46   70   94  118  142  166  190  214  238
9
  7   23   47   71   95  119  143  167  191  215  239
10
  8   24   48   72   96  120  144  168  192  216  240
11
  9   25   49   73   97  121  145  169  193  217  241
12
 10   26   50   74   98  122  146  170  194  218  242
13
 11   27   51   75   99  123  147  171  195  219  243
14
 12   28   52   76  100  124  148  172  196  220  244
15
 13   29   53   77  101  125  149  173  197  221  245
16
 14   30   54   78  102  126  150  174  198  222  246
17
 15   31   55   79  103  127  151  175  199  223  247
18
      32   56   80  104  128  152  176  200  224  248
19
      33   57   81  105  129  153  177  201  225  249
20
      34   58   82  106  130  154  178  202  226  250
21
      35   59   83  107  131  155  179  203  227  251
22
      36   60   84  108  132  156  180  204  228  252
23
      37   61   85  109  133  157  181  205  229  253
24
      38   62   86  110  134  158  182  206  230  254
25
      39   63   87  111  135  159  183  207  231  255
26

27
  0   16   40   64   88  112  136  160  184  208  232
28
  1   17   41   65   89  113  137  161  185  209  233
29
  2   18   42   66   90  114  148  162  186  210  234
30
  3   19   43   67   91  115  139  163  187  211  235
31
  4   20   44   68   92  116  140  164  188  212  236
32
  5   21   45   69   93  117  141  165  189  213  237
33
  6   22   46   70   94  118  142  166  190  214  248
34
  7   23   47   71   95  119  143  167  191  215  239
35
  8   24   48   72   96  120  144  168  192  216  240
36
  9   25   49   73   97  121  145  169  193  217  241
37
 10   26   50   74   98  122  146  170  194  218  242
38
 11   27   51   75   99  123  147  171  195  219  243
39
 12   28   52   76  100  124  148  172  196  220  244
40
 13   29   53   77  101  125  149  173  197  221  245
41
 14   30   54   78  102  126  150  174  198  222  246
42
 15   31   55   79  103  127  151  175  199  223  247
43
      32   56   80  104  128  152  176  200  224  248
44
      33   57   81  105  129  153  177  201  225  249
45
      34   58   82  106  130  154  178  202  226  250
46
      35   59   83  107  131  155  179  203  227  251
47
      36   60   84  108  132  156  180  204  228  252
48
      37   61   85  109  133  157  181  205  229  253
49
      48   62   86  110  134  158  182  206  230  254
50
      39   63   87  111  135  159  183  207  231  255

1
RGB 颜色:
2
ForestGreen - RGB(34, 139, 34)
3
ForestGreen - RGB(34, 139, 34)
4

5
文本格式: 1 - 粗体  2 - 细体  3 - 斜体  4 - 下划线  9 - 删除线

编辑器和终端框架#

编辑器和终端框架

代码编辑器框架#

1
```js title="my-test-file.js"
2
console.log('标题属性示例')
3
```

1
console.log('标题属性示例')

1
```html
2
<div>文件名注释示例</div>
3
```

1
<div>文件名注释示例</div>

终端框架#

1
```bash
2
echo "此终端框架没有标题"
3
```

1
echo "此终端框架没有标题"

1
```powershell title="Powershell 终端示例"
2
Write-Output "这个有标题!"
3
```

1
Write-Output "这个有标题!"

覆盖框架类型#

1
```sh frame="none"
2
echo "看，没有框架!"
3
```

1
echo "看，没有框架!"

1
```ps frame="code" title="Powershell Profile.ps1"
2
# 如果不覆盖，这将是一个终端框架
3
function Watch-Tail { Get-Content -Tail 20 -Wait $args }
4
New-Alias tail Watch-Tail
5
```

1
# 如果不覆盖，这将是一个终端框架
2
function Watch-Tail { Get-Content -Tail 20 -Wait $args }
3
New-Alias tail Watch-Tail

文本和行标记#

文本和行标记

标记整行和行范围#

1
```js {1, 4, 7-8}
2
// 第1行 - 通过行号定位
3
// 第2行
4
// 第3行
5
// 第4行 - 通过行号定位
6
// 第5行
7
// 第6行
8
// 第7行 - 通过范围 "7-8" 定位
9
// 第8行 - 通过范围 "7-8" 定位
10
```

1
// 第1行 - 通过行号定位
2
// 第2行
3
// 第3行
4
// 第4行 - 通过行号定位
5
// 第5行
6
// 第6行
7
// 第7行 - 通过范围 "7-8" 定位
8
// 第8行 - 通过范围 "7-8" 定位

选择行标记类型 (mark, ins, del)#

1
```js title="line-markers.js" del={2} ins={3-4} {6}
2
function demo() {
3
  console.log('此行标记为已删除')
4
  // 此行和下一行标记为已插入
5
  console.log('这是第二个插入行')
6

7
  return '此行使用中性默认标记类型'
8
}
9
```

1
function demo() {
2
  console.log('此行标记为已删除')
3
  // 此行和下一行标记为已插入
4
  console.log('这是第二个插入行')
5

6
  return '此行使用中性默认标记类型'
7
}

为行标记添加标签#

1
```jsx {"1":5} del={"2":7-8} ins={"3":10-12}
13 collapsed lines
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
```

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
```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}
16 collapsed lines
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
```

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
```diff
2
+此行将标记为已插入
3
-此行将标记为已删除
4
这是常规行
5
```

1
此行将标记为已插入
2
此行将标记为已删除
3
这是常规行

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
```

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
```diff lang="js"
2
  function thisIsJavaScript() {
3
    // 整个块都会以 JavaScript 高亮显示，
4
    // 并且我们仍然可以为其添加 diff 标记！
5
-   console.log('要删除的旧代码')
6
+   console.log('新的闪亮代码！')
7
  }
8
```

1
function thisIsJavaScript() {
2
  // 整个块都会以 JavaScript 高亮显示，
3
  // 并且我们仍然可以为其添加 diff 标记！
4
  console.log('要删除的旧代码')
5
  console.log('新的闪亮代码！')
6
}

标记行内的单独文本#

1
```js "文本"
2
function demo() {
3
  // 标记行内的任何给定文本
4
  return '支持给定文本的多个匹配项';
5
}
6
```

1
function demo() {
2
  // 标记行内的任何给定文本
3
  return '支持给定文本的多个匹配项';
4
}

正则表达式#

1
```ts /ye[sp]/
2
console.log('单词 yes 和 yep 将被标记。')
3
```

1
console.log('单词 yes 和 yep 将被标记。')

转义正斜杠#

1
```sh /\/ho.*\//
2
echo "Test" > /home/test.txt
3
```

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

选择内联标记类型 (mark, ins, del)#

1
```js "return true;" ins="inserted" del="deleted"
2
function demo() {
3
  console.log('这些是插入和删除的标记类型');
4
  // return 语句使用默认标记类型
5
  return true;
6
}
7
```

1
function demo() {
2
  console.log('这些是插入和删除的标记类型');
3
  // return 语句使用默认标记类型
4
  return true;
5
}

自动换行#

自动换行

为每个块配置自动换行#

1
// 启用换行的示例
2
function getLongString() {
3
  return '这是一个非常长的字符串，除非容器极宽，否则很可能无法适应可用空间'
4
}

1
// wrap=false 的示例
2
function getLongString() {
3
  return '这是一个非常长的字符串，除非容器极宽，否则很可能无法适应可用空间'
4
}

配置换行的缩进#

1
// preserveIndent 示例（默认启用）
2
function getLongString() {
3
  return '这是一个非常长的字符串，除非容器极宽，否则很可能无法适应可用空间'
4
}

1
// preserveIndent=false 的示例
2
function getLongString() {
3
  return '这是一个非常长的字符串，除非容器极宽，否则很可能无法适应可用空间'
4
}

可折叠部分#

可折叠部分

1
```js collapse={1-5, 12-14, 21-24}
24 collapsed lines
2
// 所有这些样板设置代码将被折叠
3
import { someBoilerplateEngine } from '@example/some-boilerplate'
4
import { evenMoreBoilerplate } from '@example/even-more-boilerplate'
5

6
const engine = someBoilerplateEngine(evenMoreBoilerplate())
7

8
// 这部分代码默认可见
9
engine.doSomething(1, 2, 3, calcFn)
10

11
function calcFn() {
12
  // 您可以有多个折叠部分
13
  const a = 1
14
  const b = 2
15
  const c = a + b
16

17
  // 这将保持可见
18
  console.log(`计算结果: ${a} + ${b} = ${c}`)
19
  return c
20
}
21

22
// 直到块末尾的所有代码将再次被折叠
23
engine.closeConnection()
24
engine.freeMemory()
25
engine.shutdown({ reason: '示例样板代码结束' })
26
```


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
```js showLineNumbers
2
// 此代码块将显示行号
3
console.log('来自第2行的问候!')
4
console.log('我在第3行')
5
```

1
// 此代码块将显示行号
2
console.log('来自第2行的问候!')
3
console.log('我在第3行')

1
```js showLineNumbers=false
2
// 此块禁用行号
3
console.log('你好?')
4
console.log('抱歉，你知道我在第几行吗?')
5
```

// 此块禁用行号
console.log('你好?')
console.log('抱歉，你知道我在第几行吗?')

更改起始行号#

1
```js showLineNumbers startLineNumber=5
2
console.log('来自第5行的问候!')
3
console.log('我在第6行')
4
```

5
console.log('来自第5行的问候!')
6
console.log('我在第6行')

音乐

音乐

表达性代码#

语法高亮#

常规语法高亮#

渲染 ANSI 转义序列#

编辑器和终端框架#

代码编辑器框架#

终端框架#

覆盖框架类型#

文本和行标记#

标记整行和行范围#

选择行标记类型 (mark, ins, del)#

为行标记添加标签#

在单独行上添加长标签#

使用类似 diff 的语法#

结合语法高亮和类似 diff 的语法#

标记行内的单独文本#

正则表达式#

转义正斜杠#

选择内联标记类型 (mark, ins, del)#

自动换行#

为每个块配置自动换行#

配置换行的缩进#

可折叠部分#

行号#

为每个块显示行号#

更改起始行号#

文章分享

评论区

音乐

文章目录