Zenn
✏️

Markdown Preview Enhanced の PDF や PNG の出力が WSL でできない？実際にハマったエラーと解決法

に公開
WSL
Puppeteer
markdownpreviewenh
tech

はじめに

Markdown ファイルを PDF に簡単出力できる VS Code 拡張「Markdown Preview Enhanced（以下 MPE）」は非常に便利ですが、
WSL(Ubuntu24.04) × Puppeteer v22以降 × Cursor という環境では、ある程度設定しないと動きません。

この記事では、実際に私がハマったポイントと、余計な設定をせずに最小限で動かす方法を紹介します。

陥ったエラーと原因・解決法

① Error: Chrome executable path is not set.

原因

  • Puppeteer v22以降は、ブラウザ（Chromium）を自動でインストールしない仕様に変更
  • さらに MPE は、Puppeteer が持つブラウザパスを自動では取得してくれない

解決策

@puppeteer/browsers で Chromium を手動でインストールし、パス（chromePath）を明示的に指定する必要があります。

② Error: net::ERR_FILE_NOT_FOUND at file:///tmp/...

原因

解決策

Snap版 Chromium は使えません。
代わりに、Puppeteer公式の Headless Chromium（Google公式ビルド） を使います。

最小構成で動かす方法（2025年版）

1. Puppeteer のインストール

sudo npm install -g puppeteer

2. Puppeteer公式の Chromium を明示的にインストール

sudo npm install -g @puppeteer/browsers

完了すると、以下のようなパスに Chromium の実行ファイルがインストールされます。

/home/<ユーザー名>/chrome/linux-137.0.7123.0/chrome-linux64/chrome

このパスを 3.MPE にブラウザパスを指定する（Cursor対応） でMPEのchromePath に指定します。

3. MPE にブラウザパスを指定する（Cursor対応）

MPEのMarkdown-preview-enhanced: Chrome Pathという拡張機能の設定に、2.Chromium を明示的にインストールで得られた　/home/<ユーザー名>/chrome/linux-137.0.7123.0/chrome-linux64/chrome　を設定します。

おわりに

MPE × WSL × Puppeteer を使った Markdown → PDF や PNG の出力には、
少しだけ準備が必要でしたが、実際に必要だったのはこの2つだけです。

  • Puppeteer と Puppeteer公式の Chromium を明示的にインストールする

  • その実行パスを chromePath に設定する

この手順で、Snapなどの環境依存の制約を回避しつつ、安定して PDF や PNG を出力できるようになりました。

WSL 上で MPE を使いたい人の参考になれば幸いです。

Discussion