EPUB代码高亮与排版检查:换行、等宽字体和明暗主题

从读者试读和制作侧最小示例两条路径,检查EPUB代码的缩进、长行、等宽字体与明暗主题,并用真实静态XHTML实验比较横向滚动和视觉折行。

EPUB代码高亮依赖内容标记、样式或阅读器功能。检查时应先核对 pre/code 结构、语言与版本说明,以及长行、字体和主题的显示;阅读器还可能覆盖作者样式。读者应在实际代码章节检查缩进、长 token、符号和明暗主题,而不是只看封面或“支持 EPUB”的说明。

这篇文章分成两条路径:普通读者如何试读和记录问题;作者或编辑在有权制作自有 EPUB 时,怎样用最小 XHTML/CSS 比较不换行与视觉折行。若文件尚未成功导入,可先参考EPUB怎么打开;格式与重排原理则见EPUB格式说明。

EPUB代码高亮依赖结构、样式与阅读器

W3C 的 EPUB 3.3允许把 HTML、CSS、SVG 等网页资源组织为数字出版物;EPUB Reading Systems 3.3描述阅读系统怎样处理出版物。规范并没有要求所有 App 使用相同字体、颜色主题或语法高亮规则。

代码块可用 pre 保留空白,用 code 表明内容性质。代码语言、适用版本和关键行说明仍应写成普通文字,让不依赖颜色的读者也能理解。高亮颜色可帮助扫读;自动语法分色取决于制作工具或阅读器的相应功能,本例只使用手工 token 标记,不能从 .epub 后缀推断。

读者怎样检查EPUB代码显示

检查项 实际观察 不要误判为
源码空白 函数层级、开头缩进和空行能否辨认 复制后一定可运行或每个 App 完全一致
长行 能否横向阅读,或在小屏上视觉折行且页面不整体溢出 视觉折行已改写源码换行
字体与符号 括号、引号、&、*、泛型和生命周期标记是否清楚 指定字体已经嵌入或所有字符等宽
明暗主题 正文、注释、字符串和链接在当前主题中是否可辨 整本书或阅读器已通过无障碍认证
上下文 语言、版本、命令输出和解释是否在代码附近 颜色本身已经传达全部关键信息

EPUB代码块换行:横向滚动与视觉折行是取舍

MDN 的 white-space 说明中,pre保留空白,只在源码换行或 br 处断开;pre-wrap同样保留空白,但可以根据行框产生视觉折行。视觉上多出的行并没有写入代码文本。

overflow-wrap 的 anywhere可在长 token 没有其他断点时提供折行机会。这样能避免盒子溢出,却可能把等号、长标识符或路径在视觉上拆开。读者要根据“保持一行结构”还是“减少小屏横向移动”判断,没有适用于所有代码的单一答案。

EPUB等宽字体设置只能表达候选顺序

font-family是一组按优先级排列的字体与通用 family;系统会选择可用字体,也可能按字符 fallback。声明末尾的 monospace只表达等宽 fallback 意图,不能证明拉丁字母、CJK、数学符号和所有设备都使用同一字体。

读者可以在 App 允许时改变字号、方向或阅读主题,观察具体代码页。下面的制作侧示例用于可编辑的自有内容;现成文件能否修改、阅读器是否采用新样式取决于具体文件和软件,不能把这段 CSS 当作通用修复。

最小XHTML/CSS示例:两种长行策略

制作侧可先保持语义结构,再选择一种明确的长行策略。下面只是核心差异,不是完整 EPUB 包,也不保证商业阅读器采用相同几何:

.code-block {
  overflow-x: auto;
  white-space: pre;
  font-family: monospace;
}

.code-block.wrap {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

语言和版本应放在代码块旁的普通文字中;重点行也应用文字说明补充,而不是只改变颜色。手工为几个 token 加 span可以做视觉示意,但不等于完整的 Python、Rust 或 Go 语法高亮器。

查看本站原创四行显示样例
# Display sample only
def select_values(values):
    prefix_for_display_example = "a_very_long_unbroken_token_for_layout_checks_0123456789_0123456789_0123456789"
    return [value for value in values if value.startswith(prefix_for_display_example)]

真实静态实验:源代码四行,视觉可以是四、七或十一行

本站用同一份原创四行 Python 显示样例制作了亮色、暗色和一组故意低对比的反例,每种主题分别测试 pre 与折行样式,并在窗口宽 360px 与 600px、高 1000px、代码字号 16px 的静态 Chromium 156 文档中渲染,共 12 个条件。代码没有执行,也没有在页面加载后注入 CSS。

同一四行源代码在本地XHTML中视觉折行为11行或保留4行并横向滚动的实际截取
原创静态XHTML样例的真实渲染截取,文本与缩进未变;不是商品、手机或EPUB阅读器兼容认证。

下表中,clientWidth(简写 client)表示容器可视内宽,scrollWidth(简写 scroll)表示内容所需的可滚动宽,单位均为 CSS 像素。

模式与宽度 实际结果 解释
pre,360px 4 行;scroll 1087,client 318;可横滚 保留源换行,长行超出盒子
pre,600px 4 行;scroll 1087,client 558;可横滚 盒子变宽,但长 token 仍超出
折行,360px 11 行;scroll 与 client 均为 318 无横滚,长 token 发生视觉拆分
折行,600px 7 行;scroll 与 client 均为 558 同一源码在更宽行框中减少折行

所有条件的 code.textContent 字节与开头缩进 [0,0,4,4] 保持一致。pre 条件中把 scrollLeft 请求设为 200 后实际生效,再复位为 0;折行条件没有横向滚动。这只证明该静态样例的 DOM 文本未变,没有测试剪贴板复制、编译结果或程序正确性。

小屏代码排版还要检查主题与字体

实验故意声明一个不存在的字体名,再以 monospace fallback。在当前样例里,八个 ASCII i 与八个 W 的探针总宽度均为 76.8125 CSSpx;这只说明本次拉丁字形探针的显示,不识别实际字体,也不能推广到 CJK 或其他阅读器。

16px 普通代码 token 与背景的样本最小对比为:亮色 5.164:1,暗色 8.52:1,故意构造的坏例为 1.04:1。W3C 的 WCAG 2.2 对比度说明给出通常文本至少 4.5:1、large-scale text 3:1 的条件与例外。本次只计算了几个 token/背景颜色对,不能当作整页、整书、阅读器或 WCAG 认证。

两本代码书怎样试读

Rust:符号、泛型、生命周期与长路径

《Rust 编程:快速、安全的系统开发(第三版)》由 Jim Blandy、Jason Orendorff、Leonora F. S. Tindall 合著,面向有系统编程经验或任意语言资深开发者。试读所有权、引用、trait、异步或 unsafe 等章节时,重点检查 &、*、泛型与生命周期标记、长路径、缩进和输出块。

查看《Rust 编程:快速、安全的系统开发(第三版)》目录与试读

Go:结构体、错误分支、goroutine 与配置长行

Joel Bryan Juliano 的《Go 分布式系统》要求读者已经能写 Go HTTP 与数据库服务,并熟悉函数、结构体、接口和错误处理。可试读并发、队列、HTTP、数据库或 gRPC 章节,检查结构体/接口、错误分支、goroutine/channel、长 import、URL、配置和输出。

查看《Go 分布式系统》的目录与试读

本文核对了两本授权 EPUB 的扉页或 OPF、前言与目录,没有完整通读或运行书内代码,也没有在商品、手机或商业 EPUB Reading System 中完成代码高亮测试。原创实验只覆盖自有静态 XHTML/CSS 在记录的 Chromium 条件下的显示。

延伸阅读