nomitainA ~ノミタイナ~ブログ

技術系の自分用メモ

Markdownをhtmlに出力したい

Markdown記法で作成したファイル(.md)をhtmlに変換してみた. 変換にはPandocを使用した.

はじめに

職場にあふれるExcelで作られたドキュメントたち.下記の理由でとても嫌い.
- 差分管理が実質不可能
- コピペのし辛さ
- レイアウトの崩れやすさ
- 見た目の統一のわずらわしさ
- オートコンプリートによる度重なる作業妨害
- 頑張って作ったわりに,たいして見やすい訳じゃない

百害あって一利なし」のお手本のような状況なので,これを改善したい.
個人的に気に入っているMarkdownを文化として浸透させて心穏やかに過ごしたい.

なぜhtmlか

簡単にかけて,こんなに綺麗に表示できるんだよ!ということをまずは知ってほしい.
「.mdファイルをプレビューするにはまずはこのエディタを...(ブツブツ」という説明から始めると,
煙たがられて一生普及しない.

というわけでMarkdownで編集し最終ドキュメントはhtmlとして出力することにした.
変換にはPandocというライブラリを利用した.

Pandocは様々なデータ間の変換に対応していて,htmlの他にはPDFやdocx(Word形式)にも変換可能.
docxへの変換はスタイルがうまく反映されなかった.
PDF変換には別途LaTeXのパッケージが必要.

今回はhtmlに変換.

Pandoc

インストール

公式ページから.
超簡単.Pandoc -vで正常にインストールされていることを確認.

変換

下記を実行.出力された sample.html をブラウザで開いて確認.

pandoc -f gfm -t html5 -s --self-contained -c .\css\style.css sample.md -o sample.html  

# style.css     : 指定するスタイルシート
# sample.md     : 今回の入力Markdownファイル
# sample.html   : 出力ファイル名

オプションについて詳細はPandoc ユーザーズガイド 日本語版

sample.md は GFM(Github Flavored Markdown) の記法.
そのため,入力ファイルの形式にはgfmを指定している.
qiita.com

スタイルシートは好きなものを準備.例えば下記から入手.
https://github.com/sindresorhus/github-markdown-css

おわりに

Pandocはインストールが簡単で使いやすい.

実際にhtmlに出力してみて感じたメリットは
共通のスタイルシートを指定することで複数のドキュメントの見た目が統一できること.
チーム内で共有するためのドキュメントとは相性が良い.

余談

Markdown編集用に今まではAtomを使用していたが今回 Visual Studio Code をインストールして使ってみた.
Atomは動作が重いけど,VSCodeは軽い.レンダリングもいい感じ.
メインのエディタとして移行を検討したい.