簡単！Markdown文書をPDFに変換するVScodeの拡張機能

markdownで書かれた文書をPDFに変換して出力してくれるMarkdown PDFという拡張機能が便利だったのでご紹介します。技術書の作成とかにも十分使えるツールだと思います。

日本語の説明はこのページにあるのでここを見れば一通りの使い方を理解できます。

中でも便利で良く使うであろう機能を紹介します。

バージョン

Markdown PDF 1.4.4

インストール

VScodeで「markdown pdf」と検索して拡張機能をインストールします。

保存する度にPDF出力する設定

デフォルトだと、「エクスポート」処理をしないとPDFに出力してくれませんが、ファイルを保存する度にPDF出力する設定も可能です。

設定画面で、convert On Saveにチェックを入れます。設定を反映させるためには、VScodeを再起動する必要があります。

この設定すると、全てのマークダウンファイルが保存する度に出力されることになります。PDFとして出力したくないファイルがある場合は、Convert On Save Excludeでファイル名を指定します。

ヘッダーフッターの表示・非表示を切り替える

同じ要領で、displayHeaderFooterを検索します。非表示にしたい場合はチェックを外します。

ヘッダーとフッターの出力形式を指定する

ヘッダー、フッターの出力形式を設定することができます。

header template や footer templateで検索します。

↓ HTML形式で出力したい内容を定義します。

↓ PDF

以下のように指定のクラス名を使うことで日付やファイル名などを出力させることも可能です。

• <span class='date'></span> : 日付
• <span class='title'></span> : Markdown ファイル名
• <span class='url'></span> : Markdown フルパスファイル名
• <span class='pageNumber'></span> : 現在のページ番号
• <span class='totalPages'></span>: ドキュメントの総ページ数

シンタックスハイライトをカスタマイズする

コードブロックはシンタックスハイライトを適用してくれます。ハイライトのデザインはhighlight.jsから選ぶことができます。

highlight で検索してEnable Syntax HighlightingをONにします。

プルダウンで適用するスタイルを選ぶことができます。それぞれのスタイルの実際のデザインは、highlight.jsのデモページで見ることができます。

改行を反映する

エディタ上での改行をそのまま反映したい場合は、BreaksをONにします。

CSSファイルを適用してデザインをカスタマイズする

デフォルトである程度デザインされていますが、独自にCSSを適用することもできます。

Stylesに、適用したいCSSファイルへのパスを書きます。

↓ デフォルトのデザインはこんな感じです。

改ページする

任意の場所でページを切り替えたいときは、<div class="page"/>と書きます。

空行を入れる

空行を入れたいときは、<br>や空スペースの入った行を挿入すると良いです。

画像を表示する

![](images/hoge.png)のように、パスを書くことで画像表示できます。