goemon + pandocでmarkdownを快適に書く #Go

twitterで↓のようにつぶやいたら、すぐにmdのひな形対応が入ってた。
@mattnさんすごい。

goemonでREADME.mdをpandocでhtml化してますが、とても便利です。"@mattn_jp: goemon で *.cxx、command に make とかやってフツーに便利だった"
— takasago (@sago35tk) March 4, 2015

ということで、markdownをvimで書くためにgoemonを使ってみました。
goemonは、いろいろなことに使えて便利ですね。

Big Sky :: 開発速度を加速するツール、goemon を書いた。

Goal

好きなエディタでmarkdownを書いて、リアルタイムプレビューできるようにする。

きっかけ

職場で一部GitBucketを使っていますが、

ローカルである程度整形してからgit pushしたい
社外に持ち出せない情報がある
atomは重かった

ので、vim + 何かで編集したくなり goemon + pandoc を使ってみました。

環境

Windows 8.1
go version go1.4.2 windows/amd64

インストール

goemon

mattn/goemon に従いgo getします。

$ go get github.com/mattn/goemon/cmd/goemon

pandoc

ダウンロードは Pandoc - Installing から。
インストーラを実行するだけ。

htmlテンプレートの更新

そのままでは、goemonのライブリロードを使えない＋css無しなので以下の作業を実施します。
まずはテンプレートを書き出します。

$ pandoc -D html > %APPDATA%\pandoc\templates\gfm.html

上記のgfm.htmlのheadタグ内に適当なcssを埋め込みます。
ここではsindresorhus/github-markdown-cssからgithub-markdown.cssを拝借しました。
cssの埋め込みはbodyタグ内にmarkdown-bodyを書けば完成です。

<body>
    <article class="markdown-body">
    省略 (変更不要)
    </article>
</body>
</html>

最後に、goemonのlivereloadの設定を行います。
以下をheadタグ内に入れておきます。

<script src="http://localhost:35730/livereload.js"></script>

使い方

以下のようにgoemon.ymlのひな形を作ります。
2015/3/4の更新で、mdのテンプレートをはけるようになっています。

$ goemon -g md > goemon.yml

上記で作った設定ファイルを以下のように変更します。
変更点は、

pandocのオプションにtemplateを追加
livereloadを追加

の2点です。

# Generated by goemon -g
tasks:
- match: '*.md'
  commands:
    - pandoc -f markdown -t html --template=gfm.html -o ${GOEMON_TARGET_DIR}/${GOEMON_TARGET_NAME}.html ${GOEMON_TARGET_FILE}
    - :livereload /

次に、goemonを立ち上げます。

$ goemon --

README.md等を更新すればREADME.htmlが生成されるのでブラウザで開きます。
以降、README.mdに書き込む度にlivereloadでブラウザに反映／自動更新されます。

最後に

goemonは、ファイルの変更を検知 → 何かを実行という形なので、いろんなことに使えそうです。
markdown previewは他にも選択肢がありますが、ひとまず目的達成。

htmlページが長くなってくると、リロード後の表示がページトップ(一番上)になってしまうのがアレですが。。。

goemon + pandocでmarkdownを快適に書く