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

表达性代码

语法高亮

语法高亮

常规语法高亮

js console.log(‘此代码有语法高亮!’)

渲染 ANSI 转义序列

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

编辑器和终端框架

编辑器和终端框架

代码编辑器框架

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

文本和行标记

文本和行标记

标记整行和行范围

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

为行标记添加标签

在单独行上添加长标签

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 <button role=“button” {…props}

value={value} className={buttonClassName}

disabled={disabled} active={active}

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

使用类似 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 ‘支持给定文本的多个匹配项’; }

正则表达式

ts /ye[sp]/ 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行’)