パブリックAPIが利用可能になりました!MarkdownをAPIで画像に変換、毎月50回まで無料。
ブログに戻る
1970年1月1日木曜日

コードハイライトを保持した Markdown PDF 変換: 色を残す方法

コードハイライトを保持した Markdown PDF 変換: 色を残す方法

短い答え

Markdown を PDF にしてコードハイライト(色、フォント、行番号)を保ちたいなら、headless Chromium ベースのツールを使いましょう。当サイトの /markdown-to-pdf は設定不要で動きます — コードブロックは Prism / highlight.js のフル色、等幅フォント、適切な折り返しでレンダリングされ、PDF がプレビューと一致します。

以下では、なぜ多くの Markdown → PDF ツールが色を落とすのか、色を保つために揃えるべき 3 つのこと、主要ツールの表現を説明します。

Markdown PDF でハイライトが消える理由

よくある 3 つの失敗パターン:

  1. レンダラーがそもそもハイライトしていない。 裸の pandoc input.md -o output.pdf は Listings/Skylighting を使うため、色が古い・コントラスト低。--highlight-style なしだとモノクロもあり得る。
  2. ハイライターは走ったが印刷 CSS に潰された。 ブラウザの ⌘+P で多くのサイトは color: black !important をプリントスタイルシートでリセットします。コードブロックは黒一色になり、読めるが構造が見えない。
  3. PDF エンジンが色を除去した。 古い PDF ライブラリはプリンタープロファイルによってグレースケールに圧縮します。リンクは青のままだがコードは緑/オレンジを失う、など。

Markdown をエクスポートしてコードがモノクロになるなら、ほぼこれらのいずれかです。

揃えるべき 3 つのこと

PDF にハイライトを保持するのは鎖です。どこか一つでも切れると色は生き残りません:

  1. 本物のシンタックスハイライターがソースをレンダリングする。 Prism、highlight.js、Shiki、Pandoc の Skylighting。なければコードはただの等幅テキストです。
  2. テーマが印刷パスを生き残る。 ツールが画面レンダリングをそのまま出力(headless Chromium)するか、色をリセットしない印刷スタイルシートを持つか。
  3. フォントと色がテーマの意図に合う。 ダークテーマ(Dracula、One Dark)を白い紙に印刷するとひどく、ライトテーマ(GitHub Light、Solarized Light)は印刷しても見やすい。

ブラウザベースはデフォルトで 3 つとも満たします — 画面レンダリングと PDF は同じ Chromium スナップショットだから。

方法別比較

/markdown-to-pdf(ウェブ)

headless Chromium でプレビューをそのまま PDF に。コードブロックはデフォルトで Prism、印刷調整済みライトテーマ。長い行はソフトラップしてページからはみ出さない。インライン code は背景と等幅フォントを保持。

評:設定なしで動作。

md-to-pdf(npm CLI)

同じく headless Chromium ベース。highlight.js テーマは YAML front-matter で制御:

---
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

Skylighting を使用(highlight.js / Prism ではない)。Web 標準では色が古い。--highlight-style=tango(や pygmentskate)でパレット変更可だが、現代的な Web テーマと完全一致するセットはない。

Pandoc で Web 風テーマを欲しいなら、一旦 HTML にしてブラウザで印刷するのが近道:

pandoc input.md -o output.html --highlight-style=pygments --self-contained

評:動くが間接的。

ブラウザ印刷

印刷スタイルシート次第。github.com は色をそこそこ保つが、ドキュサイトによっては激しく除去される。重要な納品前にテストしましょう。

評:運任せ。

印刷でよさそうなテーマ選び

  • ライトテーマが印刷では良い。 GitHub Light、Solarized Light、Atom One Light。
  • 高彩度色を避ける。 純赤/純緑は紙では乾き型。Solarized Light、Tomorrow など低彩度パレットが読みやすい。
  • まず行番号なしでテスト。
  • 等幅フォントに注意。 Inter、JetBrains Mono、Fira Code は安全。

よくある落とし穴

  • 長行がはみ出す。 CSS を制御できるなら pre { white-space: pre-wrap; }、さもないと手動で折る。
  • Tab vs スペース。 PDF の Tab 幅は一定ではないため、整列が重要ならスペースに正規化。
  • スマートクオート。 バックティック内の引用符をタイポグラフィ調に変えるプロセッサーも — Pandoc なら --from=markdown-smart
  • コメント内の絵文字。 多くの PDF フォントはカラー絵文字を含まず、輪郭や ? になる。

よくある質問

/markdown-to-pdf は Prism / highlight.js テーマをサポートしますか?

デフォルトで Prism を使い、印刷調整済みテーマを同梱。特定テーマが必要なら CLI 路線が柔軟。5 つの方法を比較 を参照。

プレビューはカラーだが PDF はモノクロになるのはなぜ?

多くの場合、元ページの印刷スタイルシートが原因。ブラウザ印刷は @media print ルールを詳しく遵謌し、そこがしばしば色をリセットします。Web 版 /markdown-to-pdf はそのパスを通らないため問題なし。

PDF に行番号を保つには?

Web ツールはデフォルトで表示しません。必要なら md-to-pdf CLI と .hljs-ln-numbers を含む highlight.js テーマで保持できます。

印刷用 PDF に最適なテーマは?

GitHub Light。読者に馴染みがあり、カラーと 白黒の両方で見やすい。

バッチ変換でもハイライトを保てる?

はい — 複数の Markdown を PDF にバッチ変換。CLI 方法がバッチに適しています。

まとめ

Markdown → PDF でコードハイライトを保つのは、本物の Chromium を使うツールなら直接です。/markdown-to-pdf は設定不要、npm CLI はドキュメント単位のテーマ制御可、それ以外は便利さと色の忠実度のトレードオフです。

コードハイライトを保持した Markdown PDF 変換(色を残す) | MarkdownToImage