連載
» 2018年04月27日 05時00分 公開

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

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

[かわさきしんじ,Insider.NET編集部]
「Visual Studio Code TIPS」のインデックス

連載「Visual Studio Code TIPS」

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

処理 操作
MarkdownをHTMLやPDFに変換する 「Markdown PDF」拡張機能をインストールして、コマンドパレットから[Markdown PDF: Export (html)]コマンドや[Markdown PDF: Export (pdf)]コマンドを実行
ファイルの保存と同時にHTMLやPDFへ変換する markdown-pdf.type項目で出力フォーマットを指定して、markdown-pdf.convertOnSave項目をtrueにする(VS Codeの再起動が必要)
MarkdownをPDFやHTMLに変換するための操作

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 PDF拡張機能

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

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

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

コマンドパレットから[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"のみ)
  • markdown-pdf.convertOnSave項目:これをtrueにして、VS Codeを再起動すると、Markdownファイルの保存時に自動的に変換が行われるようになる

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

{
  "markdown-pdf.type": [
    "pdf",
    "html"
  ],
  "markdown-pdf.convertOnSave": true
}


markdown-pdf.type/markdown-pdf.convertOnSave項目の設定例

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

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

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

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

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

  • ファイル保存時の自動変換で除外するファイルの指定
  • 使用するスタイルシートの指定
  • 構文ハイライト関連の設定
  • ヘッダ/フッター関連の設定

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

「Visual Studio Code TIPS」のインデックス

Visual Studio Code TIPS

Copyright© 1999-2018 Digital Advantage Corp. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。