Firefly 代码块示例

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

表达性代码#

语法高亮#

常规语法高亮#

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

渲染 ANSI 转义序列#

1
Standard ANSI colors:
2
- Dimmed:      Black  Red  Green  Yellow  Blue  Magenta  Cyan  White 
3
- Foreground:  Black  Red  Green  Yellow  Blue  Magenta  Cyan  White 
4
- Background:  Black  Red  Green  Yellow  Blue  Magenta  Cyan  White 
5
- Reversed:    Black  Red  Green  Yellow  Blue  Magenta  Cyan  White 
6

7
8-bit colors (showing colors 160-171 as an example):
8
- Dimmed:      160  161  162  163  164  165  166  167  168  169  170  171 
9
- Foreground:  160  161  162  163  164  165  166  167  168  169  170  171 
10
- Background:  160  161  162  163  164  165  166  167  168  169  170  171 
11
- Reversed:    160  161  162  163  164  165  166  167  168  169  170  171 
12

13
24-bit colors (full RGB):
14
- Dimmed:      ForestGreen - RGB(34,139,34)  RebeccaPurple - RGB(102,51,153) 
15
- Foreground:  ForestGreen - RGB(34,139,34)  RebeccaPurple - RGB(102,51,153) 
16
- Background:  ForestGreen - RGB(34,139,34)  RebeccaPurple - RGB(102,51,153) 
17
- Reversed:    ForestGreen - RGB(34,139,34)  RebeccaPurple - RGB(102,51,153) 
18

19
Font styles:
20
- Default
21
- Bold
22
- Dimmed
23
- Italic
24
- Underline
25
- Reversed
26
- Strikethrough

编辑器和终端框架#

编辑器和终端框架

代码编辑器框架#

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

文本和行标记#

文本和行标记

标记整行和行范围#

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
}

为行标记添加标签#

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

使用类似 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 的语法#

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

标记行内的单独文本#

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

正则表达式#

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

转义正斜杠#

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

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

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
}

可折叠部分#

可折叠部分


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行");

音乐

音乐

表达性代码#

语法高亮#

常规语法高亮#

渲染 ANSI 转义序列#

编辑器和终端框架#

代码编辑器框架#

终端框架#

覆盖框架类型#

文本和行标记#

标记整行和行范围#

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

为行标记添加标签#

在单独行上添加长标签#

使用类似 diff 的语法#

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

标记行内的单独文本#

正则表达式#

转义正斜杠#

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

自动换行#

为每个块配置自动换行#

配置换行的缩进#

可折叠部分#

行号#

为每个块显示行号#

更改起始行号#

分享到社交平台

评论

音乐

目录