VimでのMarkdownプレビューを快適にする方法を考えてみた

追記

プラグインを削除していたので、作りなおしました。

airpreview.vim

はじめに

VimでMarkdown、HTMLなどをプレビューする方法は､検索すれば､たくさんヒットします。

しかし、どれも個人的にはしっくり来なかったので､VimでMarkdownプレビューする方法を考えてみました。参考になれば幸いです｡

今回､airpreview.vimをちょっとだけ改良しました。

Markdownプレビュー

previm

今回は､previmというプラグインを使ったプレビューをしてみたいと思います｡

このプラグインは､依存関係を極力減らすというコンセプトのプラグインです｡

しかし、previmは、現在開いているファイルをブラウザでプレビューするのですが､スクロールするには､ブラウザにフォーカスを移動しなければならず､ちょっと不便でした｡

したがって、ここでは、previm以外に、いくつかのプラグインを組み合わせることで、Markdown プレビューがより快適になる方法を模索していきたいと思います｡

[Vimでカーソル移動すると、ブラウザのスクロールが連動している様子 *ただし、スクロール幅は連動しません]

特殊事情

なお、今回の方法は､AppleScriptを使用したプラグインを利用しますので､Macユーザー限定となってしまいます。

インストール

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

以下のコマンドを実行してください｡

:so $MYVIMRC | NeoBundleInstall

プラグイン名	用途
previm	Vim で編集した Markdown ファイルをブラウザプレビューするために必要(自動リロード機能付き)
cscroll.vim	Vim から Google Chrome を操作するために必要
vim-submode	連続スクロールを実現するために必要
vim-auto-save	編集しているファイルを自動保存するために必要

設定

~/.vimrc

" Markdown プレビュー {{{
nnoremap <silent> <F7> :PrevimOpen<CR>
"nnoremap <silent> <F7> :PrevimOpen \|:Silent open -a it2_f &<CR>
nmap <silent> <Leader>j <Plug>(ChromeScrollDown)
nmap <silent> <Leader>k <Plug>(ChromeScrollUp)
nmap <silent> <Leader>q <Plug>(ChromeTabClose)
nmap <buffer> <Leader>f <Plug>(ChromeKey)

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>')

"" Auto Scroll
"nmap <silent> <Leader>j <Plug>(ChromeAutoScrollDown)
"nmap <Leader>js <Plug>(ChromeAutoScrollDownStop)
"nmap <silent> <Leader>k <Plug>(ChromeAutoScrollUp)
"nmap <Leader>ks <Plug>(ChromeAutoScrollUpStop)
" }}}

使い方

補足説明

まず、設定ファイルへ書き込んだ内容の捕捉として､Auto Scrollは、実験用の機能ですので､常用は、オススメできません。

また、:PrevimOpenコマンドでプレビューを実行した時､フォーカスがブラウザに移ってしまいますので、フォーカスを端末(iTerm2)に戻す方法を提案しています｡

これは、コメントアウトした"nnoremap <silent> <F7> :PrevimOpen \|:Silent open -a it2_f &<CR>という記述のことです。

ちなみに、it2_fの内容としては､以下の様なコマンドになっています。

osascript -e 'tell application "iTerm" to activate'

基本操作

F7キーを押して､プレビューを実行します｡ここでは、Google Chromeでプレビューされるようにしておいてください｡

~/.vimrc

let g:previm_open_cmd = 'open -a Google\ Chrome'

[たぶん、上記のように設定するのだと思います｡間違ってたらごめんなさい]

そして、<Leader>+j+j+j...で下スクロール。<Leader>+k+k+k...で上スクロールです｡

<Leader>+qでタブを閉じます｡

<Leader>+f+{char}で任意のキーをブラウザに送ります｡

まとめると以下の様な感じです｡

キー	効果
<Leader>+j+j+j...	下スクロール
<Leader>+k+k+k...	上スクロール
<Leader>+q	タブを閉じる
<Leader>+f+{char}	任意のキーをブラウザに送る

イメージ画像

標準

実際には、以下の様な感じでプレビューできます｡(画面がちらつきますが、これを何とかしたい…。

欠点としては､操作性はそこそこですが、①画面がちらつくのと、②Vimのカーソル行とプレビューが連動しない点などが挙げられます｡

オートスクロール

オートスクロールのイメージ画像は､一番上に載せたものになります。

ここでいうオートスクロールとは、Vimのカーソルを動かせば､それに伴って、ブラウザもスクロールしてくれるというものです。

AutoScroll機能を有効にすると､画面のちらつきが抑えられていい感じです。

また、Vimでカーソルを動かすと､プレビューのスクロールと連動します(ただし、移動幅は連動しません)。

もし、AutoScroll機能を有効にするなら、上記で説明したキーマップのコメントアウトを外してください｡具体的には､以下の部分になります｡

~/.vimrc

"" Auto Scroll
"nmap <silent> <Leader>j <Plug>(ChromeAutoScrollDown)
"nmap <Leader>js <Plug>(ChromeAutoScrollDownStop)
"nmap <silent> <Leader>k <Plug>(ChromeAutoScrollUp)
"nmap <Leader>ks <Plug>(ChromeAutoScrollUpStop)

ただし、コメントアウトを外した場合､同じキーが登録されているので､注意が必要です｡

また、この場合は､vim-submodeは必要なくなります｡よって、Auto Scrollする場合の設定ファイルは以下の様な感じになります｡

~/.vimrc

" Markdown プレビュー {{{
nnoremap <silent> <F7> :PrevimOpen<CR>
"nnoremap <silent> <F7> :PrevimOpen \|:Silent open -a it2_f &<CR>
"nmap <silent> <Leader>j <Plug>(ChromeScrollDown)
"nmap <silent> <Leader>k <Plug>(ChromeScrollUp)
nmap <silent> <Leader>q <Plug>(ChromeTabClose)
nmap <buffer> <Leader>f <Plug>(ChromeKey)

"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>')

"" Auto Scroll
nmap <silent> <Leader>j <Plug>(ChromeAutoScrollDown)
nmap <Leader>js <Plug>(ChromeAutoScrollDownStop)
nmap <silent> <Leader>k <Plug>(ChromeAutoScrollUp)
nmap <Leader>ks <Plug>(ChromeAutoScrollUpStop)
" }}}

操作は簡単で､以下の通りになります｡

キー	効果
<Leader>+j	Vim上のカーソル移動とブラウザの下スクロールの連動を開始する
<Leader>+k	Vim上のカーソル移動とブラウザの上スクロールの連動を開始する
<Leader>+js	下スクロールの連動を停止する
<Leader>+ks	上スクロールの連動を停止する
<Leader>+q	タブを閉じる
<Leader>+f+{char}	任意のキーをブラウザに送る

欠点としては､①Vimのカーソル移動に依存しているという点、②スクロール幅が調整されていないという点、③キーを押さなければ、一方方向へのスクロールに対応しないという点です｡

まだ、実験段階の機能なので､予期せぬ不都合が起こるかもしれません。注意してください｡