Visual Studio Code TIPS：VS CodeでMarkdownをHTMLやPDFに変換するには？

Markdown PDF拡張機能を使用して、MarkdownテキストをHTMLやPDFに変換する方法や、ファイル保存時に自動変換を行うための設定を説明する。

連載「Visual Studio Code TIPS」

　Visual Studio Code（以下、VS Code）はデフォルトでMarkdown記法を使って記述されたドキュメントをサポートしている。が、それをHTMLやPDFに変換する機能までは持っていない。MarkdownをHTMLやPDFに変換するには、拡張機能を利用するのが簡単だ。

Markdown PDF拡張機能

　VS CodeにはMarkdownをHTMLやPDFに変換する機能は備わっていない。そのため、例えば、HTMLに変換するにはmarkdown-itなどのツールを手作業でインストールして、「Compiling Markdown into HTML」ページに書かれている手順を自分で実行してもよいが、拡張機能を使った方が簡単だ。

　MarkdownをHTMLやPDFに変換してくれる拡張機能としてはyzane氏による「Markdown PDF」がある。この拡張機能をインストールしてしまえば、後はコマンドパレットから［Markdown PDF: Export (XXX)］コマンドを実行するだけで、HTMLやPDF、PNG、JPEG形式のファイルに変換できる（「XXX」には変換先のフォーマットに応じて「html」「pdf」などが入る）。

Markdown PDF拡張機能

　まずはこの拡張機能をインストールしておこう。

MarkdownをHTMLやPDFに変換するには？

　HTMLに変換したいMarkdownをVS Code上でアクティブにしてから、コマンドパレットで「export」などと入力し、［Markdown PDF: Export (html)］コマンドを実行すればよい。

コマンドパレットから［Markdown PDF: Export (html)］コマンドを実行

　PDFに変換するには、もちろん［Markdown PDF: Export (pdf)］コマンドを実行すればよい。

　なお、上の画像を見ると分かる通り、Markdown PDFはHTML、PDF以外にもPNG／JPEG形式のファイルへの変換もサポートしている。［Markdown PDF: Export (all: pdf, html, png, jpeg)］コマンドは全ての出力形式への変換を行うもので、［Markdown PDF: Export (settings.json)］コマンドは、ユーザー設定／ワークスペース設定のmarkdown-pdf.type項目（後述）で指定されている出力形式への変換を行うものだ。

　あるいは、エディタ（タブ）に表示しているMarkdownを右クリックして、コンテキストメニューから適切なものを選択してもよい。

コンテキストメニューから変換方法を選択してもよい

ファイルの保存と同時にHTMLやPDFへ変換するには？

　ここまでに見てきたように、コマンドパレットやコンテキストメニューから明示的にMarkdownをHTMLやPDFに変換することもできるが、Markdownファイルの保存時に自動的に変換を行うように設定することも可能だ。

　これは、ユーザー設定あるいはワークスペース設定で指定する。設定する項目は次の2つだ。

　markdown-pdf.type項目には、"pdf"（デフォルト）、"html"、"png"、"jpeg"を配列要素として指定していく。markdown-pdf.convertOnSave項目にはtrueかfalseのいずれかを指定する（デフォルト値はfalse）。以下に設定例を示す。

　この例では、変換先のフォーマットとして"pdf"と"html"を指定しているので、ファイルを保存すると、これらへの変換が自動的に行われる。なお、markdown-pdf.type項目は先にも述べたが、［Markdown PDF: Export (settings.json)］コマンド実行時に作成するファイルの種類の指定でも使われている。

　前述したが、markdown-pdf.convertOnSaveの設定を有効にするには、VS Codeの再起動が必要になるので注意しよう。

　この設定を行って、Markdownファイルを保存すると、変換が自動的に行われ、以下の画像のように、2つのファイルが作成される（［エクスプローラー］ビューに注目）。

sample01.mdファイルを保存すると、自動的にsample01.htmlファイルとsample01.pdfファイルが作成される

　Markdown PDF拡張機能の設定項目としては、この他にも以下のようなものがある（抜粋）。

　これらの設定については、「Markdown PDF」ページを参照されたい。

「Visual Studio Code TIPS」