表达性代码示例

1115 字

6 分钟

表达性代码示例

2024-04-10

示例

Markdown

/

博客

/

演示

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

表达性代码#

语法高亮#

语法高亮

常规语法高亮#

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

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
这一行将被标记为插入
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 '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
// 示例为preserveIndent（默认启用）
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
// 示例为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 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行')

表达性代码示例

https://ifimi.cn/posts/expressive-code/

作者

Lorem Ipsum

发布于

2024-04-10

许可协议

CC BY-NC-SA 4.0

Markdown 扩展功能

Fuwari 简明指南