この拡張機能は Markdown ファイルを pdf、html、png、jpeg ファイルに変換します。
以下の機能をサポートしています。
- Syntax highlighting
- emoji
- markdown-it-checkbox
- markdown-it-container
- markdown-it-include
- PlantUML
- mermaid
サンプルファイル
INPUT
::: warning
*here be dragons*
:::
OUTPUT
<div class="warning">
<p><em>here be dragons</em></p>
</div>INPUT
@startuml
Bob -[#red]> Alice : hello
Alice -[#0000FF]->Bob : ok
@enduml
OUTPUT
Include markdown fragment files: :[alternate-text](relative-path-to-file.md).
├── [plugins]
│ └── README.md
├── CHANGELOG.md
└── README.md
INPUT
README Content
:[Plugins](./plugins/README.md)
:[Changelog](CHANGELOG.md)
OUTPUT
Content of README.md
Content of plugins/README.md
Content of CHANGELOG.md
INPUT
```mermaid
stateDiagram
[*] --> First
state First {
[*] --> second
second --> [*]
}
```
OUTPUT
Markdown PDF をインストールして、Visutal Studio Code で Markdownファイルを最初に開いた時、Chromium のダウンロードが自動で始まります。
しかしサイズが大きい為 (~170Mb Mac, ~282Mb Linux, ~280Mb Win) 、環境によっては時間がかかります。
ダウンロード中は、ステータスバーに Installing Puppeteer のメッセージが表示されます。
もしプロキシを使う必要がある場合、settings.json に http.proxy でプロキシを設定し、Visual Studio Code を再起動してください。
ダウンロードが上手くいかない場合や、Markdown PDF のバージョンアップの度にダウンロードするのを避けたい場合、markdown-pdf.executablePath オプションでインストール済みの Chrome か Chromium を指定してください。
- Markdown ファイルを開きます
F1キーを押すか、Ctrl+Shift+Pキーを入力しますexportと入力し以下を選択しますmarkdown-pdf: Export (settings.json)markdown-pdf: Export (pdf)markdown-pdf: Export (html)markdown-pdf: Export (png)markdown-pdf: Export (jpeg)markdown-pdf: Export (all: pdf, html, png, jpeg)
- Markdown ファイルを開きます
- 右クリックして以下を選択します
markdown-pdf: Export (settings.json)markdown-pdf: Export (pdf)markdown-pdf: Export (html)markdown-pdf: Export (png)markdown-pdf: Export (jpeg)markdown-pdf: Export (all: pdf, html, png, jpeg)
- settings.json に
"markdown-pdf.convertOnSave": trueオプションを追加します - Visual Studio Code を再起動します
- Markdown ファイルを開きます
- 保存すると自動で変換されます
Visual Studio Code User and Workspace Settings
- メニューから ファイル > 基本設定 > ユーザー設定 か ワークスペース設定 を選択します
- 既定の設定 から markdown-pdf の設定を探します
markdown-pdf.*の設定をコピーします- settings.json に貼り付け、値を変更します
- 出力フォーマット: pdf, html, png, jpeg
- 複数の出力フォーマットをサポート
- Default: pdf
"markdown-pdf.type": [
"pdf",
"html",
"png",
"jpeg"
],- 保存時の自動変換を有効にします
- boolean. Default: false
- 設定の反映には、Visutal Studio Code の再起動が必要です
- convertOnSave オプションの除外ファイル名を指定します
"markdown-pdf.convertOnSaveExclude": [
"^work",
"work.md$",
"work|test",
"[0-9][0-9][0-9][0-9]-work",
"work\\test" // 全ての \ は \\ と記述する必要があります。(Windows)
],- 出力ディレクトリを指定します
- 全ての
\は\\と記述する必要があります (Windows)
"markdown-pdf.outputDirectory": "C:\\work\\output",- 相対パス
Markdownファイルを開いた場合、ファイルからの相対パスとして解釈されますフォルダを開いた場合、ルートフォルダからの相対パスとして解釈されますワークスペースを開いた場合、それぞれのルートフォルダからの相対パスとして解釈されます- マルチルート ワークスペース を参照してください
"markdown-pdf.outputDirectory": "output",- 相対パス (ホームディレクトリ)
- パスが
^で始まっている場合、ホームディレクトリからの相対パスとして解釈されます
- パスが
"markdown-pdf.outputDirectory": "~/output",相対パスでディレクトリを設定した場合、ディレクトリが存在しなければ作成されます絶対パスでディレクトリを設定した場合、ディレクトリが存在しなければエラーになります
markdown-pdf.outputDirectoryRelativePathFileオプションがtrueに設定されている場合、markdown-pdf.outputDirectory で設定した相対パスは、ファイルからの相対パスとして解釈されます- フォルダやワークスペースからの相対パスを避けたい場合に使うことが出来ます
- boolean. Default: false
- markdown-pdf で使用するスタイルシートのパスを指定します
- ファイルが存在しない場合、スキップされます
- 全ての
\は\\と記述する必要があります (Windows)
"markdown-pdf.styles": [
"C:\\Users\\<USERNAME>\\Documents\\markdown-pdf.css",
"/home/<USERNAME>/settings/markdown-pdf.css",
],- 相対パス
Markdownファイルを開いた場合、ファイルからの相対パスとして解釈されますフォルダを開いた場合、ルートフォルダからの相対パスとして解釈されますワークスペースを開いた場合、それぞれのルートフォルダからの相対パスとして解釈されます- マルチルート ワークスペース を参照してください
"markdown-pdf.styles": [
"markdown-pdf.css",
],- 相対パス (ホームディレクトリ)
- パスが
^で始まっている場合、ホームディレクトリからの相対パスとして解釈されます
- パスが
"markdown-pdf.styles": [
"~/.config/Code/User/markdown-pdf.css"
],- オンラインCSS (https://xxx/xxx.css) は JPG と PNG では正しく適用されますが、PDF では問題が発生します #67
"markdown-pdf.styles": [
"https://xxx/markdown-pdf.css"
],markdown-pdf.stylesRelativePathFileオプションがtrueに設定されている場合、markdown-pdf.styles で設定した相対パスは、ファイルからの相対パスとして解釈されます- フォルダやワークスペースからの相対パスを避けたい場合に使うことが出来ます
- boolean. Default: false
- デフォルトのスタイルシート(VSCode, markdown-pdf)を有効にします
- boolean. Default: true
- Syntax highlighting を有効にします
- boolean. Default: true
- スタイルシートのファイル名を指定します。例: github.css, monokai.css ...
- ファイル名のリスト
- highlight.js demo
"markdown-pdf.highlightStyle": "github.css",- 改行を有効にします
- boolean. Default: false
- 絵文字を有効にします EMOJI CHEAT SHEET
- boolean. Default: true
- バンドルされた Chromium の代わりに実行する Chromium または Chrome のパスを指定します
- 全ての
\は\\と記述する必要があります (Windows) - 設定の反映には、Visutal Studio Code の再起動が必要です
"markdown-pdf.executablePath": "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe"- ページレンダリングのスケール
- number. default: 1
"markdown-pdf.scale": 1- pdf only. puppeteer page.pdf options
- ヘッダーとフッター表示を有効にします
- boolean. Default: true
- ヘッダーとフッターを出力する為のHTMLテンプレートを指定します
<span class='date'></span>: 日付<span class='title'></span>: Markdown ファイル名<span class='url'></span>: Markdown フルパスファイル名<span class='pageNumber'></span>: 現在のページ番号<span class='totalPages'></span>: ドキュメントの総ページ数
"markdown-pdf.headerTemplate": "<div style=\"font-size: 9px; margin-left: 1cm;\"> <span class='title'></span></div> <div style=\"font-size: 9px; margin-left: auto; margin-right: 1cm; \"> <span class='date'></span></div>","markdown-pdf.footerTemplate": "<div style=\"font-size: 9px; margin: 0 auto;\"> <span class='pageNumber'></span> / <span class='totalPages'></span></div>",- 背景のグラフィックを出力
- boolean. Default: true
- ページの向き
- portrait(縦向き) or landscape(横向き)
- Default: portrait
- 出力するページ範囲 例) '1-5, 8, 11-13'
- Default: 全ページ
"markdown-pdf.pageRanges": "1,4-",- 用紙のフォーマット
- Letter, Legal, Tabloid, Ledger, A0, A1, A2, A3, A4, A5, A6
- Default: A4
"markdown-pdf.format": "A4",- 用紙の幅/高さ、 単位(mm, cm, in, px)
- このオプションが指定されている場合、markdown-pdf.format オプションより優先されます
"markdown-pdf.width": "10cm",
"markdown-pdf.height": "20cm",- 用紙の余白、単位(mm, cm, in, px)
"markdown-pdf.margin.top": "1.5cm",
"markdown-pdf.margin.bottom": "1cm",
"markdown-pdf.margin.right": "1cm",
"markdown-pdf.margin.left": "1cm",- png and jpeg only. puppeteer page.screenshot options
- jpeg only. イメージの品質を 0-100 の範囲で指定します。 png では無効です。
"markdown-pdf.quality": 100,- ページの切り抜き領域を指定します
- number
// 切り抜き領域のX軸の基点を指定します。ページの左上が原点です。
"markdown-pdf.clip.x": 0,
// 切り抜き領域のY軸の基点を指定します。ページの左上が原点です。
"markdown-pdf.clip.y": 0,
// 切り抜き領域の幅を指定します
"markdown-pdf.clip.width": 1000,
// 切り抜き領域の高さを指定します
"markdown-pdf.clip.height": 1000,- デフォルトの白い背景ではなく、透過によるスクリーンショットのキャプチャーを有効にします
- boolean. Default: false
- plantuml パーサーの開始区切り文字
- Default: @startuml
- plantuml パーサーの終了区切り文字
- Default: @enduml
- markdown-it-include を有効にします
- boolean. Default: true
- 以下の設定を markdown-pdf.styles で指定したスタイルシートに追加します。
.emoji {
height: 2em;
}Visual Studio Code の files.autoGuessEncoding オプションを使うと、文字コードが自動判定されるので便利です。
"files.autoGuessEncoding": true,常に Markdown ファイルからの相対パスのディレクトリに出力したい場合。
例えば、Markdown ファイルと同じディレクトリの "output"ディレクトリに出力する場合、次のように設定してください。
"markdown-pdf.outputDirectory" : "output",
"markdown-pdf.outputDirectoryRelativePathFile": true,改ページを挿入するには、以下を使用してください。
<div class="page"/>- オンラインCSS (https://xxx/xxx.css) は JPG と PNG では正しく適用されますが、PDF では問題が発生します #67
- Fix: "ReferenceError: MarkdownPdf is not defined" on auto create PDF on save in VSCodium #156
MIT
- GoogleChrome/puppeteer
- markdown-it/markdown-it
- mcecot/markdown-it-checkbox
- leff/markdown-it-named-headers
- markdown-it/markdown-it-emoji
- HenrikJoreteg/emoji-images
- isagalaev/highlight.js
- cheeriojs/cheerio
- janl/mustache.js
- markdown-it/markdown-it-container
- gmunguia/markdown-it-plantuml
- camelaissani/markdown-it-include
- knsv/mermaid
and