Firefly 代码块示例
Firefly 代码块示例
1241 字6 分钟
本文介绍如何使用 Expressive Code 展示代码块，示例基于其官方文档。内容涵盖语法高亮（含常规高亮与 ANSI 转义序列渲染）、编辑器与终端框架及框架类型覆盖、文本和行标记（整行与行范围标记、mark/ins/del 类型、标签、类 diff 语法、行内文本与正则匹配）、自动换行及其缩进配置、可折叠部分，以及行号显示与起始行号调整。适用于在文档或博客中需要丰富代码块呈现效果的场景。
由 DeepSeek 生成 · 本文章版本使用已保存摘要
在这里，我们将探索如何使用 Expressive Code 展示代码块。提供的示例基于官方文档，您可以参考以获取更多详细信息。
表达性代码
语法高亮
常规语法高亮
console.log('此代码有语法高亮!')渲染 ANSI 转义序列
Standard ANSI colors:- Dimmed: Black Red Green Yellow Blue Magenta Cyan White - Foreground: Black Red Green Yellow Blue Magenta Cyan White - Background: Black Red Green Yellow Blue Magenta Cyan White - Reversed: Black Red Green Yellow Blue Magenta Cyan White
8-bit colors (showing colors 160-171 as an example):- Dimmed: 160 161 162 163 164 165 166 167 168 169 170 171 - Foreground: 160 161 162 163 164 165 166 167 168 169 170 171 - Background: 160 161 162 163 164 165 166 167 168 169 170 171 - Reversed: 160 161 162 163 164 165 166 167 168 169 170 171
24-bit colors (full RGB):- Dimmed: ForestGreen - RGB(34,139,34) RebeccaPurple - RGB(102,51,153) - Foreground: ForestGreen - RGB(34,139,34) RebeccaPurple - RGB(102,51,153) - Background: ForestGreen - RGB(34,139,34) RebeccaPurple - RGB(102,51,153) - Reversed: ForestGreen - RGB(34,139,34) RebeccaPurple - RGB(102,51,153)
Font styles:- Default- Bold- Dimmed- Italic- Underline- Reversed- Strikethrough编辑器和终端框架
代码编辑器框架
console.log('标题属性示例')<div>文件名注释示例</div>终端框架
echo "此终端框架没有标题"Write-Output "这个有标题!"覆盖框架类型
echo "看，没有框架!"# 如果不覆盖，这将是一个终端框架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)
function demo() { console.log('此行标记为已删除') // 此行和下一行标记为已插入 console.log('这是第二个插入行')
return '此行使用中性默认标记类型'}为行标记添加标签
<button role="button" {...props} value={value} className={buttonClassName} disabled={disabled} active={active}> {children && !active && (typeof children === 'string' ? <span>{children}</span> : children)}</button>在单独行上添加长标签
<button role="button" {...props}
value={value} className={buttonClassName}
disabled={disabled} active={active}>
{children && !active && (typeof children === 'string' ? <span>{children}</span> : children)}</button>使用类似 diff 的语法
此行将标记为已插入此行将标记为已删除这是常规行--- a/README.md+++ b/README.md@@ -1,3 +1,4 @@+this is an actual diff file-all contents will remain unmodified no whitespace will be removed either结合语法高亮和类似 diff 的语法
function thisIsJavaScript() { // 整个块都会以 JavaScript 高亮显示， // 并且我们仍然可以为其添加 diff 标记！ console.log('要删除的旧代码') console.log('新的闪亮代码！')}标记行内的单独文本
function demo() { // 标记行内的任何给定文本 return '支持给定文本的多个匹配项';}正则表达式
console.log('单词 yes 和 yep 将被标记。')转义正斜杠
echo "Test" > /home/test.txt选择内联标记类型 (mark, ins, del)
function demo() { console.log('这些是插入和删除的标记类型'); // return 语句使用默认标记类型 return true;}自动换行
为每个块配置自动换行
// 启用换行的示例function getLongString() { return '这是一个非常长的字符串，除非容器极宽，否则很可能无法适应可用空间'}// wrap=false 的示例function getLongString() { return '这是一个非常长的字符串，除非容器极宽，否则很可能无法适应可用空间'}配置换行的缩进
// preserveIndent 示例（默认启用）function getLongString() { return '这是一个非常长的字符串，除非容器极宽，否则很可能无法适应可用空间'}// preserveIndent=false 的示例function getLongString() { return '这是一个非常长的字符串，除非容器极宽，否则很可能无法适应可用空间'}可折叠部分
5 collapsed lines
// 所有这些样板设置代码将被折叠import { someBoilerplateEngine } from '@example/some-boilerplate'import { evenMoreBoilerplate } from '@example/even-more-boilerplate'
const engine = someBoilerplateEngine(evenMoreBoilerplate())
// 这部分代码默认可见engine.doSomething(1, 2, 3, calcFn)
function calcFn() { // 您可以有多个折叠部分3 collapsed lines
const a = 1 const b = 2 const c = a + b
// 这将保持可见 console.log(`计算结果: ${a} + ${b} = ${c}`) return c}
4 collapsed lines
// 直到块末尾的所有代码将再次被折叠engine.closeConnection()engine.freeMemory()engine.shutdown({ reason: '示例样板代码结束' })行号
为每个块显示行号
// 此代码块将显示行号console.log('来自第2行的问候!')console.log('我在第3行')// 此块禁用行号console.log('你好?')console.log('抱歉，你知道我在第几行吗?')更改起始行号
console.log('来自第5行的问候!')console.log('我在第6行')
评论区
评论加载中…