追記
プラグインを削除していたので、作りなおしました。
はじめに
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 | 編集しているファイルを自動保存するために必要 |
設定
" 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のカーソル移動に依存しているという点、②スクロール幅が調整されていないという点、③キーを押さなければ、一方方向へのスクロールに対応しないという点です。
まだ、実験段階の機能なので、予期せぬ不都合が起こるかもしれません。注意してください。