在这里,我们将探索如何使用 Expressive Code 展示代码块。提供的示例基于官方文档,您可以参考以获取更多详细信息。
表达性代码
语法高亮
常规语法高亮
1console.log('此代码有语法高亮!')
渲染 ANSI 转义序列
1[1;4mStandard ANSI colors:[0m
2- Dimmed: [2;30m Black [2;31m Red [2;32m Green [2;33m Yellow [2;34m Blue [2;35m Magenta [2;36m Cyan [2;37m White [0m
3- Foreground: [30m Black [31m Red [32m Green [33m Yellow [34m Blue [35m Magenta [36m Cyan [37m White [0m
4- Background: [40m Black [41m Red [42m Green [43m Yellow [44m Blue [45m Magenta [46m Cyan [47m White [0m
5- Reversed: [7;30m Black [7;31m Red [7;32m Green [7;33m Yellow [7;34m Blue [7;35m Magenta [7;36m Cyan [7;37m White [0m
6
7[1;4m8-bit colors (showing colors 160-171 as an example):[0m
8- Dimmed: [2;38;5;160m 160 [2;38;5;161m 161 [2;38;5;162m 162 [2;38;5;163m 163 [2;38;5;164m 164 [2;38;5;165m 165 [2;38;5;166m 166 [2;38;5;167m 167 [2;38;5;168m 168 [2;38;5;169m 169 [2;38;5;170m 170 [2;38;5;171m 171 [0m
9- Foreground: [38;5;160m 160 [38;5;161m 161 [38;5;162m 162 [38;5;163m 163 [38;5;164m 164 [38;5;165m 165 [38;5;166m 166 [38;5;167m 167 [38;5;168m 168 [38;5;169m 169 [38;5;170m 170 [38;5;171m 171 [0m
10- Background: [48;5;160m 160 [48;5;161m 161 [48;5;162m 162 [48;5;163m 163 [48;5;164m 164 [48;5;165m 165 [48;5;166m 166 [48;5;167m 167 [48;5;168m 168 [48;5;169m 169 [48;5;170m 170 [48;5;171m 171 [0m
11- Reversed: [7;38;5;160m 160 [7;38;5;161m 161 [7;38;5;162m 162 [7;38;5;163m 163 [7;38;5;164m 164 [7;38;5;165m 165 [7;38;5;166m 166 [7;38;5;167m 167 [7;38;5;168m 168 [7;38;5;169m 169 [7;38;5;170m 170 [7;38;5;171m 171 [0m
12
13[1;4m24-bit colors (full RGB):[0m
14- Dimmed: [2;38;2;34;139;34m ForestGreen - RGB(34,139,34) [2;38;2;102;51;153m RebeccaPurple - RGB(102,51,153) [0m
15- Foreground: [38;2;34;139;34m ForestGreen - RGB(34,139,34) [38;2;102;51;153m RebeccaPurple - RGB(102,51,153) [0m
16- Background: [48;2;34;139;34m ForestGreen - RGB(34,139,34) [48;2;102;51;153m RebeccaPurple - RGB(102,51,153) [0m
17- Reversed: [7;38;2;34;139;34m ForestGreen - RGB(34,139,34) [7;38;2;102;51;153m RebeccaPurple - RGB(102,51,153) [0m
18
19[1;4mFont styles:[0m
20- Default
21- [1mBold[0m
22- [2mDimmed[0m
23- [3mItalic[0m
24- [4mUnderline[0m
25- [7mReversed[0m
26- [9mStrikethrough[0m
编辑器和终端框架
代码编辑器框架
1console.log('标题属性示例')
1<!-- src/content/index.html -->
2<div>文件名注释示例</div>
终端框架
1echo "此终端框架没有标题"
1Write-Output "这个有标题!"
覆盖框架类型
1echo "看,没有框架!"
1# 如果不覆盖,这将是一个终端框架
2function Watch-Tail { Get-Content -Tail 20 -Wait $args }
3New-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)
说明:以下为 Astro Expressive Code 语法示例,Hugo 使用标准代码高亮,不支持
del/ins/行标记属性。
1function demo() {
2 console.log('此行标记为已删除')
3 // 此行和下一行标记为已插入
4 console.log('这是第二个插入行')
5
6 return '此行使用中性默认标记类型'
7}
为行标记添加标签
1// labeled-line-markers.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// labeled-line-markers.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+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 }
标记行内的单独文本
1function demo() {
2 // 标记行内的任何给定文本
3 return '支持给定文本的多个匹配项';
4}
正则表达式
1console.log('单词 yes 和 yep 将被标记。')
转义正斜杠
1echo "Test" > /home/test.txt
选择内联标记类型 (mark, ins, del)
1// 示例:内联标记类型(Hugo 标准高亮不支持 ins/del 属性)
2function demo() {
3 console.log('这些是插入和删除的标记类型');
4 // return 语句使用默认标记类型
5 return true;
6}
自动换行
为每个块配置自动换行
1// 启用换行的示例
2function getLongString() {
3 return '这是一个非常长的字符串,除非容器极宽,否则很可能无法适应可用空间'
4}
1// wrap=false 的示例
2function getLongString() {
3 return '这是一个非常长的字符串,除非容器极宽,否则很可能无法适应可用空间'
4}
配置换行的缩进
1// preserveIndent 示例(默认启用)
2function getLongString() {
3 return '这是一个非常长的字符串,除非容器极宽,否则很可能无法适应可用空间'
4}
1// preserveIndent=false 的示例
2function getLongString() {
3 return '这是一个非常长的字符串,除非容器极宽,否则很可能无法适应可用空间'
4}
可折叠部分
1// 所有这些样板设置代码将被折叠(Hugo 标准高亮不支持 collapse 属性)
2import { someBoilerplateEngine } from '@example/some-boilerplate'
3import { evenMoreBoilerplate } from '@example/even-more-boilerplate'
4
5const engine = someBoilerplateEngine(evenMoreBoilerplate())
6
7// 这部分代码默认可见
8engine.doSomething(1, 2, 3, calcFn)
9
10function calcFn() {
11 // 您可以有多个折叠部分
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
21// 直到块末尾的所有代码将再次被折叠
22engine.closeConnection()
23engine.freeMemory()
24engine.shutdown({ reason: '示例样板代码结束' })
行号
为每个块显示行号
1// 此代码块将显示行号
2console.log('来自第2行的问候!')
3console.log('我在第3行')
1// 此块禁用行号
2console.log('你好?')
3console.log('抱歉,你知道我在第几行吗?')
更改起始行号
1console.log('来自第5行的问候!')
2console.log('我在第6行')
留言评论
期待你的想法评论加载中