概要
VSCode で Markdown を PDF 化する時に便利な拡張機能 Markdown PDF。
.md ファイルを保存するだけで PDF を書き出してくれたり、デザインもカスタムして凝ったりできるので重宝するが、
グローバルにインストールしてしまうと少し煩わしいケースが出てくる場合もある。
そこで DevContainer 化して Markdown 編集専用のコンテナを作成しようとしたが、少しつまづく箇所があったのでメモとしてまとめておく。
手順1. DevContainer 用のワークスペースフォルダを作成する。
- 適当な空のフォルダを VSCode で開く。
-
Ctrl+Shift+Pでコマンドパレットを開き、Openを入力し、
サジェストからDev Containers: Open Folder in Container...を選択する。
-
Ubuntuの構成ファイルを選択する。
-
jammy(規定)を選択する。
- 追加の機能は不要なので
OKをクリックする。
これでとりあえずコンテナができる。
手順2. コンテナに Markdown PDF をインストールする。
- 拡張機能ペーンで
Markdown PDFを検索し、コンテナにインストールする。
ここで Chromium のインストールも成功した旨のメッセージが表示される。
しかし Chrome の本体がインストールされていないと動作しないようなので、
Ubuntu に Chrome をインストールする必要がある。
手順3. Ubuntu に Chrome をインストールする。
Ctrl+@ でターミナルを起動し、以下のコマンドを順に実行していく。
sudo apt-get update
sudo apt install gdebi
curl -O https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
sudo gdebi google-chrome-stable_current_amd64.deb
試しに適当な .md を作成して表示し、そのファイルを保存してみると PDF への書き出しが実行されるが、
この時点ではエラーとなってしまう。
Error: Failed to launch the browser process! となり、Troubleshooting を参照するよう言われる。
Markdown PDF は puppeteer を使用しているが、その依存関係が不足しているのが原因とわかる。
手順4. puppeteer の依存関係をインストールする。
追加で以下のコマンドを実行する。
sudo apt-get install libexpat1
sudo apt-get install libfontconfig1
sudo apt-get install libgbm1
sudo apt-get install libgcc1
sudo apt-get install libglib2.0-0
sudo apt-get install libgtk-3-0
sudo apt-get install libnspr4
sudo apt-get install libnss3
sudo apt-get install libpango-1.0-0
sudo apt-get install libpangocairo-1.0-0
sudo apt-get install libstdc++6
sudo apt-get install libx11-6
sudo apt-get install libx11-xcb1
sudo apt-get install libxcb1
sudo apt-get install libxcomposite1
sudo apt-get install libxcursor1
sudo apt-get install libxdamage1
sudo apt-get install libxext6
sudo apt-get install libxfixes3
sudo apt-get install libxi6
sudo apt-get install libxrandr2
sudo apt-get install libxrender1
sudo apt-get install libxss1
sudo apt-get install libxtst6
sudo apt-get install lsb-release
sudo apt-get install wget
sudo apt-get install xdg-utils
ここで再度 .md ファイルを保存してみると Markdown PDF が正常に動作し、
PDF への書き出しが無事に完了する。
まとめ
ここまでの手順をまとめた devcontainer.json は以下の通り。
{
"name": "Ubuntu",
"image": "mcr.microsoft.com/devcontainers/base:jammy",
"customizations": {
"vscode": {
"extensions": ["yzane.markdown-pdf"]
}
},
"postCreateCommand": "sudo apt update && sudo apt install -y gdebi && curl -O https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb && sudo gdebi -n google-chrome-stable_current_amd64.deb && sudo apt install libexpat1 && sudo apt install libfontconfig1 && sudo apt install libgbm1 && sudo apt install libgcc1 && sudo apt install libglib2.0-0 && sudo apt install libgtk-3-0 && sudo apt install libnspr4 && sudo apt install libnss3 && sudo apt install libpango-1.0-0 && sudo apt install libpangocairo-1.0-0 && sudo apt install libstdc++6 && sudo apt install libx11-6 && sudo apt install libx11-xcb1 && sudo apt install libxcb1 && sudo apt install libxcomposite1 && sudo apt install libxcursor1 && sudo apt install libxdamage1 && sudo apt install libxext6 && sudo apt install libxfixes3 && sudo apt install libxi6 && sudo apt install libxrandr2 && sudo apt install libxrender1 && sudo apt install libxss1 && sudo apt install libxtst6 && sudo apt install lsb-release && sudo apt install wget && sudo apt install xdg-utils",
"remoteUser": "root"
}