返回博客
5 分钟阅读
MarkdownToImage

保留代码高亮的 Markdown 转 PDF:怎么让语法色不丢

怎么把 Markdown 转 PDF 不丢代码高亮。为什么大部分工具会剥色、三件必须对齐的事、适合打印的主题选择,以及逐个工具的比较。

保留代码高亮的 Markdown 转 PDF:怎么让语法色不丢

一句话说结论

要让 Markdown 转 PDF 后还保留代码高亮(颜色、字体、行号),用基于 headless Chromium 的工具。本站的 /markdown-to-pdf 开箱即用 —— 代码块用 Prism / highlight.js 完整上色,等宽字体与正确换行都保留,PDF 与预览一致。

本文解释:为什么大部分 Markdown → PDF 工具会丢颜色、哪三件事必须对齐才能保留,以及各常见工具的表现。

为什么 Markdown PDF 常丢代码高亮

三种常见失败模式:

  1. 渲染器一开始就没上色。 裸跳 pandoc input.md -o output.pdf 默认走 Listings/Skylighting,颜色老派、对比度低。没加 --highlight-style 也可能是单色。
  2. 高亮器跑了,但被打印 CSS 杀了。 从浏览器 ⌘+P 时,很多站点的 print 样式表重置 color: black !important。代码块变成纯黑字 —— 能读,但看不出结构。
  3. PDF 引擎在转换时抽掉了色彩。 一些老的 PDF 库会在某些打印机配置下把一切压成灰度。典型信号:链接保留了蓝色,但代码块丢了绿/橙。

如果你导出 Markdown 发现代码变单色,几乎总是上面三者之一。

三件必须对齐的事

代码高亮要进 PDF 是一条链。任一环占点能性都会丢色:

  1. 真实的语法高亮器要渲染过源码。 Prism、highlight.js、Shiki或 Pandoc 的 Skylighting。没高亮器,代码就只是等宽文本。
  2. 主题要能活着走完打印路径。 要么工具直接导出屏幕渲染结果(headless Chromium),要么有明确不重置颜色的 print 样式表。
  3. 字体与颜色要合主题的原意。 暗色主题(Dracula、One Dark)打印在白纸上丈不如意;明色主题(GitHub Light、Solarized Light)打印效果好。

浏览器版默认三项都提供了 —— 屏幕渲染与 PDF 导出是同一个 Chromium 快照。

各方案比较

/markdown-to-pdf(网页工具)

用 headless Chromium 把预览原样截为 PDF。默认 Prism 主题,为打印调优。长行软换行不会溢出页面。行内 code 保留背景与等宽字体。

结论:开箱即用,免配置。

md-to-pdf(npm CLI)

同样底层是 headless Chromium,可以用 YAML front-matter 控制 highlight.js 主题:

---
stylesheet:
  - https://cdn.jsdelivr.net/npm/highlight.js/styles/github.css
---

结论:全色彩但要自带主题。打印用 github.css,确要暗色 PDF 就 atom-one-dark.css

VSCode「Markdown PDF」插件

也是 Chromium,但默认高亮主题跟随编辑器当前主题。VSCode 是暗色主题就会导出暗色 PDF,看屏幕 OK,打印纸费墕粉。在用户设置里覆盖:

"markdown-pdf.highlightStyle": "github.css"

结论:能用,但打印前检查一下主题。

Pandoc

Pandoc 默认代码渲染用 Skylighting,跟 highlight.js / Prism 不同。颜色按 Web 标准看老派。传 --highlight-style=tango(或 pygmentskatemonochrome)可换调色板,但没一个能完全匹配现代 Web 主题。

要通过 Pandoc 上 Web 风主题,技巧是先转 HTML:

pandoc input.md -o output.html --highlight-style=pygments --self-contained
# 然后在浏览器里打印为 PDF

结论:能用但绕路。选 Pandoc 的人一般不为了 Web 美学。

浏览器打印(另存 PDF)

完全看 print 样式表。Github.com 的 print CSS 保留颜色还行,一些文档站会狀狠地去色。要出重要交付物前先测。

结论:鞋包。

选一个适合打印的主题

几点实用建议:

  • 明色主题打印更好。 暗背景费墕粉且黑白打印机上对比差。用 GitHub Light、Solarized Light或 Atom One Light。
  • 避免饱和度过高的颜色。 纯红、纯绿在纸上刺眼。低饱和度调色板(Solarized Light、Tomorrow)打印起来舒服。
  • 先关掉行号测试。 长代码块的行号会右推边界,可能起页面边距冲突。
  • 注意等宽字体。 主题要的字体没装,就会回退到 Courier,看起来老派。Inter、JetBrains Mono、Fira Code 是常见安全默认。

常见坋

  • 长行溢出。 如果你能改 CSS,加 pre { white-space: pre-wrap; };否则导出前手动换行。
  • Tab vs 空格。 PDF 对 Tab 宽度的处理会不一致,如果对齐重要,先转成空格。
  • 弯引号。 有些 Markdown 处理器会把反引号代码内的引号变智能弯引号,弄坏语法。禁用代码内智能引号(Pandoc:--from=markdown-smart)。
  • 注释里的 emoji。 许多 PDF 字体不含彩色 emoji,会变黑白轮廓或 ?。要出品可以先清掉代码注释中的 emoji。

常见问题

/markdown-to-pdf 支持 Prism / highlight.js 主题吗?

它默认 Prism,带一个为打印调优的主题。要指定主题,CLI 路线更灵活。看 五种方法对比

为什么预览是彩色的但 PDF 变单色了?

最常见原因是源页面的 print 样式表。浏览器打印会遵守 @media print 规则,这些规则经常重置颜色。/markdown-to-pdf 网页版不需要过 print 路径,所以没这个问题。

怎么保留行号?

网页工具默认不显示行号 —— 代码调试有用,分享时价值不高。如果你一定要,md-to-pdf CLI 加一个含 .hljs-ln-numbers 的 highlight.js 主题能保留。

打印 PDF 最好用什么主题?

GitHub Light。读者最熟悉(跟 GitHub.com README 一样),彩色黑白打印都顺眼,对比适度。

能批量转换还保留高亮吗?

能 —— 看 批量把 Markdown 转 PDF。CLI 方案最适合批量。

写在最后

要让 Markdown 转 PDF 保留代码高亮,选个走真实 Chromium 的工具就行。/markdown-to-pdf 免配置;npm CLI 允许逐文档控主题;其他都是便利与色彩保真度之间的权衡。

Markdown To Image | 保留代码高亮的 Markdown 转 PDF:怎么让语法色不丢 | MarkdownToImage