pandoc + wkhtmltopdf + cssでマークダウンからgithub風レイアウトなpdfを作る for mac

# はじめに
お仕事で設計書などのドキュメントを書く時にはExcelやWordなどOffice製品を駆使してきました。
皆さんがおそらく容易に想像できる色々な理由で、こんな欲が出てきました。

- やっぱりドキュメントもコード管理したいよね
- だけど、md読めない人もいるからpdfにはしたいよね
- イメージとしては[TeX](https://ja.wikipedia.org/wiki/TeX)みたいな感じ、というかTeX最高だよね

というわけで、そんな欲望を満たせる[pandoc](https://pandoc.org/)を使ってみようということになりましてそのセットアップ記録を残します。

# 環境
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/930724/777da9c0-7e3b-298d-32ba-547c79fe0ef1.png)

# 使うツールについて
## [wkhtmltopdf](https://wkhtmltopdf.org/)とは
HTMLをPDFに変換するツールです。
つまり、

```sh
wkhtmltopdf http://google.com google.pdf
```

で、googleのページをPDF化することができます。
後述のpandocと組み合わせることで、Markdown→HTML→PDFの流れで変換することが可能となります。

## [pandoc](https://pandoc.org/)とは
一言で言えば、多様なフォーマットに対応した超便利なドキュメントフォーマットツールです。
今回のケースではMarkdown→HTML→PDFで利用しますが、HTML→LaTeXとか、Textile→Word(docx)とかも対応してます。
詳しくは、公式ドキュメントをどうぞ。
ちなみに、[日本語翻訳版ドキュメント](https://pandoc-doc-ja.readthedocs.io/ja/latest/users-guide.html#id131)がありますが、この訳者である@sky_yさんは僕の学生時代の先輩です（pandocを調べている時にたまたま見つけてびっくりしました笑　お世話になっております！）

## 組み合わせるってどうやって？
pandocで、Markdown→HTML→PDFの流れで変換すると説明しましたが、pandoc自体は元ファイルから作成ファイルを作る中間生成物としてHTMLを作成するようです。
今回の場合は、HTML→PDFに変換するときのエンジンとしてwkhtmltopdfを利用します。
つまり、例えば、pdfLaTeXを使えば、Markdown→HTML→LaTeX→PDFになるという理解です（違ってたらご指摘ください）。
ということは、単純にPDFにする目的だけなのであれば、wkhtmltopdfを使うことで処理も軽くできるということになるのかな？と思ってます。

# やること

- wkhtmltopdfのインストール
- pandocのインストール
- Github風レイアウトが実現できるcssをダウンロード
- 変換元mdファイル作成
- pdf変換

# やってみた
## wkhtmltopdfのインストール
Homebrewで[インストール](https://formulae.brew.sh/cask/wkhtmltopdf)が可能です。

```sh
$ brew install --cask wkhtmltopdf
```

[公式](https://wkhtmltopdf.org/downloads.html)から直接ダウンロードも可能です。

# pandocのインストール
Homebrewで[インストール](https://formulae.brew.sh/formula/pandoc#default)可能です。

```sh
$ brew install pandoc
```

## Github風レイアウトが実現できるcssをダウンロード
[こちら](https://gist.github.com/andyferra/2554919)からダウンロードします。

## 変換元mdファイル作成
Markdownの具体的な書き方などについてはここでは触れません。
こんなファイル構造の前提で、ここから先を読んでください。

```sh
.
├── css
│   └── github.css #　Github風レイアウトができるcss
├── documents
│   └── sample.md
└── pdf
```

ちなみに、今回pdfに変換するmdファイル（sample.md）はこちらです。

    ---
    title: サンプルファイル
    author: 私が著者だ
    ---
    
    # はじめに
    このファイルはQiita投稿用サンプルです
    
    # やりたいこと
    - いい感じにpdfを出力したい
    - 元ファイルはMarkdownで書きたい
    
    # やること
    - 必要なものインストール
    - pdf出力
    
    ## 必要なものインストール
    
    ```sh
    brew install --cask wkhtmltopdf
    brew install pandoc
    ```
    
    ## pdf出力
    
    ```sh
    pandoc -o output.pdf sample.md
    ```

## pdf変換
基本的には、以下の形式です。

```sh
$ pandoc <インプットファイルパス> -o <出力ファイルパス> --pdf-engine wkhtmltopdf <その他オプション>
```
ここでは、章番号の付与(-Nオプション)、目次の作成(--tocオプション)も付けてみます。
使えるオプションは、公式にありますので詳しくは[こちら](https://pandoc.org/MANUAL.html#options)を参照ください

```sh
$ pandoc ./documents/sample.md -o ./pdf/output.pdf -N --toc -c ./css/github.css --pdf-engine wkhtmltopdf
Loading pages (1/6)
Counting pages (2/6)                                               
Resolving links (4/6)                                                       
Loading headers and footers (5/6)                                           
Printing pages (6/6)
Done
```

出力されたpdfはこんな感じ。PDFのプロパティとしてちゃんと目次が出力されるのでもはや--tocオプションは不要なのかもしれないなと思いました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/930724/c709153a-bf3e-db7a-86cc-7ec31ead9ac7.png)

# おわりに
それなりに見やすいPDFが、簡単に作成できるので体裁には特にこだわってなくてそれなりに綺麗であれば良ければなんの問題も無いと思います。
css職人になれば、もっと自分なりのカスタマイズもできますので拡張性は高いですね。
どんどん活用していこうと思います。