Drizzle: VimでMarkdown

最近、メモを書くときはMarkdown形式をよく利用しています。
かなり簡単に書けるのと、ソースそのままでも見やすいので重宝しています。
最近のこのブログの記事も、手元でMarkdownで書いています。

Markdownの書き方や特徴はWikipediaなどを参照してください。
流行っているようなので検索すればたくさん出てきます。

Markdownに対応したエディタも色々出ています。
しかし、テキストで書くならvimを使いたい、それが人情ではないでしょうか。
ちなみに、Markdown対応のエディタでできることは、

Syntaxハイライト（構文の色付け）
Live preview
htmlに変換して出力

などです。（個人的に欲しい機能）

羨ましかったのでvimでもこれらができるように悪戦苦闘しました。
せっかくなので結果を書き残しておきます。

※ 確認は全てKubuntu13.04で行なっています。
WindowsやMacでもパスなどを適宜修正すれば動作すると思います（未確認）。

Syntaxハイライト

vimはデフォルトではMarkdown形式には対応していないので、syntaxを追加します。
NeoBundleなどを使っていれば、.vimrcに下記の一行を追加して:NeoBundleInstallで一発です。

NeoBundle 'tpope/vim-markdown'

これでMarkdown形式のファイルを開けば色づけされるはずです。

アウトライン

Vimでは、ctagsを使うことで関数一覧からジャンプしたりTeXを編集中だったら見出しに飛んだりできます。（いわゆるタグジャンプ）
しかし、デフォルトではMarkdownには対応してません。
なので少し設定の追加が必要です。

私はtagbarというプラグインを使っているのでそれの設定方法を書きます。
やっていることはここをほぼそのままです。

ctagsに設定追加

homeディレクトリにある.ctagsファイルに以下を追加します。
ファイルがない場合は作成します。

--langdef=markdown
--langmap=markdown:.markdown,.mkd,.md
--regex-markdown=/^#[ \t]+(.*)/\. \1/h,heading1/
--regex-markdown=/^##[ \t]+(.*)/\.\. \1/h,heading2/
--regex-markdown=/^###[ \t]+(.*)/\.\.\. \1/h,heading3/
--regex-markdown=/^####[ \t]+(.*)/\.\.\.\. \1/h,heading4/
--regex-markdown=/^#####[ \t]+(.*)/\.\.\.\.\. \1/h,heading5/
--regex-markdown=/^######[ \t]+(.*)/\.\.\.\.\.\. \1/h,heading6/

Tagbarの設定

TagbarはNeoBundleなどで普通にインストールされているものとします。
Windowsでctagsの場所にパスが通っていない時は以下を.vimrcに書いて場所を教えてあげてください。

if has("win32")
    let g:tagbar_ctags_bin = "[ctags.exeまでのパス]"
endif

Markdown用に、以下の設定を.vimrcに追加します。

let g:tagbar_type_markdown = {
    \ 'ctagstype' : 'markdown',
    \ 'kinds' : [
        \ 'h:Headline'
    \ ],
    \ 'sort' : 0,
\ }

これで、見出しに応じたタグジャンプができるはずです。

プレビュー機能

Live previewって必要でしょうか。
正直、私には不要です。
Live previewに対応したエディタも使ってみましたが、むしろ動作がもっさりするような気がして、あまり好きになれませんでした。

とはいえ、手元でも確認しながら書きたいので、"保存時にプレビュー更新"に落ち着きました。
この用途ではmkdpreview-vimという素敵なvim pluginもあったのですが、保存時にちょと引っかかるのが気になったので今回は見送りました。

今は、プレビューにGoogle Chromeの拡張(Markdown Preview Plus)を使っています。
この拡張のいいところは、ファイルが更新されると自動で再変換＆再描画してくれるところです。

インストールと使い方

まずは普通に拡張機能としてChromeに追加します。

次に「拡張機能」の画面で、「ファイルのURLへのアクセスを許可する」にチェックを入れます。
これをしないと変換してくれません。
ついでにオプションで「Enable auto-reload」にチェックを入れておきます。
これでmarkdownファイルが更新された時に自動リロードするようになります。
必要があればついでにcssの設定なども。

ここまで設定すれば、markdown形式のファイルをブラウザにD&Dるだけで勝手にhtmlに変換して表示してくれます。
vimで編集中にはD&Dとか面倒なので、簡単にスクリプトを書きました。

command! MkdChrome call MkdChrome()
function! MkdChrome()
    call system('chromium-browser ' . expand('%'))
endfunction

※ Chromium用です。
Google Chromeの場合はchromium-browserの部分をgoogle-chrome-stableなどに書き換えてください。

これを.vimrcに書いておけば、:MkdChromeでブラウザが立ち上がって（すでに起動している場合は新規タブで）編集中のファイルのプレビューが表示されます。
ファイルを編集して上書き保存すればプレビューも更新されます。
ただし、プレビューの更新には若干のタイムラグがあります。

HTML出力

書き終わったらHTMLとして出力したい場合もあるので変換します。

Markdown Preview Plusにも"Export To HTML"というボタンがありますが、なぜか私の環境では動作しませんでした・・・
なので別途変換手段を用意します。
とりあえずpandocを使っています。

pandocはapt-getからインストールできます。
非常に対応形式が豊富です。
とりあえずmarkdownからhtmlへの変換にしか使っていませんが。

インストールさえしておけば、

pandoc [input_file_name] -o [output_file_name] -f markdown -t html

で変換できます。
出力ファイルを指定しなければ変換結果は標準出力にでます。
これも毎回入力するのは面倒なので簡単なスクリプトを書きました。

command! MkdConv call MkdConv()
function! MkdConv()
    call system('pandoc ' . expand('%') . ' -o ' . expand('%:r') . '.html -f markdown -t html')
    let temp_html = expand('%:r') . '.html'
    execute 'sp ++enc=utf8 ' . temp_html
    execute 'normal ggVG"+ygg'
    call system('chromium-browser ' . expand('%'))
endfunction

以上を.vimrcに書いておけば、:MkdConvで以下の動作をします。

編集中のファイルをhtmlに変換
ウィンドウを分割して変換後のhtmlファイルを表示
htmlのソースを全てクリップボードにコピー
ブラウザ(chromium)で変換後のhtmlを表示

htmlファイルも同じディレクトリに出力されます。
かなり強引な感じですが、一応手元では動作しています。
ブログの投稿ページで貼り付ければ終わりです（手動）。

ファイルのエンコーディングがUTF-8以外の時は、５行目の++enc=utf8を適宜変更してください。
編集中のファイルに合わせるのも簡単にできそうですが、pandocを使うのは当面のつなぎのつもりだったので面倒なのでやっていません。
ちなみにエンコードの判別をvimに任せる（++encオプション無しにする）と、vimがエンコードを決定する前にコピーしてしまって、コピーされた文字列が文字化けしました。

追記

投稿前に確認してたらもっと素敵なプレビューサービスを見つけました。

Markdown ドキュメントをとっても簡単にリアルタイムプレビュー編集できるサービス

設定不要でhtmlもちゃんと出力できます。
リロードがかなり高速です。
拡張やpandocなどのインストールも不要です。
今度からこっちにするかもしれません。
あ、でもcssが固定ですかね？

（でもせっかく書いたので記事は全部公開しておきます・・・）

Drizzle

2013年5月19日

VimでMarkdown