Homebrew, macOS, Markdown, Pandoc

[Document & Workflow] Pandoc: markdown を github 風 html に変換する

公開日: 2014/09/05
更新日: 2018/11/09

CSS を設定して書式を github 風にします。

[markdown]
先日こんなことをしたのですが、`pandoc` でもできるように設定しておこうと調べました。

> * [Grunt: markdown を pdf に変換する | deadwood](https://www.d-wood.com/blog/2014/09/03_6775.html)

## デフォルト

通常の変換はこんな書き方です。

“`prettyprinted
% pandoc -s test.md -o test.html
“`

## github 風 css を適用する

書式がいまいちなので他の方法を探したところ、CSS を指定できるとのこと。

> * [pandocでmarkdownからgithub風シンタックスハイライトされたhtml生成（ついでに数式） – だいたいよくわからないブログ( ´_ゝ`)](http://matsu-chara.hatenablog.com/entry/2013/11/17/114859)

こちらで公開されている方がいるので、ありがたく頂戴します。
カレントディレクトリに github.css という名前で保存します。

> * [Github Markdown CSS – for Markdown Editor Preview](https://gist.github.com/andyferra/2554919)

オプション `-c` 付きで変換すると github.css が参照された html が作成できました。

“`prettyprinted
% pandoc -s test.md -t html5 -c github.css -o test.html
“`

ソースを見ると、こんな形で参照されています。

“`html:test.html “`

## ユーザデータディレクトリを利用する

このままだと CSS ファイルを別途管理しなければならないので、グローバルに参照できるディレクトリにファイルを移動したいです。
ユーザデータディレクトリという仕組みがあり、以下のコマンドで場所が分かります。

“`prettyprinted
% pandoc –version
pandoc 1.12.3
:
Default user data directory: /Users/****/.pandoc
:
“`

さっそくディレクトリを作成して CSS ファイルを移動します。

“`prettyprinted
% cd
% mkdir .pandoc
% mv github.css .pandoc
“`

これでほんとうはユーザデータディレクトリを走査してくれるはずなんですがうまくいかず。。。

“`prettyprinted
% pandoc -s test.md -t html5 -c github.css -o test.html
“`

保留。。。

## Custom Template を作成する

カスタムテンプレートファイルをユーザデータディレクトリに置くと、システムよりも優先的に探してくれるそうなので、独自のテンプレートを作成します。
下記のコマンドで、ディフォルトテンプレートを元にひな型を作成できます。

> * [Pandocメモ – jou4のブログ](http://jou4.hateblo.jp/entry/2013/03/04/215020)

“`prettyprinted
% pandoc -D html5 > github.html
“`

今回はひな型に、以下の CSS ファイルへのリンクを追加します。

“`prettyprinted “`

このテンプレートを .pandoc/templates/ 以下に配置します。

“`prettyprinted
% mkdir .pandoc/templates/
% mv github.html .pandoc/templates/
“`

以下のオプションが有効になりました。

“`prettyprinted
% pandoc -s test.md –template=github -o test.html
“`

## Custom Template をディフォルトに指定する

ちなみにこのファイル名を default.html へ変更すると、HTMLテンプレートのディフォルトに変わります。

“`prettyprinted
% mv .pandoc/templates/github.html .pandoc/templates/default.html
% pandoc -s test.md -o test.html
“`

このあたりの命名規則に従うようです。

> * [pandoc/data at master · jgm/pandoc](https://github.com/jgm/pandoc/tree/master/data)

## 補遺

ユーザーガイドのすばらしい日本語訳があります。
いろいろあるので使うところだけ拾い読みしました。

> * [Pandoc ユーザーズガイド日本語版 – Japanese Pandoc User’s Association](http://sky-y.github.io/site-pandoc-jp/users-guide/)

深い。

> * [HTML – 多様なフォーマットに対応！ドキュメント変換ツールPandocを知ろう – Qiita](http://qiita.com/sky_y/items/80bcd0f353ef5b8980ee)
> * [Pandoc – プログラマの文書作成術：Markdown, LaTeXなどの文書からWord文書を生成する – Qiita](http://qiita.com/sky_y/items/aab3f93a32a711a54e74)

以前の関連記事。

> * [Pandoc: HTML を Markdown に変換する | deadwood](https://www.d-wood.com/blog/2014/04/10_6028.html)
[/markdown]