Expressive Code

作者：Goosequill
8 分钟阅读 1194 字

目录

  1. Expressive Code
    1. 语法高亮
    2. 编辑器和终端框架
    3. 文本和行标记
    4. 自动换行
  2. 可折叠区域
  3. 行号
    1. 为每个代码块显示行号
    2. 更改起始行号

在这里，我们将探索使用 Expressive Code 时代码块的外观。以下示例基于官方文档，你可以参考以获取更多详细信息。

Expressive Code

语法高亮

语法高亮

常规语法高亮

console.log('此代码已进行语法高亮！')

渲染 ANSI 转义序列

Terminal window
ANSI 颜色：
- 常规: [31m红色[0m [32m绿色[0m [33m黄色[0m [34m蓝色[0m [35m洋红[0m [36m青色[0m
- 粗体:    [1;31m红色[0m [1;32m绿色[0m [1;33m黄色[0m [1;34m蓝色[0m [1;35m洋红[0m [1;36m青色[0m
- 暗淡:  [2;31m红色[0m [2;32m绿色[0m [2;33m黄色[0m [2;34m蓝色[0m [2;35m洋红[0m [2;36m青色[0m


256 色（显示颜色 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


完整 RGB 颜色：
[38;2;34;139;34m森林绿 - RGB(34, 139, 34)[0m


文本格式：[1m粗体[0m [2m暗淡[0m [3m斜体[0m [4m下划线[0m

编辑器和终端框架

编辑器和终端框架

代码编辑器框架

my-test-file.js
console.log('title 属性示例')
src/content/index.html
<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 '此行使用中性默认标记类型'
}

为行标记添加标签

labeled-line-markers.jsx
<button
  role="button"
  {...props}
  value={value}
  className={buttonClassName}
  disabled={disabled}
  active={active}
>
  {children &&
    !active &&
    (typeof children === 'string' ? <span>{children}</span> : children)}
</button>

在单独的行上添加长标签

labeled-line-markers.jsx
<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 @@
+这是一个实际的 diff 文件
-所有内容将保持不变
 也不会删除任何空白

将语法高亮与类似 diff 的语法结合使用

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

标记行内的单个文本

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

正则表达式

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

转义正斜杠

Terminal window
echo "Test" > /home/test.txt

选择内联标记类型（mark, ins, del）

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

自动换行

自动换行

为每个代码块配置自动换行

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

配置换行行的缩进

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

可折叠区域

可折叠区域

// 所有这些样板设置代码将被折叠
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: '示例样板代码结束' })

行号

行号

为每个代码块显示行号

// 此代码块将显示行号
console.log('来自第 2 行的问候！')
console.log('我在第 3 行')
// 此块禁用行号
console.log('你好？')
console.log('抱歉，你知道我在哪一行吗？')

更改起始行号

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

关系图谱

Loading graph...