{"id":20738488,"url":"https://github.com/led-mirage/markdown-pdf-guide","last_synced_at":"2026-05-08T00:31:45.956Z","repository":{"id":193805267,"uuid":"689494948","full_name":"led-mirage/Markdown-PDF-Guide","owner":"led-mirage","description":"MarkdownをPDFに変換する方法に関する資料です","archived":false,"fork":false,"pushed_at":"2023-09-11T12:44:48.000Z","size":873,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-11T11:37:03.818Z","etag":null,"topics":["guide","markdown","markdown-pdf","markdown-to-pdf","md-to-pdf","pdf"],"latest_commit_sha":null,"homepage":"","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/led-mirage.png","metadata":{"files":{"readme":"Readme.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-09-10T01:37:38.000Z","updated_at":"2023-09-10T04:16:39.000Z","dependencies_parsed_at":null,"dependency_job_id":"ee6f0c8a-a08f-4598-933b-50565737fec3","html_url":"https://github.com/led-mirage/Markdown-PDF-Guide","commit_stats":null,"previous_names":["led-mirage/markdown-pdf-guide"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/led-mirage/Markdown-PDF-Guide","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/led-mirage%2FMarkdown-PDF-Guide","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/led-mirage%2FMarkdown-PDF-Guide/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/led-mirage%2FMarkdown-PDF-Guide/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/led-mirage%2FMarkdown-PDF-Guide/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/led-mirage","download_url":"https://codeload.github.com/led-mirage/Markdown-PDF-Guide/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/led-mirage%2FMarkdown-PDF-Guide/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266031469,"owners_count":23866764,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["guide","markdown","markdown-pdf","markdown-to-pdf","md-to-pdf","pdf"],"created_at":"2024-11-17T06:18:39.978Z","updated_at":"2026-05-08T00:31:40.930Z","avatar_url":"https://github.com/led-mirage.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# MarkdownをPDFにする方法\n\nCreated on September 10, 2023  \nUpdated on September 11, 2023  \nCopyright (c) 2023 led-mirage  \n\n## はじめに\n\nこの資料では Markdown ファイルを PDF ファイルに変換する方法について説明します。\n\n## 目次\n\n- [1. Visual Studio Code の拡張機能を使う方法](#1-visual-studio-code-の拡張機能を使う方法)\n  - [1-1. 動作確認](#1-1-動作確認)\n  - [1-2. インストール](#1-2-インストール)\n  - [1-3. 使い方](#1-3-使い方)\n  - [1-4. 康煕（こうき）部首の問題](#1-4-康煕こうき部首の問題)\n- [2. Node.js の md-to-pdf パッケージを使う方法](#2-nodejs-の-md-to-pdf-パッケージを使う方法)\n  - [2-1. 動作確認](#2-1-動作確認)\n  - [2-2. インストール](#2-2-インストール)\n  - [2-3. 使い方](#2-3-使い方)\n- [3. まとめ](#3-まとめ)\n- [4. OSS](#4-oss)\n- [5. 参考リンク](#5-参考リンク)\n\n\u003cdiv class=\"page\"/\u003e\n\n## 1. Visual Studio Code の拡張機能を使う方法\n\nVisual Studio Code の拡張機能 `Markdown PDF(z)` で Markdown ファイルを PDF ファイルに変換できます。\n\n### 1-1. 動作確認\n\n以下の動作環境で動作確認をしました。\n\n- Windows 11 Pro 22H2\n- Raspberry Pi 4B 4GB\n- Visual Studio Code 1.82.0\n- Markdown PDF(z) v2.0.3\n\n### 1-2. インストール\n\nVisual Studio Code の Marketplace で `markdown pdf` と検索すると、先頭に `Markdown PDF` が見つかり、その他同じアイコンの拡張機能があと２つほど表示されると思います（2023年9月現在）。\n\n1. Markdown PDF\n2. Markdown PDF(z)\n3. Markdown PDF(m)\n\nこの中でインストールすべきは、２番めの **`Markdown PDF(z)`** です。本家は１番目の `Markdown PDF` で、あとの２つは本家から分岐した Fork なのですが、本家と３番目のプログラムは後述する康煕（こうき）部首の問題の問題を含んでいます。また、本家は Windows なら動いたのですが、ラズパイで PDF を生成しようとするとエラーが発生しました。これについても **`Markdown PDF(z)`** では問題なく生成できました。\n\n以上のことから、インストールすべきなのは **`Markdown PDF(z)`** と言う結論に至りました。ただ、本家のほうが安心できる、康煕（こうき）部首の問題なんて気にならない、という方は本家を使ってもいいと思います。\n\n### 1-3. 使い方\n\nエディタ上の Markdown ファイルを右クリックして `Markdown PDF: Export(pdf)` を選択すると PDF ファイルが生成されます。簡単ですね。\n\n**`Markdown PDF(z)`** は PDF 化のほか、HTML や画像データへの変換もサポートしています。\n\n\u003cdiv class=\"page\"/\u003e\n\n#### 1-3-1. スタイル\n\nヘッダー、フッターなどのスタイルの設定は拡張機能の設定画面から行えます。拡張機能の設定は、各拡張機能の右下の歯車アイコンをクリックし、「拡張機能の設定」を選択することで表示できます。\n\nより詳細なスタイルは CSS ファイルを追加することで調整可能です。例えばGitHub風のスタイルにしたい場合、次の手順を実行します。\n\n1. [ここ※1](https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/5.2.0/github-markdown.css)から CSS をダウンロードし、github-markdown.css ファイルに保存する（ファイル名は任意）\n2. ファイル中の \".markdown-\" という文字列をすべて削除する（空文字で置換）\n3. \"white-space: pre;\" を \"white-space: pre-wrap;\" に変更する（変更しないとプログラムコードが途中で途切れる）\n4. 拡張機能の設定画面で、`Include Default Styles` のチェックを外す\n5. 拡張機能の設定画面で、`Styles` に作成した CSS ファイルのパスを追加するする\n\n※1 https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/5.2.0/github-markdown.css\n\n拡張機能の設定はグローバルかワークスペース内に保存でき、ワークスペースの場合は `.vscode/settings.json` に次のような設定が保存されます。\n\n```json\n{\n    \"markdown-pdf.includeDefaultStyles\": false,\n    \"markdown-pdf.styles\": [\n        \"./github-markdown.css\"\n    ],\n}\n```\n\nまた、本リポジトリ内にも編集済みの [github-markdown.css](https://github.com/led-mirage/Markdown-PDF-Guide/blob/main/github-markdown.css) を用意しましたので、よかったらご利用ください。\n\n#### 1-3-2. 改ページ\n\n改ページしたい個所で以下のタグを挿入します。\n\n```html\n\u003cdiv class=\"page\"/\u003e\n```\n\n\u003cdiv class=\"page\"/\u003e\n\n### 1-4. 康煕（こうき）部首の問題\n\n本家および３番めの拡張機能だと、特定の文字が康煕（こうき）部首に変換されてしまいます。康煕部首とは部首を表す特殊な漢字コードで、普通の漢字が誤って康煕部首に変換されてしまうと、アプリケーションによっては文字化けを引き起こしてしまいます。\n\nWord や Excel などの表示では普通の漢字と見分けがつかないこともあるため、一見無害の様にも思えますが、これが２次利用された場合（たとえばデータベースのマスタデータとして登録してしまうなど）、気づかないうちに被害が拡大してしまします。\n\n例えば「自分用」という単語を本家で PDF に変換すると \"自\" と \"分\" が康煕部首になってしまいます。PDF になった「自分用」をエディタなどに貼り付けて、その下に手入力で「自分用」と書いてみれば違いがわかると思います。見た目ではわからない場合、手書きの文字をコピーして文書内を検索してみてください。PDF から貼り付けた文字とは一致しないはずです。\n\n※ 検証に使用した本家 Markdown PDF は v1.5.0 です。\n\nこのように康煕部首の問題は根深いものがあるため、個人的には可能な限り排除したほうがいいと考えています。ネットで「康煕部首」で検索すると色々な情報が出てくるので、興味がある方は調べてみてください。\n\n\u003cdiv class=\"page\"/\u003e\n\n## 2. Node.js の md-to-pdf パッケージを使う方法\n\nNode.js の md-to-pdf パッケージでも Markdown ファイルを PDF ファイルに変換できます。\n\n実行にはあらかじめ Node.js をインストールしておく必要があります。Node.js のインストールは、Windows であれば[公式サイト](https://nodejs.org/ja)からダウンロードしてインストールすればＯＫです。ラズパイなど、Linux系のOSであれば、コマンドでインストールできると思います。\n\nまた、Node.js を直接インストールするのではなく、nvm などのバージョン管理ツールを先にインストールし、nvm 経由で Node.js をインストールしてもいいでしょう。バージョン管理ツールを使うと、Node.js 複数のバージョンを簡単に切り替えることができて便利です。\n\n### 2-1. 動作確認\n\n以下の動作環境で動作確認をしました。\n\n- Windows 11 Pro 22H2\n- node.js v18.17.1\n- md-to-pdf 5.2.4\n\n※ラズパイでも試しましたが、エラーが出てうまく動きませんでした。\n\n### 2-2. インストール\n\n次のコマンドで md-to-pdf パッケージをグローバルにインストールします。\n\n```bash\nnpm i -g md-to-pdf\n```\n\n### 2-3. 使い方\n\nターミナル（コマンドライン）から次のコマンドを入力します。\n\n```bash\nmd-to-pdf \"ファイル名\"\n```\n\n\u003cdiv class=\"page\"/\u003e\n\n#### 2-3-1. スタイル\n\nドキュメントの先頭に次のようなブロックを挿入することでスタイルを制御できます。詳しくは資料末の公式サイトを参考にしてください。\n\n```txt\n---\npdf_options:\n  format: a4\n  margin: 20mm 20mm\n  printBackground: true\n  headerTemplate: |-\n    \u003cstyle\u003e\n      section {\n        margin: 5mm 15mm;\n        font-family: system-ui;\n        font-size: 10px;\n        color: silver;\n      }\n    \u003c/style\u003e\n    \u003csection\u003e\n      \u003cspan class=\"title\"\u003e\u003c/span\u003e\n      \u003cspan class=\"date\"\u003e\u003c/span\u003e\n    \u003c/section\u003e\n  footerTemplate: |-\n    \u003csection style=\"margin: 0 auto;\"\u003e\n      \u003cdiv\u003e\n        Page \u003cspan class=\"pageNumber\"\u003e\u003c/span\u003e\n        of \u003cspan class=\"totalPages\"\u003e\u003c/span\u003e\n      \u003c/div\u003e\n    \u003c/section\u003e\nstylesheet: https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/5.2.0/github-markdown.min.css\nbody_class: markdown-body\ncss: |-\n  .page-break { page-break-after: always; }\n  .markdown-body { font-size: 16px; }\n  .markdown-body pre \u003e code { white-space: pre-wrap; }\n  .markdown-body pre { background: #eee; }\n  .markdown-body pre { padding: 5px; }\n---\n```\n\n\u003cdiv class=\"page\"/\u003e\n\n#### 2-3-2. 改ページ\n\n改ページしたい個所で以下のタグを挿入します。\n\n```html\n\u003cdiv class=\"page-break\"\u003e\u003c/div\u003e\n```\n\n## 3. まとめ\n\n康煕部首の問題があったため Markdown PDF の使用は避けてきましたが、Markdown PDF(z) ではこの問題が解消されているので、これを使うのが一番手軽でいいかもしれません。\n\nmd-to-pdf にも大変お世話になりましたが、ひとつ難点を上げるとすると文章の先頭にヘッダー、フッターやスタイルを記述する形式のため、文章が汚れる点があげられるでしょうか。\n\nどちらも便利なツールなので好みに合わせて使い分ければいいと思います。\n\n## 4. OSS\n\n本資料では以下のリポジトリの github-markdown.css を改変して使用しています。\n\n[github-markdown-css](https://github.com/sindresorhus/github-markdown-css)\n\n\n## 5. 参考リンク\n\n[Markdown PDF(z) GitHub 公式サイト](https://github.com/Ziv-Android/vscode-markdown-pdf#markdown-pdfstyles)\n\n[md-to-pdf GitHub 公式サイト](https://github.com/simonhaenisch/md-to-pdf)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fled-mirage%2Fmarkdown-pdf-guide","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fled-mirage%2Fmarkdown-pdf-guide","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fled-mirage%2Fmarkdown-pdf-guide/lists"}