VimでMarkdownをプレビューする環境を整えてみた

amazon
VimでMarkdownをプレビューする環境の構築というのは、結構たくさんの情報があるものの、これといったベストな方法はなかなか存在しません。

photo-credit: IconAarchive


直前に書いたプライベート記事は、久しぶりに文章を構成から考えてみたこともあり、普段しないプレビューをやってみました。


概要



まず、使用するアプリは、 Google Chromeにしようか、 qlmanageにしようか迷いました。


一応、高機能なブラウザを選んでおくことにしました。


ブラウザでプレビューするとなると、使用するプラグインは、 previmが良いのではないかと思います。


せっかくブラウザを使うので、依存は最小限に抑えたいところです。


次に、 previmを使うとして、問題は、自動保存とスクロールになります。


この点、以前作った cscroll.vimを使います。今思うと、中身が酷いので、見ないでください。直すつもりもありません。


AppleScriptを動作できる環境が必要なので、Mac限定です。


必要なもの



previm
...Vim で編集した Markdonw ファイルをブラウザプレビューするために必要(自動リロード機能付き)

cscroll.vim
...Google Chrome を Vim 上から操作するために必要

vim-submode
...連続スクロールを実現するために必要

vim-auto-save
...編集しているファイルを自動保存するために必要


インストール



NeoBundle 'vim-scripts/vim-auto-save'
NeoBundle 'kannokanno/previm'
NeoBundle 'syui/cscroll.vim'
NeoBundle 'kana/vim-submode'


:so $MYVIMRC | NeoBundleInstall


設定



" Markdown Preview
" <F7>でプレビュー
nnoremap <silent> <F7> :PrevimOpen<CR>

" プレビューと同時にフォーカスをiTerm2に戻したければ、以下を参考にします """{{{
" ただし、注意として、「command -bar PrevimOpen...」のように「-bar」オプションを付ける必要があります。
" http://mba-hack.blogspot.jp/2013/09/mac.html
" nnoremap <silent> <F7> :PrevimOpen \|:silent !open -a it2_f<CR>
"""}}}

" [,]+j+j+j...で下にスクロール、[,]+k+k+k...で上にスクロール
nnoremap <silent> <Leader>j :ChromeScrollDown<CR>
nnoremap <silent> <Leader>k :ChromeScrollUp<CR>
call submode#enter_with('cscroll', 'n', '', '<Leader>j', ':ChromeScrollDown<CR>')
call submode#enter_with('cscroll', 'n', '', '<Leader>k', ':ChromeScrollUp<CR>')
call submode#leave_with('cscroll', 'n', '', 'n')
call submode#map('cscroll', 'n', '', 'j', ':ChromeScrollDown<CR>')
call submode#map('cscroll', 'n', '', 'k', ':ChromeScrollUp<CR>')

" 現在のタブを閉じる
nnoremap <silent> <Leader>q :ChromeTabClose<CR>
" [,]+f+{char}でキーを Google Chrome に送る
" nnoremap <buffer> <Leader>f :ChromeKey<Space>



イメージ画像



ターミナル画面を半分にする場合



一般的なプレビューするときの画面になりました。これで、Vimから離れずに、ブラウザをスクロールすることが出来ます。




ターミナル全画面でプレビューする場合



私は、ターミナル画面を半分にしたくないので、こっちを利用してます。透過度MAXにします。



ちなみに、Vimのスクロールとの連動はありません。Vimではどんな感じで文章を書いてるのかを見せるために、最初にVim画面もスクロールしました。


しかし、再生速いですね。


そのうち、ゆっくり再生するGIF画像を作成する方法を調べておかないと...。ただ、その場合、ファイルサイズは大きくなってしまいますけど。


コメント



しかし、色々とプレビュー環境を整えてみるものの、結局はプレビューなんてしなさそうな自分がいます...。