VSCode×WSLでMarkdown Preview EnhancedからPDF出力する

WSL環境でMarkdown Preview Enhanced（MPE）を使ってChrome(Puppeteer)でPDFを出力した時の設定メモです。

前提

• WSL2、VSCode、Markdown Preview Enhanced拡張は既にセットアップ済み

やったこと

1. Puppeteerをインストール

MPEでPDFを出力するためにはWSL内にブラウザのインストールが必要で、
調べると大抵chromium-browserを入れると出てくるのですが、最近ではpuppeteerを入れるのがベターとのこと。

cd ~
npm install -g puppeteer

2. Chromiumのパスを調べる

# NODE_PATHを設定
export NODE_PATH=$(npm root -g)

# 確認
echo $NODE_PATH

# Chromiumのパスを取得
node -p "require('puppeteer').executablePath()"

最後のコマンドで出てきたパスをコピーしておきます。

3. 日本語フォントを入れる

最初はfonts-noto-cjkだけ入れたのですが、PDF出力時にエラーが発生してうまく出力できませんでした。

sudo apt install fonts-ipafont fonts-noto-cjk

4. PlantUMLの準備

時々PlantUMLでも図を書きたい時があるので設定しておきます。
ただ、サーバーの設定等は少々大変なのでMarkdown PDFの設定を参考にしました。
公式サイトからMITのCompiled jarを任意の場所にダウンロードしておきます。

5. VSCodeの設定

WSLのsettings.jsonに以下を追加：

{
    "markdown-preview-enhanced.chromePath": "さっきコピーしたChromiumのパス",
    "markdown-preview-enhanced.stylesheet": "body { font-family: 'Noto Sans CJK JP', 'IPAPGothic', 'Arial', sans-serif; }",
    "markdown-preview-enhanced.plantumlJarPath": "さっきダウンロードしたjarファイルのパス",
    "markdown-preview-enhanced.plantumlServer": "https://www.plantuml.com/plantuml"
}

6. Print Backgroundを有効にする

MPEの設定で「Print Background」にチェックを入れておきます。
私の環境では!!! infoなどのAdmonitionの背景色がPDF出力時に反映されなかったためです。

7. 完成！

これで、WSL上のVSCodeからMPEを使ってChrome(Puppeteer)でPDFが出力できます！

感想

以前chromium-browserをなんとなくインストールして設定を色々したものの、どうしてもうまくいかずでした。
仕方なく、Windows側からVSCodeを起動してPDFを出力することで諦めようと思っていたのですが、
なぜかPDFを出力するとブラウザでPDFが開くのではなくエクスプローラーが開くようになってしまい、どうしたものかと。
今回の新しい設定で無事にWSL側でも出力できるようになったので困ってはいないのですが、
いまだにWindows側はエクスプローラーが開いちゃうので、いつか直したいです。