Edited at

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

More than 3 years have passed since last update.


追記

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

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 で編集した Markdonw ファイルをブラウザプレビューするために必要(自動リロード機能付き)

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のカーソル移動に依存しているという点、②スクロール幅が調整されていないという点、③キーを押さなければ、一方方向へのスクロールに対応しないという点です。

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