dackdive's blog

新米webエンジニアによる技術ブログ。JavaScript(React), Salesforce, Python など

[vim]vimでmarkdownをリアルタイムプレビューできるようにする

すでにあちこちで紹介されてるので目新しいことはありませんが
vimmarkdown形式のファイルを編集中にブラウザでプレビューでき、
さらに変更がリアルタイムに反映されるように設定しました。

ちなみに、以前はこちらの記事にある設定でやってました。
(こちらはリアルタイムには反映されません)

Vim で GitHub Flavored Markdown をプレビューする - すぱぶろ

必要なもの

インストール

全部NeoBundleでインストールします。

.vimrc

NeoBundle 'plasticboy/vim-markdown'
NeoBundle 'kannokanno/previm'
NeoBundle 'tyru/open-browser.vim'

source ~/.vimrcで設定を反映させた後に、vim:NeoBundleInstallを実行。

設定

使いやすくするためにちょっとした設定をします。

.vimrc

""" markdown {{{
  autocmd BufRead,BufNewFile *.mkd  set filetype=markdown
  autocmd BufRead,BufNewFile *.md  set filetype=markdown
  " Need: kannokanno/previm
  nnoremap <silent> <C-p> :PrevimOpen<CR> " Ctrl-pでプレビュー
  " 自動で折りたたまないようにする
  let g:vim_markdown_folding_disabled=1
" }}}

デフォルトだと拡張子が.mdのファイルはmodula2というファイルタイプだと認識されてしまうので、markdownで開くよう設定。
また、プレビューを開くためのコマンドにショートカットを割り当てます。

最後の一行は、

f:id:dackdive:20151020130915p:plain

こういう文章が書かれたファイルを開いた時に、勝手に markdown の構文を解釈して

f:id:dackdive:20151020130955p:plain

こんなふうに折りたたんで表示されてしまうのを防ぐためのオプションです。

やってみる

f:id:dackdive:20140911212723p:plain

こんな感じで.md形式のファイルを編集している時にCtrl-pを押すと...

f:id:dackdive:20140911213030p:plain

ブラウザが立ち上がり、プレビューされます。

ここから、ファイルをさらに編集すると...

f:id:dackdive:20140911213319p:plain

f:id:dackdive:20140911213329p:plain

ブラウザをリロードしなくても、リアルタイムで反映されます!

リファレンス

http://mba-hack.blogspot.jp/2013/11/vimmarkdown.html

VimでMarkdownの環境を整える | KEYPOINT – キー・ポイント株式会社 開発日誌

MarkdownのプレビューをVimで見る2つの方法 - the code to rock