Markdown は書くのには最適ですが、ドキュメントを送る相手は Web ページや PDF を期待していることがよくあります。うれしいことに、Markdown の変換はかんたんで、ほとんどの場合、複雑なツールチェーンは必要ありません。
ここでは、いちばん手軽な方法からいちばん細かく設定できる方法まで 4 つのやり方と、仕上がりをプロらしく見せるためのコツを紹介します。
ひと目で比較
| 方法 | HTML | インストール | 向いている用途 | |
|---|---|---|---|---|
| ブラウザーのエディターから出力 | ✅ | ✅（印刷） | 不要 | 日常のドキュメント、手早い共有 |
| VS Code + 拡張機能 | ✅ | ✅ | エディター + 拡張機能 | すでに VS Code で書いている人 |
| Pandoc | ✅ | ✅ | Pandoc（+ PDF エンジン） | 書籍、論文、自動化パイプライン |
| スクリプト（markdown-it、marked） | ✅ | — | Node.js | 独自の Web サイトやビルド工程 |
1. ブラウザーベースのエディターから出力する
いちばん速いのは、直接エクスポートできるエディターを使う方法です。Markdown Preview Editor で、オンライン版 または自分でホストしたコピーからドキュメントを開くか貼り付けて、ヘッダーのボタンを使います。
- HTML は単体で動作する 1 つの
.htmlファイルを作成します。スタイル、コードのハイライト、数式、図、そしてドキュメントと一緒に開いた画像が埋め込まれるので、どのパソコンでも正しく表示され、そのままメールに添付したりどこかにアップロードしたりできます。 - 印刷 はブラウザーの印刷ダイアログを開きます。送信先で PDF に保存 を選ぶと PDF が得られます。印刷されるのは表示されたドキュメントだけで、ツールバーやエディターは含まれません。
- 保存 は Markdown ソースを
.mdファイルとしてダウンロードします。
すべてブラウザー内で処理されるので、オンライン変換サービスにアップロードしたくないドキュメントにも使えます。
印刷ダイアログからきれいな PDF を作るには
- 余白 は、1 ページに入れたい文章量に応じて デフォルト か 最小 に設定します。
- ヘッダーとフッター をオフにすると、ページの端から日付と URL が消えます。
- コードブロックの背景や表の縞模様が欲しい場合は、背景のグラフィック をオンにします。
- 印刷には ライトテーマ を使いましょう。インクの節約になり、紙でも読みやすくなります。
2. VS Code と拡張機能
VS Code には Markdown のプレビュー機能が組み込まれていますが、エクスポートボタンはありません。Markdown PDF や Markdown Preview Enhanced などの拡張機能を入れると、HTML や PDF にエクスポートするコマンドが追加されます。すでに VS Code を使っているなら便利です。出力の見た目は拡張機能によって異なり、初回利用時にヘッドレスブラウザーをダウンロードするものもあります。
3. Pandoc — 万能の変換ツール
Pandoc は数十種類のフォーマット間で変換できるツールで、書籍、学術論文、ドキュメントの自動生成では定番です。インストールすれば、変換はコマンド 1 つで済みます。
bash# Markdown から完全な HTML ページへ
pandoc report.md -o report.html --standalone --metadata title="Report"
# Markdown から PDF へ（LaTeX ディストリビューションなどの PDF エンジンが必要）
pandoc report.md -o report.pdf --pdf-engine=xelatex
# どうしても必要なら Markdown から Word へ
pandoc report.md -o report.docx
--standalone を付けないと、Pandoc は HTML の断片だけを出力します。既存のページに挿入したいときに便利です。PDF の出力には別途エンジンが必要で、LaTeX ディストリビューションか、WeasyPrint のような HTML ベースのエンジンを使います。Pandoc の強みは細かい制御ができること。テンプレート、引用文献、セクション番号、相互参照などに対応しています。
4. 数行の JavaScript で変換する
Markdown が自分の Web サイトやビルド工程の一部なら、ライブラリを使うのがいちばん柔軟です。markdown-it を使った例：
jsimport MarkdownIt from 'markdown-it';
import { readFileSync, writeFileSync } from 'node:fs';
const md = new MarkdownIt({ linkify: true, typographer: true });
const body = md.render(readFileSync('README.md', 'utf8'));
writeFileSync('README.html', `<!doctype html><meta charset="utf-8"><title>README</title>${body}`);
プラグインで脚注、タスクリスト、数式などを追加できます。出力の安全性は入力しだいであることを忘れないでください。他人が書いた Markdown を扱う場合は、公開前に HTML をサニタイズしましょう（たとえば DOMPurify を使います）。
HTML・PDF 出力をよりよくするコツ
わかりやすいタイトルを 1 つ付ける
変換ツールは、ファイル名、最初の見出し、または明示的なメタデータからドキュメントのタイトルを取得します。すべてのドキュメントにわかりやすいファイル名と # の見出しを 1 つ付ければ、ダウンロードフォルダーやブラウザーのタブで、エクスポートした HTML や PDF をすぐに見分けられます。
画像はドキュメントの近くに置く
images/chart.png のような相対パスを使い、ファイルを同じフォルダーにまとめておきましょう。Markdown Preview Editor でフォルダーごと開けば、画像が解決されて HTML エクスポートに埋め込まれます。プレビューで読み込まれていないリモート画像は埋め込まれません。
改ページをコントロールする
Markdown には改ページの記法がありません。印刷用のドキュメントでは、大きなセクションを ## の見出しで始め、表は短めにしましょう。ブラウザーは表の行が分割されないようにしますが、巨大な表はやはり次のページに続きます。Pandoc のように生の HTML とインラインスタイルが使えるツールでは、<div style="page-break-after: always"></div> を挿入できます。
エクスポート前に数式と図を確認する
多くのツールでは、数式と図は JavaScript ライブラリで描画されます。まずプレビューで確認しましょう。ガイド Markdown で数式を書く方法 と Mermaid 図 も参考にしてください。Markdown Preview Editor の HTML エクスポートでは、これらは描画済みのマークアップと画像として保存されるため、エクスポートしたファイルにスクリプトは必要ありません。
テーマは意識して選ぶ
ダークテーマの HTML は画面では快適ですが、紙には向きません。読み手が使う媒体に合わせてエクスポートしましょう。
よくある質問
Markdown を無料で PDF に変換するには？
Markdown Preview Editor などの Markdown プレビューアーでドキュメントを開き、印刷 をクリックして、印刷ダイアログで PDF に保存 を選びます。自動化したい場合や書籍形式の出力には、無料のコマンドラインツール Pandoc を使いましょう。
何もインストールせずに Markdown を HTML に変換するには？
HTML エクスポート機能のあるブラウザーベースのエディターを使います。Markdown Preview Editor なら、スタイルを含んだ単体で動作する HTML ファイルをブラウザー上で直接作成できます。
エクスポートした HTML に画像は含まれますか？
ドキュメントと一緒に開いたローカル画像は HTML ファイルに埋め込まれるので、ファイル単体で表示できます。リモートサーバー上の画像は埋め込まれません。
Markdown を Word（DOCX）に変換できますか？
はい、Pandoc を使えば pandoc input.md -o output.docx で変換できます。あるいは HTML にエクスポートして Word で開く方法もあり、書式の大部分が保たれます。