445 字
2 分钟
Expressive Code 示例

在这里,我们将探索使用 Expressive Code 渲染代码块的效果。以下示例基于官方文档,您可以参考官方文档了解更多详情。

语法高亮#

语法高亮官方文档

常规语法高亮#

console.log('这段代码应用了语法高亮!')

渲染 ANSI 转义序列#

Terminal window
ANSI 颜色:
- 常规: Red Green Yellow Blue Magenta Cyan
- 加粗: Red Green Yellow Blue Magenta Cyan
- 变暗: Red Green Yellow Blue Magenta Cyan
256 色 (展示 160-177 号颜色):
160 161 162 163 164 165
166 167 168 169 170 171
172 173 174 175 176 177
完整 RGB 颜色:
森林绿 - RGB(34, 139, 34)
文本格式: 加粗 变暗 斜体 下划线

编辑器与终端外框#

编辑器与终端外框官方文档

代码编辑器外框#

my-test-file.js
console.log('标题属性示例')

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

终端外框#

Terminal window
echo "这个终端外框没有标题"

PowerShell 终端示例
Write-Output "这一个有标题!"

覆盖外框类型#

echo "看啊,没有外框了!"

PowerShell Profile.ps1
# 如果不覆盖外框类型,这原本会是一个终端外框
function Watch-Tail { Get-Content -Tail 20 -Wait $args }
New-Alias tail Watch-Tail

文本与行标记#

文本与行标记官方文档

标记整行与行范围#

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

选择行标记类型 (高亮 mark, 插入 ins, 删除 del)#

line-markers.js
function demo() {
console.log('这行被标记为删除')
// 这行和下一行被标记为插入
console.log('这是第二行插入的代码')
return '这行使用默认的中性高亮标记类型'
}

为行标记添加标签#

http://googleusercontent.com/immersive_entry_chip/0

将长标签独立成行显示#

http://googleusercontent.com/immersive_entry_chip/1