Vim – リアルタイムプレビューできるMarkdown環境の設定方法

midSun31midSun31
IT・デジタル

リアルタイムでプレビューしながらMarkdownファイルを編集できるエディタアプリが人気です。

Vimでも、プラグインをインストールすることで、マークダウンのリアルタイムプレビュー環境を作ることができます。

この記事では、VimエディタでリアルタイムプレビューできるMarkdown環境の設定方法について解説します。OSはmac、Vimエディタのバージョンは8.1を利用しています。Linux、Windowsでも手順は同じです。

使用するプラグイン

Markdown環境の設定には、以下のプラグインを利用します。

今回は、Vim MarkdownとPrevimのプラグインを使用します。同様の機能を持つプラグインは他にも存在するので、好みのプラグインを選んで下さい。

インストール方法

vim-plugを使って、Vim MarkdownとPrevimのプラグインのインストールを行います。

  1. 以下の内容を.vimrcの設定ファイルに記載します。
    call plug#begin('~/.vim/plugged')
     
    Plug 'godlygeek/tabular'
    Plug 'plasticboy/vim-markdown'
    Plug 'previm/previm'
     
    let g:vim_markdown_folding_disabled = 1
    let g:previm_enable_realtime = 1
    let g:previm_open_cmd = 'open -a Google\ Chrome'
     
    call plug#end()
    • 主なオプションと注意点は次のとおりです。
      • ‘plasticboy/vim-markdown’の前に’godlygeek/tabular’を記述する必要があります。
      • デフォルトでMarkdownが折りたたみ状態になるため、「vim_markdown_folding_disabled」を「1」にして折りたたみを防止しています。
      • 「previm_enable_realtime」を「1」にするとテキスト編集時ににリアルタイムでプレビューに反映されます。
      • プレビューを表示するには、「previm_open_cmd」でブラウザの種類を指定する必要があります。

  2. Vimエディタを起動して、プラグインのインストールコマンドを実行します。
    :PlugInstall
  3. 「Done」と表示されればインストールは完了です。

使用例

  1. .mdファイルを編集します。
  2. Vim上でリアルタイムプレビュー機能を有効にするコマンドを実行します。
    :PrevimOpen
  3. ブラウザ上でMarkdownファイルをプレビューできるようになりました。
    • Vimエディタ側でMarkdownを編集するとリアルタイムで反映されます。(ただし、3~5秒程度かかります。)

以上、VimエディタでリアルタイムプレビューできるMarkdown環境の設定方法でした。

IT・デジタル
Howpon[ハウポン]

コメント