Pandocでmarkdownからhtmlへスタンドアロンオプションをつけて変換する

Markdownからhtmlに変換するときのお話。

htmlで画像を表示する場合、通常、画像パスを指定してimgタグで画像を参照するとおもう。それを今回は、画像データーをBase64にエンコードし、直接htmlのソースに書き込んでしまおうということである。こうすることで、htmlファイルをpdfのように一つのファイルで管理ができるようになる。

アプリ内のヘルプページ用に、このhtmlファイルを使おうと思った。

というのも、アプリのローカライズ言語が多ければ多いほど、言語別にヘルプ用の画像を管理しなければならない。そうなると、xcode内にそれらの画像を置くわけだから、他のリソースとごっちゃになりそうだ。だから、htmlをpdfのように単一ファイルとして扱えるようになってしまえば、ファイルの階層構造も気にせず少しは楽になるかなと思ったわけだ。

ヘルプページはブログなどへ飛ばしてしまえばいいではないか思うかもしれない。私も、今でもそうしている。しかし、Analyticsを解析していた時に、中国からのアクセスで閲覧に以上に時間がかかっていることに気がついた。というか閲覧できていない状況だろう。

中国ではICP登録しないと、こちらのブログなどへアクセスできないのだ。つまり中国政府の検閲がかかってしまっている。そんなこともあり、ヘルプページをアプリ内に埋め込んで配信する必要ができてたわけだ。

さて、実際やる手順としては、pandocを使って以下のように-s --self-containedオプションをつけて実行する。

pandoc hoge.md -s --self-contained -t html5 -o hoge.html

するとこのように、img タグに画像が文字列として埋め込まれてhtmlファイルが出力される。

base64

あとはWKwebviewで、このhtmlを参照してあげればよい。