twitterで↓のようにつぶやいたら、すぐにmdのひな形対応が入ってた。
@mattnさんすごい。
goemonでREADME.mdをpandocでhtml化してますが、とても便利です。"@mattn_jp: goemon で *.cxx、command に make とかやってフツーに便利だった"
— takasago (@sago35tk) March 4, 2015
ということで、markdownをvimで書くためにgoemonを使ってみました。
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ページが長くなってくると、リロード後の表示がページトップ(一番上)になってしまうのがアレですが。。。