2059 字
10 分钟
大模型系列——代码高亮与样式指南
大模型系列——代码高亮与样式指南
在技术博客中,清晰的代码展示是提升阅读体验的关键因素之一。一个优秀的代码块不仅要语法高亮准确,还应该具备良好的可读性和视觉美感。本文将全面展示如何使用 Expressive Code 来美化代码块,让你的技术文档更加专业和易读。
💡 提示: 优秀的代码展示能让读者更快理解技术概念,提升博客的专业度和可读性。
🎨 语法高亮
基础语法高亮
最基本的代码高亮功能,支持多种编程语言:
console.log('这是一个语法高亮的代码示例')def greet(name): return f"Hello, {name}!"ANSI 终端色彩渲染
支持渲染带有 ANSI 转义序列的终端输出,这对于展示命令行工具的输出特别有用:
ANSI 颜色演示:- 常规: 红色 绿色 黄色 蓝色 洋红 青色- 加粗: 红色 绿色 黄色 蓝色 洋红 青色- 变暗: 红色 绿色 黄色 蓝色 洋红 青色
256 色彩范围(160-177色):160 161 162 163 164 165166 167 168 169 170 171
完整 RGB 色彩:森林绿 - RGB(34, 139, 34)
文本格式: 加粗 变暗 斜体 下划线📦 代码编辑器框架
标题栏显示
通过在代码块中添加文件名或标题,可以让读者更容易理解代码的上下文:
console.log('这个代码块有标题栏显示文件名')文件注释标题
另一种方式是在代码第一行添加文件路径注释:
<div class="header"> <h1>我的网站标题</h1></div>终端窗口模拟
模拟真实的终端窗口外观:
echo "这是一个没有标题的终端窗口"Write-Output "这是一个有标题的 PowerShell 终端"框架类型自定义
可以强制指定框架类型,例如将 PowerShell 显示为代码编辑器:
# 这会被显示为代码编辑器而不是终端窗口function Watch-Tail { Get-Content -Tail 20 -Wait $args }New-Alias tail Watch-Tail无框架模式
当不需要任何框架装饰时:
echo "这个代码块没有框架装饰"🔍 行标记与文本标记
行号标记
高亮特定行号或行范围:
// 第1行 - 被行号标记高亮// 第2行// 第3行// 第4行 - 被行号标记高亮// 第5行// 第6行// 第7行 - 被范围 "7-8" 标记// 第8行 - 被范围 "7-8" 标记标记类型选择
支持不同的标记类型:默认标记、插入、删除:
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 风格语法
支持类似 Git diff 的语法:
这一行会被标记为插入这一行会被标记为删除这是常规行真实 Diff 文件
显示完整的 Git diff 输出:
--- a/README.md+++ b/README.md@@ -1,3 +1,4 @@+这是实际的 diff 文件-所有内容将保持不变空白也不会被删除Diff 与语法高亮结合
在 diff 格式中保持语法高亮:
function 这是JavaScript代码() { // 整个代码块都会被高亮为 JavaScript, // 同时我们还能添加 diff 标记! console.log('要删除的旧代码') console.log('全新的闪亮代码!')}行内文本标记
高亮特定文本内容:
function demo() { // 匹配并标记所有包含 "demo" 的文本 return 'Multiple matches of the given text are supported';}正则表达式匹配
使用正则表达式进行更灵活的文本匹配:
console.log('单词 yes 和 yep 都会被标记')转义特殊字符
正确处理正则表达式中的特殊字符:
echo "Test" > /home/test.txt行内标记类型
为不同的文本指定不同的标记类型:
function demo() { console.log('这些是插入和删除标记类型') // return 语句使用默认标记类型 return true;}📏 自动换行控制
启用换行
// 启用自动换行的示例function getLongString() { return '这是一个很长的字符串,如果不启用自动换行,在可用空间不足的情况下,除非容器极宽,否则可能无法正常显示'}禁用换行
// 禁用自动换行的示例function getLongString() { return '这是一个很长的字符串,如果不启用自动换行,在可用空间不足的情况下,除非容器极宽,否则可能无法正常显示'}保持缩进
// 保持缩进的示例(默认启用)function getLongString() { return '这是一个很长的字符串,如果不启用自动换行,在可用空间不足的情况下,除非容器极宽,否则可能无法正常显示'}不保留缩进
// 不保留缩进的示例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行')🎯 实用技巧总结
博客写作最佳实践
-
选择合适的框架类型:
- 普通代码使用代码编辑器框架
- 命令行示例使用终端框架
- 需要简洁展示时使用无框架模式
-
有效使用行标记:
- 重点行使用默认标记
- 代码变更使用 diff 风格
- 为关键操作添加标签说明
-
控制换行行为:
- 默认启用换行确保移动端可读性
- 特定情况下禁用换行以保持代码结构
- 长代码考虑使用可折叠段
-
文件名和注释:
- 始终为代码块添加文件名
- 使用注释说明代码的上下文
- 保持代码块的完整性
常见应用场景
| 场景 | 推荐配置 | 效果 |
|---|---|---|
| 普通代码示例 | 默认配置 | 清晰的语法高亮 |
| 命令行教程 | 终端框架 | 模拟真实终端体验 |
| 代码对比 | diff 标记 | 突出显示变更 |
| 长代码片段 | 可折叠段 | 保持界面简洁 |
| 关键行强调 | 行标记 | 引导读者关注重点 |
🔧 高级技巧
组合多种特性
2 collapsed lines
import pandas as pdimport numpy as np
# 加载数据集(这部分代码被折叠)df = pd.read_csv('data.csv')正则表达式精确匹配
console.log('这行会被标记')console.warn('这行也会被标记')console.error('这行同样会被标记')console.info('但这行不会被标记')通过合理使用这些代码展示技巧,你可以创建既美观又实用的技术文档,为读者提供更好的阅读体验。
📚 延伸阅读: 想了解更多 Expressive Code 的高级功能,请访问 Expressive Code 官方文档。
大模型系列——代码高亮与样式指南
https://llmhello.com/posts/2025_11/expressive-code/