39
37

More than 3 years have passed since last update.

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

Last updated at Posted at 2013-11-18

追記

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

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

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

39
37
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
39
37