Firefly 代码块示例

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

表达性代码

语法高亮

常规语法高亮

console.log('此代码有语法高亮!')

渲染 ANSI 转义序列

ansi

ANSI colors:
- Regular: [31mRed[0m [32mGreen[0m [33mYellow[0m [34mBlue[0m [35mMagenta[0m [36mCyan[0m
- Bold:    [1;31mRed[0m [1;32mGreen[0m [1;33mYellow[0m [1;34mBlue[0m [1;35mMagenta[0m [1;36mCyan[0m
- Dimmed:  [2;31mRed[0m [2;32mGreen[0m [2;33mYellow[0m [2;34mBlue[0m [2;35mMagenta[0m [2;36mCyan[0m

256 colors (showing colors 160-177):
[38;5;160m160 [38;5;161m161 [38;5;162m162 [38;5;163m163 [38;5;164m164 [38;5;165m165[0m
[38;5;166m166 [38;5;167m167 [38;5;168m168 [38;5;169m169 [38;5;170m170 [38;5;171m171[0m
[38;5;172m172 [38;5;173m173 [38;5;174m174 [38;5;175m175 [38;5;176m176 [38;5;177m177[0m

Full RGB colors:
[38;2;34;139;34mForestGreen - RGB(34, 139, 34)[0m

Text formatting: [1mBold[0m [2mDimmed[0m [3mItalic[0m [4mUnderline[0m

编辑器和终端框架

代码编辑器框架

js title="my-test-file.js"

console.log('标题属性示例')

html

文件名注释示例

终端框架

bash

echo "此终端框架没有标题"

powershell title="PowerShell 终端示例"

Write-Output "这个有标题!"

覆盖框架类型

sh frame="none"

echo "看，没有框架!"

ps frame="code" title="PowerShell Profile.ps1"

# 如果不覆盖，这将是一个终端框架
function Watch-Tail { Get-Content -Tail 20 -Wait $args }
New-Alias tail Watch-Tail

文本和行标记

标记整行和行范围

js {1, 4, 7-8}

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

选择行标记类型 (mark, ins, del)

js title="line-markers.js" del={2} ins={3-4} {6}

function demo() {
  console.log('此行标记为已删除')
  // 此行和下一行标记为已插入
  console.log('这是第二个插入行')

  return '此行使用中性默认标记类型'
}

为行标记添加标签

jsx {"1":5} del={"2":7-8} ins={"3":10-12}

// labeled-line-markers.jsx

  {children &&
    !active &&
    (typeof children === 'string' ? {children} : children)}

在单独行上添加长标签

jsx {"1. Provide the value prop here:":5-6} del={"2. Remove the disabled and active states:":8-10} ins={"3. Add this to render the children inside the button:":12-15}

// labeled-line-markers.jsx


  {children &&
    !active &&
    (typeof children === 'string' ? {children} : children)}

使用类似 diff 的语法

diff

+此行将标记为已插入
-此行将标记为已删除
这是常规行

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 的语法

diff lang="js"

  function thisIsJavaScript() {
    // 整个块都会以 JavaScript 高亮显示，
    // 并且我们仍然可以为其添加 diff 标记！
-   console.log('要删除的旧代码')
+   console.log('新的闪亮代码！')
  }

标记行内的单独文本

js "given text"

function demo() {
  // 标记行内的任何给定文本
  return '支持给定文本的多个匹配项';
}

正则表达式

console.log('单词 yes 和 yep 将被标记。')

转义正斜杠

sh /\/ho.*\//

echo "Test" > /home/test.txt

选择内联标记类型 (mark, ins, del)

js "return true;" ins="inserted" del="deleted"

function demo() {
  console.log('这些是插入和删除的标记类型');
  // return 语句使用默认标记类型
  return true;
}

自动换行

为每个块配置自动换行

js wrap

// 启用换行的示例
function getLongString() {
  return '这是一个非常长的字符串，除非容器极宽，否则很可能无法适应可用空间'
}

js wrap=false

// wrap=false 的示例
function getLongString() {
  return '这是一个非常长的字符串，除非容器极宽，否则很可能无法适应可用空间'
}

配置换行的缩进

js wrap preserveIndent

// preserveIndent 示例（默认启用）
function getLongString() {
  return '这是一个非常长的字符串，除非容器极宽，否则很可能无法适应可用空间'
}

js wrap preserveIndent=false

// preserveIndent=false 的示例
function getLongString() {
  return '这是一个非常长的字符串，除非容器极宽，否则很可能无法适应可用空间'
}

可折叠部分

js collapse={1-5, 12-14, 21-24}

// 所有这些样板设置代码将被折叠
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() {
  // 您可以有多个折叠部分
  const a = 1
  const b = 2
  const c = a + b

  // 这将保持可见
  console.log(`计算结果: ${a} + ${b} = ${c}`)
  return c
}

// 直到块末尾的所有代码将再次被折叠
engine.closeConnection()
engine.freeMemory()
engine.shutdown({ reason: '示例样板代码结束' })

行号

为每个块显示行号

js showLineNumbers

// 此代码块将显示行号
console.log('来自第2行的问候!')
console.log('我在第3行')

js showLineNumbers=false

// 此块禁用行号
console.log('你好?')
console.log('抱歉，你知道我在第几行吗?')

更改起始行号

js showLineNumbers startLineNumber=5

console.log('来自第5行的问候!')
console.log('我在第6行')