「VSCode（Visual Studio Code）」の「Markdown PDF」プラグインを使用してPDF出力する時に、cssを適用する方法を紹介していきます。
MarkdownをPDF化できる「Markdown PDF」はとても便利です。
しかし、デフォルトのスタイルだと見出し(<h1>や<h2>など)の区別がつきにくいのが難点です。自分で用意したcssを適用してPDFを出力する方法を紹介します。
今回確認したバージョンは次の組み合わせとなります。
- VSCdoe：1.45.1
- Markdown PDF：1.4.4
Markdown PDFでcssを適用する流れ
作業の流れは次の通りです。
- VSCodeに「Markdown PDF」をインストールする
- フォルダ構成を決める
- ワークスペースの作成・設定
- cssの準備
- PDFの出力
Markdown PDFをインストールする
VSCodeのマーケットプレイスから「Markdown PDF」をインストールします。
フォルダを作成して対象となるmarkdownを格納する
cssの適用範囲はVisual Studio Codeのワークスペースで管理するものとします。
今回は以下のようなフォルダ構成で、Sample1配下のMarkdownにcssが適用されるようにします。
├ Sample1 │ ├ sample11.md │ ├ sample12.md │ └ sample13.md │ └ Sample2 │ ├ sample21.md │ └ sample22.md
ワークスペースを作成する
- VSCodeを起動し、メニューから<File>→<Open Folder…>と選択してSample1フォルダを開きます。
- メニューから<File>→<Save Workspace As…>を選択して名前を付けてワークスペースファイルを保存します。今回はsample1.code-workspaceとします。
ワークスペースファイルを編集する
作成直後のワークスペースファイルです。
{
"folders": [
{
"path": "."
}
],
"settings": {}
}
次のようにcssファイルへの参照を追加します。
{
"folders": [
{
"path": "."
}
],
"settings": {
"markdown-pdf.styles": [
"./markdown.css"
]
}
}
cssを配置する
cssファイルを用意して、ワークスペースファイルに指定したパスに配置します。
今回の場合は、ワークスペースファイルと同じフォルダにmarkdown.cssを格納します。
PDFを出力する
以上で準備完了です。
Markdownファイルを表示して、右クリックから<Markdown PDF: Export (pdf)>を選択すれば用意したcssが適用されたPDFが作成されます。
最後に完成後のフォルダ構成を載せておきます。
├ Sample1 │ ├ projectA.code-workspace ... VSCodeのワークスペースファイル │ ├ markdown.css ... 適用するcssファイル │ ├ sample11.md │ ├ sample12.md │ ├ sample13.md │ └ sample.pdf │ ...
cssが相対パスで指定できない時は
本家Markdown PDFで、cssのパスを相対パスで指定できないという時期がありました。私が確認したバージョンでは直っていました。
その時に代わりのプラグインをインストールしたので、その方法を残しておきます。
まず、Markdown PDFをインストールするのですが、本家Markdown PDFはcssの相対パス参照ができなくなっていました。 代わりにこちらのサイトからダウンロードしたものをインストールします。本家はVSCode側のバージョンアップによる変更で相対参照できなくなってしまったそうです。そのうち対応されるでしょうか。 Git Hubのサイトを開いたらページ中ほどのreleasesをクリックして、1.2.1のassetsからzipファイルをダウンロードします。ダウンロードしたファイルは展開しておきます。 VSCodeのメニューから<File>→<Preferences>→<Extensions>と選択し、画面左上EXTENSIONSの右にある三点リーダーをクリックして<Install from VSIX...>を選択します。 ここで、先ほど展開したzipファイルに含まれているvsixファイルを選択します。 これでインストールは完了です。
