【VSCode】DevContainerでMarkdownPDFを使用する

![header.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/219708/955b383c-3082-349f-bbb3-9c7805d3ce4a.png)

# 概要

VSCode で Markdown を PDF 化する時に便利な拡張機能 **Markdown PDF**。
`.md` ファイルを保存するだけで `PDF` を書き出してくれたり、デザインもカスタムして凝ったりできるので重宝するが、
グローバルにインストールしてしまうと少し煩わしいケースが出てくる場合もある。

そこで DevContainer 化して Markdown 編集専用のコンテナを作成しようとしたが、少しつまづく箇所があったのでメモとしてまとめておく。

# 手順1. DevContainer 用のワークスペースフォルダを作成する。

1. 適当な空のフォルダを VSCode で開く。
1. `Ctrl+Shift+P` でコマンドパレットを開き、`Open`を入力し、
サジェストから `Dev Containers: Open Folder in Container...` を選択する。
![001.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/219708/aa177640-76e0-5795-5297-3dd5db0bd3fb.png)
1. `Ubuntu` の構成ファイルを選択する。
![002.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/219708/da2ea303-0d39-6b4a-cb6c-bb85fdddd2ab.png)
1. `jammy(規定)` を選択する。
![003.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/219708/0a3ea4e0-4c3b-3e18-3720-5291051c4794.png)
1. 追加の機能は不要なので `OK` をクリックする。
![004.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/219708/89007bbf-0b14-b4fd-5c7a-70dd1983d032.png)

これでとりあえずコンテナができる。

# 手順2. コンテナに Markdown PDF をインストールする。

1. 拡張機能ペーンで `Markdown PDF` を検索し、コンテナにインストールする。
![005.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/219708/b3271fd4-da79-a560-1941-533f39e80ee5.png)

ここで Chromium のインストールも成功した旨のメッセージが表示される。
しかし Chrome の本体がインストールされていないと動作しないようなので、
Ubuntu に Chrome をインストールする必要がある。

# 手順3. Ubuntu に Chrome をインストールする。

`Ctrl+@` でターミナルを起動し、以下のコマンドを順に実行していく。

``` shell
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 への書き出しが実行されるが、
この時点ではエラーとなってしまう。
![006.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/219708/e73ea3c6-2977-3f0b-b0a3-4633e26b65e6.png)

`Error: Failed to launch the browser process!` となり、[Troubleshooting](https://github.com/puppeteer/puppeteer/blob/main/docs/troubleshooting.md "puppeteer Troubleshooting") を参照するよう言われる。

`Markdown PDF` は puppeteer を使用しているが、その依存関係が不足しているのが原因とわかる。

# 手順4. puppeteer の依存関係をインストールする。

追加で以下のコマンドを実行する。

``` shell
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 への書き出しが無事に完了する。
![007.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/219708/3525158b-4f61-bd2c-48e3-53e1d1259704.png)

# まとめ

ここまでの手順をまとめた `devcontainer.json` は以下の通り。

``` 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"
}
```

### 参考にしたページ
* [Troubleshooting](https://github.com/puppeteer/puppeteer/blob/main/docs/troubleshooting.md "puppeteer Troubleshooting")
* [Windows WSLのUbuntuにGoogleChromeをインストールする](https://zenn.dev/kuronekopunk/articles/cccc283d5265edf21b96)
* [Install Google Chrome on WSL (Ubuntu) on Windows 10 Pro](https://estuarine.jp/2017/12/install-google-chrome-on-wsl/)