Expressive Code 示例 - Fuwari Modified

1474 字

7 分钟

Expressive Code 示例

2024-04-10

2026-09-30

示例文章

Markdown

/

写作

/

演示

本文展示本站通过 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
文本格式：粗体 淡化 斜体 下划线

编辑器与终端边框#

编辑器与终端边框文档

代码编辑器边框#

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

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

为行标记添加说明#

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>

将较长说明单独显示#

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
  // 可以标记行内任意文本
3
  return '同一文本可以匹配多处';
4
}

正则表达式标记#

1
console.log('yes 和 yep 这两个单词会被标记。')

转义正斜杠#

1
echo "测试" > /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
// 禁用自动换行的示例
2
function getLongString() {
3
  return '这确实是一段篇幅相当长、字数颇为可观、整体内容也显得比较长、看起来并不短的文本；在当前所处容器的宽度还没有达到足够宽、尚未扩展到足以将整段文字全部容纳下来的程度之前，它极有可能没有办法在同一行之中完整无缺地、毫无遗漏地、一个字符都不少地显示出来。'
4
}

设置换行后的缩进#

1
// preserveIndent 示例（默认启用）
2
function getLongString() {
3
  return '这确实是一段篇幅相当长、字数颇为可观、整体内容也显得比较长、看起来并不短的文本；在当前所处容器的宽度还没有达到足够宽、尚未扩展到足以将整段文字全部容纳下来的程度之前，它极有可能没有办法在同一行之中完整无缺地、毫无遗漏地、一个字符都不少地显示出来。'
4
}

1
// 禁用 preserveIndent 的示例
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: 'End of example boilerplate code' })

行号#

行号插件文档

为代码块显示行号#

1
// 此代码块将显示行号
2
console.log('你好，我位于第 2 行！')
3
console.log('我位于第 3 行')

// 此代码块不显示行号
console.log('你好？')
console.log('请问你知道我位于哪一行吗？')

修改起始行号#

5
console.log('你好，我位于第 5 行！')
6
console.log('我位于第 6 行')

Expressive Code 示例

https://ancryel.github.io/fuwari-modified-demo/posts/expressive-code/

作者

Lorem ipsum

发布于

2024-04-10

许可协议

CC BY-NC-SA 4.0

Markdown 扩展功能

Fuwari Modified 简易指南

Fuwari Modified!

代码块样式#

语法高亮#

常规语法高亮#

ANSI 转义序列#

编辑器与终端边框#

代码编辑器边框#

终端边框#

指定边框类型#

文本与行标记#

标记指定行与行范围#

选择行标记类型（mark、ins、del）#

为行标记添加说明#

将较长说明单独显示#

使用 diff 风格语法#

组合语法高亮与 diff 标记#

标记行内文本#

正则表达式标记#

转义正斜杠#

选择行内标记类型（mark、ins、del）#

自动换行#

为代码块设置自动换行#

设置换行后的缩进#

可折叠代码段#

行号#

为代码块显示行号#

修改起始行号#