VSCode から WSL2 上で Markdown PDF を使うための準備

はじめに

普段Windows上のvscodeでWSL拡張を使用しコーディング等を行っているのですが、「Markdown PDF」を使うとうまく動かなかったので、使えるようにするまでの記録を残します。

環境

• Windows 11 Pro 24H2
• Ubuntu24.04 (on WSL2) ※作りたての状態
• vscode本体最新版
• vscode拡張機能が導入済の状態
  • WSL: ms-vscode-remote.remote-wsl 0.104.1
  • Markdown PDF: yzane.markdown-pdf 1.5.0 （WSL側へも導入）

うまく動かなかった点

• 【問題1】PDF出力がエラー終了する
• 【問題2】出力されたPDFの日本語が化ける

対応記録

準備

vscodeの左下の「リモートウインドウを開きます」ボタンを押し、上部の「WSLへの接続」を選択してWSLに接続します。


その後、「ファイルメニュー」「フォルダを開く」から任意のフォルダを開きます

【問題1】PDF出力がエラー終了する

適当なマークダウンファイルを作成後、右クリックメニューの「Markdown PDF: Export (PDF)」 を選択すると、エラーが通知されます。

エラー内容

Error: Failed to launch the browser process!
/home/username/.vscode-server/extensions/yzane.markdown-pdf-1.5.0/node_modules/puppeteer-core/.local-chromium/linux-722234/chrome-linux/chrome: error while loading shared libraries: libnss3.so: cannot open shared object file: No such file or directory

TROUBLESHOOTING: https://github.com/puppeteer/puppeteer/blob/master/docs/troubleshooting.md

【対応1】不足ライブラリを追加する

エラー内容から libnss3.so が不足していることがわかりました。これを導入して同じことを繰り返し、以下の3つのライブラリをインストールした時点で、PDFが出力されるようになりました。

ライブラリ追加（WSL）

sudo apt update
sudo apt install -y libnss3 libxss1 libasound2t64

【問題2】出力されたPDFの日本語が化ける

出力されたPDFを確認したところ、日本語部分がいわゆる豆腐状態になっていました。

【対応2】日本語フォントを導入する

日本語フォントが入っていないことが原因なので、WSLにフォントを入れて対応します。
今回は「BIZ UD Gothic」フォントを使います。aptでは導入できないため、ファイルをフォントフォルダに展開します。

BIZ UD Gothicフォント導入

# フォントダウンロード
wget https://github.com/googlefonts/morisawa-biz-ud-gothic/releases/download/v1.051/BIZUDGothic.zip

# フォント用フォルダを作成し展開
sudo apt install unzip
mkdir -p ~/.local/share/fonts/truetype
unzip BIZUDGothic.zip -d ~/.local/share/fonts/truetype

# 以下のコマンドで4つのフォントが表示されれば導入完了
fc-list | grep BIZUD

以下の4つのフォントファイルが導入されます

• BIZUDPGothic-Regular.ttf
• BIZUDPGothic-Bold.ttf
• BIZUDGothic-Bold.ttf
• BIZUDGothic-Regular.ttf

この状態で再度PDF出力を行うと、PDF内の日本語が正しく表示されます。

フォントの導入先をホームディレクトリにすると、他のユーザはそのフォントを使用できません。他のユーザ含めたシステム全体でフォントを使用するためには、フォントの展開先を /usr/local/share/fonts/truetype に変更します。（WSLではあまり関係ないかもしれませんが、参考まで）

他のユーザやシステム全体で使用する場合

sudo mkdir /usr/local/share/fonts/truetype
sudo unzip BIZUDGothic.zip -d /usr/local/share/fonts/truetype

他のフォントを追加してPDFで使用する場合や、その他の見た目を変えたい場合などは、スタイルシートの追加が必要です。スタイルシート追加はvscodeの設定で行います。

マークダウンと同じフォルダのpdf.cssを適用させる設定例

  "markdown-pdf.styles": ["pdf.css"],
  "markdown-pdf.stylesRelativePathFile": true,

おわりに

問題1は 「Markdown PDF」が使用する「Puppeteer」内のchromの依存関係が影響します。GitHUBのPuppetterのページに依存ライブラリについての情報があり、Debian/Ubuntu用には40近いライブラリやアプリが列挙されています。

この情報を見つけた時、WLSに最初から入っているものを除外したら何個ぐらいになるのか気になっており、今回試したのですが、結果として3つ（フォントも入れれば4つ）入れるだけで済んだのは意外でした。

何かの役に立てれば幸いです。