VimでMarkdown、HTMLなどをプレビューする方法は､検索すれば､たくさんヒットします。
しかし、どれも個人的にはしっくり来なかったので､VimでMarkdownプレビューする方法を考えてみました。参考になれば幸いです｡
今回､cscroll.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 で編集した Markdonw ファイルをブラウザプレビューするために必要(自動リロード機能付き) |
| cscroll.vim | Vim から Google Chrome を操作するために必要 |
| vim-submode | 連続スクロールを実現するために必要 |
| vim-auto-save | 編集しているファイルを自動保存するために必要 |
設定
" 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でプレビューされるようにしておいてください｡
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機能を有効にするなら、上記で説明したキーマップのコメントアウトを外してください｡具体的には､以下の部分になります｡
"" 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する場合の設定ファイルは以下の様な感じになります｡
" 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のカーソル移動に依存しているという点、②スクロール幅が調整されていないという点、③キーを押さなければ、一方方向へのスクロールに対応しないという点です｡
まだ、実験段階の機能なので､予期せぬ不都合が起こるかもしれません。注意してください｡