この拡張機能は Markdown ファイルを pdf、html、png、jpeg ファイルに変換します。
以下の機能をサポートしています。
サンプルファイル
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
OUTPUT
Markdown PDF をインストールして、Visual 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 を指定してください。
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-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-pdf.convertOnSave": true
オプションを追加しますVisual Studio Code User and Workspace Settings
markdown-pdf.*
の設定をコピーしますmarkdown-pdf.type
"markdown-pdf.type": [
"pdf",
"html",
"png",
"jpeg"
],
markdown-pdf.convertOnSave
markdown-pdf.convertOnSaveExclude
"markdown-pdf.convertOnSaveExclude": [
"^work",
"work.md$",
"work|test",
"[0-9][0-9][0-9][0-9]-work",
"work\\test" // 全ての \ は \\ と記述する必要があります。(Windows)
],
markdown-pdf.outputDirectory
\
は \\
と記述する必要があります (Windows)"markdown-pdf.outputDirectory": "C:\\work\\output",
Markdownファイル
を開いた場合、ファイルからの相対パスとして解釈されますフォルダ
を開いた場合、ルートフォルダからの相対パスとして解釈されますワークスペース
を開いた場合、それぞれのルートフォルダからの相対パスとして解釈されます
"markdown-pdf.outputDirectory": "output",
^
で始まっている場合、ホームディレクトリからの相対パスとして解釈されます"markdown-pdf.outputDirectory": "~/output",
相対パス
でディレクトリを設定した場合、ディレクトリが存在しなければ作成されます絶対パス
でディレクトリを設定した場合、ディレクトリが存在しなければエラーになりますmarkdown-pdf.outputDirectoryRelativePathFile
markdown-pdf.outputDirectoryRelativePathFile
オプションが true
に設定されている場合、markdown-pdf.outputDirectory で設定した相対パスは、ファイルからの相対パスとして解釈されますmarkdown-pdf.styles
\
は \\
と記述する必要があります (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"
],
"markdown-pdf.styles": [
"https://xxx/markdown-pdf.css"
],
markdown-pdf.stylesRelativePathFile
markdown-pdf.stylesRelativePathFile
オプションが true
に設定されている場合、markdown-pdf.styles で設定した相対パスは、ファイルからの相対パスとして解釈されますmarkdown-pdf.includeDefaultStyles
markdown-pdf.highlight
markdown-pdf.highlightStyle
"markdown-pdf.highlightStyle": "github.css",
markdown-pdf.breaks
markdown-pdf.emoji
markdown-pdf.executablePath
\
は \\
と記述する必要があります (Windows)"markdown-pdf.executablePath": "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe"
markdown-pdf.scale
"markdown-pdf.scale": 1
markdown-pdf.displayHeaderFooter
"markdown-pdf.headerTemplate": "",
"markdown-pdf.footerTemplate": "",
markdown-pdf.headerTemplate
markdown-pdf.displayHeaderFooter
を true
に設定する必要があります。<span class='date'></span>
: 日付。フォーマットは環境に依存します<span class='title'></span>
: Markdown ファイル名<span class='url'></span>
: Markdown フルパスファイル名<span class='pageNumber'></span>
: 現在のページ番号<span class='totalPages'></span>
: ドキュメントの総ページ数%%ISO-DATETIME%%
: 現在の日付と時刻。ISOベース フォーマット (YYYY-MM-DD hh:mm:ss
)%%ISO-DATE%%
: 現在の日付。ISOベース フォーマット (YYYY-MM-DD
)%%ISO-TIME%%
: 現在の時刻。ISOベース フォーマット (hh:mm:ss
)%%ISO-DATE%%
で表示します
"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; \">%%ISO-DATE%%</div>",
<span class='date'></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
"markdown-pdf.footerTemplate": "<div style=\"font-size: 9px; margin: 0 auto;\"> <span class='pageNumber'></span> / <span class='totalPages'></span></div>",
markdown-pdf.printBackground
markdown-pdf.orientation
markdown-pdf.pageRanges
"markdown-pdf.pageRanges": "1,4-",
markdown-pdf.format
"markdown-pdf.format": "A4",
markdown-pdf.width
markdown-pdf.height
"markdown-pdf.width": "10cm",
"markdown-pdf.height": "20cm",
markdown-pdf.margin.top
markdown-pdf.margin.bottom
markdown-pdf.margin.right
markdown-pdf.margin.left
"markdown-pdf.margin.top": "1.5cm",
"markdown-pdf.margin.bottom": "1cm",
"markdown-pdf.margin.right": "1cm",
"markdown-pdf.margin.left": "1cm",
markdown-pdf.quality
"markdown-pdf.quality": 100,
markdown-pdf.clip.x
markdown-pdf.clip.y
markdown-pdf.clip.width
markdown-pdf.clip.height
// 切り抜き領域のX軸の基点を指定します。ページの左上が原点です。
"markdown-pdf.clip.x": 0,
// 切り抜き領域のY軸の基点を指定します。ページの左上が原点です。
"markdown-pdf.clip.y": 0,
// 切り抜き領域の幅を指定します
"markdown-pdf.clip.width": 1000,
// 切り抜き領域の高さを指定します
"markdown-pdf.clip.height": 1000,
markdown-pdf.omitBackground
markdown-pdf.plantumlOpenMarker
markdown-pdf.plantumlCloseMarker
markdown-pdf.plantumlServer
docker run -d -p 8080:8080 plantuml/plantuml-server:jetty
plantuml/plantuml-server - Docker Hub
markdown-pdf.markdown-it-include.enable
markdown-pdf.mermaidServer
.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"/>
markdown-pdf.styles
optionMIT
and