Vim
Markdown

VimでMarkdown, ブラウザでプレビュー

More than 5 years have passed since last update.

Qiitaを使い始めてからというもの、Markdown記法って便利だなあ、と感じるようになりました。


折角なので普段のメモなどもMarkdownで記述しよう、ってなわけでVimにMarkdownのシンタックスハイライトを導入し、ついでに編集内容をブラウザでプレビューできるように環境構築してみました。


ちなみにこの記事も今までのKobitoでなくVimで編集しました。


参考にさせていただいたサイト


Vim-Markdown、QuickRunの導入

すっかりお世話になりっぱなしのNeoBundleを利用して導入します。

後程説明しますが、ブラウザでプレビューするためにopen-browserというプラグインも導入しておきます。

NeoBundle 'tpope/vim-markdown'

NeoBundle 'tyru/open-browser.vim'
NeoBundle 'thinca/vim-quickrun'

Vimを起動して:NeoBundleInstallで完了です。


Markdownパーサのインストール

Markdown記法をHTMLに変換するパーサをインストールします。

参考サイト様によると、quickrun0.5.0では以下のMarkdownパーサをサポートしているようです。

$PATHにこれらのコマンドがあると、それを使って変換が行われます。


優先順位はこのリストの上から順番です。


  • Markdown.pl

  • kramdown

  • bluecloth

  • redcarpet

  • pandoc

今回はRubyでも使えるkramdownにしてみました。

$ sudo gem install kramdowm

なお、会社などで一時的にProxyを使いたい場合は-p http://your.proxy:8080などのオプションを付ければOKです。


ブラウザプレビュー設定

再度.vimrcを編集します。

" -------------------- QuickRun ----------------------------- "

let g:quickrun_config = {}
let g:quickrun_config['markdown'] = {
\ 'outputter': 'browser'
\ }

以上で準備完了です。


Hello,Markdown!

それではマークダウンを書いてみます。拡張子.mdとか.mkdとすると勝手にMarkdown形式としてシンタックスハイライトを行ってくれると思います。


$vim hello.md


hello.md

## Hello,Markdown!

おはようございます。

* リスト
* リスト
- 入れ子もできるYO


編集完了したら編集モードに戻って、\rと入力してみてください(\はバックスラッシュです)。

kramdownを使ったHTML変換が行われ、.htmlに関連付けられたブラウザでプレビュー可能になると思います多分。


うわー便利。


.vimrcも整形しなきゃなあ…

.vimrcもそろそろ超初心者なりに綺麗にしたいです。

こう何から何まで初心者だと覚えることが多すぎて時間が足りず、なかなか本題のRubyのお勉強に入れないですね。でも楽しいです。

4年間もSIで何やってたんでしょ、というツッコミは置いといて。。