無料 Markdown → PDF コンバーター
ライブプレビュー付きでMarkdownをPDFに変換します。ページサイズと余白をカスタマイズします。完全にブラウザ内で動作します。
Markdownについて
Markdownは、プレーンテキストをフォーマットされたHTMLに変換する軽量マークアップ言語です。読み書きが容易なため、ドキュメンテーション、ブログ、技術文書で広く使用されています。
Markdown構文
- #、##、### · 見出し(h1、h2、h3)
- **テキスト** · 太字テキスト
- *テキスト* · 斜体テキスト
- [リンク](url) · ハイパーリンク
- - 項目 · 順序なしリスト
- 1. 項目 · 順序付きリスト
よくある質問
MarkdownでHTMLを使用できますか?
はい。MarkdownはインラインHTMLをサポートしているため、HTMLタグをMarkdownに直接埋め込むことができます。
どのページサイズがサポートされていますか?
A4、Letter、A3、A5がサポートされています。余白は0〜50ミリメートルで調整可能です。
PDF生成はクライアント側ですか?
はい。すべての変換はブラウザ内で行われます。Markdownがサーバーに送信されることはありません。
このコンバーターの仕組み
ブラウザベースのMarkdown→PDFツールは2段階のパイプラインを実行する。まずMarkdownソースがJavaScriptのMarkdownパーサーによってHTMLに解析される(このページはmarked.jsを使用している。MarkedJS組織が管理する小型・高速・MITライセンスのパーサーだ)。その結果がライブプレビューで表示されるHTMLだ。次に、そのHTMLがPDFに変換される。このページはhtml2pdf.jsを使用しており、2つのライブラリをラップしている:html2canvasが計算スタイルを読み取ってレンダリングされたDOMをオフスクリーンキャンバスに再描画し、jsPDFがそのキャンバス画像をPDFページオブジェクトに書き込んでファイルを保存する。
ライブラリ自体は公開CDNから読み込まれるが、MarkdownのパースとPDFの生成はすべてデバイス上で行われる。ブラウザがレンダラーで、ページから何も出ることはない。
PDFの小史
PDFはAdobeの共同創業者John Warnockが1991年に書いた内部提案から始まった。あらゆる画面、プリンター、OSで同じように見えるドキュメントを共有する方法を求めていた。その発端となった短い論文は「The Camelot Project」と題され、Adobeは1993年6月15日にAdobe Acrobat 1.0とともにPDF仕様の最初のバージョンを公開した。AdobeはPDF 1.7をISOに提出するまで15年間このフォーマットを管理した。ISO 32000-1:2008はPDFをライセンスなしで自由に使えるオープン標準にした。今日あらゆるツール、ブラウザ、OSがPDFを書き出せる理由を理解するうえで最も重要な日付だ。ISO 32000-2:2017(PDF 2.0)は改善されたデジタル署名、より良いUnicode処理、正式なアクセシビリティフックを追加した。2020年の修正版は2023年4月にPDF協会が無償ダウンロードできるようにし、最後のコスト障壁を取り除いた。
PDFは本質的に、ランダムアクセス用に配置されたオブジェクトの構造化コンテナであり、ベクターグラフィックス(直線とBézier(ベジェ)曲線)、ラスター画像(通常JPEGまたはzlib圧縮)、埋め込みフォント(Type 1、TrueType、OpenType)、そしてファイル全体をパースせずにどこへでもジャンプできるクロスリファレンステーブルで構成されている。知っておく価値のあるPDFのサブセット標準がいくつかある:PDF/A(アーカイブ用、ISO 19005、2005年、長期的な可読性を損なうものを禁止)、PDF/X(ロックされたカラーマネジメントを持つ印刷制作用)、PDF/UA(ユニバーサルアクセシビリティ、ISO 14289-1、2012年、読み取り順序、代替テキスト、Unicodeにマッピングされた埋め込みフォント、言語宣言を持つ完全タグ付きPDFを要求)。
ページサイズ
AシリーズはISO 216(1975年正式化、1922年のドイツDIN 476まで遡れる)に由来する。すべてのAサイズは同じ√2(≈ 1.414)のアスペクト比を持ち、A3の長辺を半分にするとA4が2枚無駄なく作れ、A4を半分にするとA5が2枚できる。A0はちょうど1 m²だ。北米サイズ(Letter、Legal、Tabloid)は√2を無視し、植民地時代の製紙慣習に由来する:
- A4:210 × 297 mm(8.3 × 11.7インチ)。北米以外のグローバルデフォルト。
- A3:297 × 420 mm(11.7 × 16.5インチ)。ポスター、見開き。
- A5:148 × 210 mm(5.8 × 8.3インチ)。小冊子、同人誌。
- Letter:8.5 × 11インチ(215.9 × 279.4 mm)。米国、カナダ、フィリピンのデフォルト。
デフォルトの10 mmマージンはMicrosoft Wordのデフォルト1インチ(25.4 mm)より狭いが、すべての列を収めたいコードや表が多いドキュメントではうまく機能する。
率直な注意事項:テキストは選択できない
コンバーターがHTMLをキャンバスにレンダリングしてPDF内に画像として埋め込むため、結果のテキストは選択不可、検索不可、スクリーンリーダー非対応だ。ブラウザが描画するものの忠実な画像だが、画像だ。レシピカード、ムードボード、印刷配布物のようなビジュアルアーティファクトには問題ないが、法的文書、採用担当者がキーワード検索したいレジュメ、アクセシビリティ監査(WCAG / Section 508 / EN 301 549)を通過する必要があるものには適していない。
選択可能なテキストやタグ付きPDFが必要なら、正しいツールはPandoc(LaTeXまたはwkhtmltopdfまたはweasyprint組み合わせ)またはタグ付けツールを持つAdobe Acrobat Proだ。Pandocは本格的なドキュメント制作のゴールドスタンダードで、HomebrewまたはChocolateyでインストール可能。コマンドラインから実行し、脚注、参考文献、引用、スマートクォート、適切なリガチャを備えたフルLaTeXグレードのタイポグラフィ制御を提供する。
ページ区切りの強制
html2pdf.jsはCSSの印刷フラグメンテーションプロパティに対応している。MarkdownではインラインHTMLを埋め込めるため、以下を貼り付けることでページ区切りを強制できる:
<div style="break-before: page;"></div>
従来のエイリアスpage-break-before: alwaysも機能する。その他の便利なプロパティ:break-inside: avoidをテーブルやコードブロックに使うとページをまたいで分割されることを防ぐ。orphansとwidowsはページの下部または上部でどれだけの行を一緒に維持する必要があるかを制御する。
クリーンな出力のためのヒント
- 巨大なラスター画像は避ける。フルページ写真1枚で数百キロバイト追加されることがある。埋め込む前に画像をリサイズするか、インラインスタイルで
max-widthを使ってレンダリングサイズを制限する。 - ページをまたいで分割させたくないテーブルは
<div style="break-inside: avoid">でラップする。 - コードブロックはモノスペースが必要。より具体的な指定がない場合、ブラウザはOSのモノスペースフォントを使用する。WindowsではConsolas、macOSではMenlo、LinuxではDejaVu Monoだ。出力はそれぞれで少し異なる。
- リアルなコンテンツ長でテストする。短いテストドキュメントは問題ないが、レイアウトが10ページ以上になると異なる見え方をすることがある。
- LetterとA4。米国の受信者と共有するならLetterを選ぶ。世界のその他の地域はA4を期待する。サイズが一致しなくても何も壊れないが、プリンターでわずかなマージン/スケールのずれが生じることがある。
この種の出力に使えるMarkdown
サポートされている構文はGitHub Flavored Markdownのサブセットで、見出し、太字と斜体、リスト、テーブル、シンプルなシンタックスハイライト付きコードブロック、ブロッククォート、リンクと画像だ。脚注とMermaidダイアグラムはこのビルドではサポートされていない。基本の簡単なリマインダー:
- 見出し:
# H1から###### H6まで。 - 太字と斜体:
**bold**、*italic*、***both***。 - リスト:番号なしリストは
- item、番号ありリストは1. item。 - リンクと画像:
[text](url)と。常にaltテキストを記載すること。 - テーブル:ハイフン区切り行を挟んだパイプ区切りの行。
- フェンスコードブロック:3つのバッククォートと任意の言語タグ。
- ブロッククォート:
> text。
Markdownの系譜についての補足:John GruberとAaron Swartzが2004年に「読みやすく書きやすいプレーンテキスト形式」として設計した。CommonMarkの標準化作業は2014年に始まり、John MacFarlane(Pandoc)、Jeff Atwood(Stack Overflow / Discourse)、そしてGitHub、Reddit、Meteorのエンジニアが主導した。GitHub Flavored MarkdownはCommonMarkのスーパーセットで、テーブル、打ち消し線、タスクリスト、オートリンクを追加している。
その他の質問
PDFのテキストがぼやけているのはなぜか?
コンバーターがブラウザの表示密度でページをラスタライズするためだ。非Retinaモニターでは、キャンバスが印刷の一般的な300 DPIではなく約96 DPIでキャプチャするため、ズームしたときに結果の画像がぼやけて見えることがある。修正方法は高い密度でレンダリングすること。html2canvasはscaleオプションを受け付け(通常Retina品質の出力には2×)、ファイルサイズが大きくなるのと引き換えだ。
コードブロックの色がハイライトされないのはなぜか?
marked.jsはデフォルトではシンタックスハイライトを同梱していない。フェンスブロックを<pre><code class="language-…">タグでラップするだけだ。本格的なハイライトにはPrism.jsやhighlight.jsのような別ライブラリが必要で、このビルドには含まれていない。PDFにはコードがモノスペースで表示されるが、GitHubで期待するような緑と赤のカラーテーマはない。
脚注や目次を含めることはできるか?
脚注([^1]参照と[^1]: definitions定義)はGFM標準の外にあるGitHubのレンダリング機能で、このビルドではパースされない。目次にはMarkdown拡張(markdown-itのTOCプラグインなど)かリストの手書きが必要だ。どちらも、--tocフラグを持つPandocが適切なツールだ。
PDFはアクセシビリティのためにタグ付けされるか?
いいえ。出力はセマンティックタグ、代替テキスト、読み取り順序ヒントのないページ画像のPDFで、PDF/UA適合チェックをパスしない。アクセシビリティが必要な業務(政府フォーム、公共セクターの文書、WCAG / EN 301 549 / Section 508の対象となるもの)には、Pandoc + LaTeXとアクセシビリティフィルター、Adobe Acrobat Proのタグ付けツール、またはサーバーサイドWeasyPrintパイプラインを使用すること。
何かサーバーに送信されるか?
いいえ。テキストはブラウザから出ることはない。Marked.jsがローカルでMarkdownをパースし、html2canvasがオフスクリーンキャンバスに描画し、jsPDFがPDFオブジェクトを構築し、ブラウザがそれを保存する。ライブラリ自体はサブリソースインテグリティチェック付きの公開CDNから読み込まれ、一度取得された後はキャッシュされる。ページが読み込まれた後はオフラインで動作する。