vim でマークダウン + PlantUMLのリアルタイムプレビュー環境を構築する

vim でマークダウン + PlantUMLのリアルタイムプレビュー環境を構築する

最近、README などの markdown や設計のための PlantUML をちょいちょい書いています。 書くのは全然良いのですが、vimで出力を確認するためのキーを叩くのが面倒だなあと思っていました。

解決策としては、 ブラウザ上のリアルタイムプレビュー系、ネイティブの専用ソフトがあるかと思いますが、前者はオフライン環境下で困りそうですし、後者はちょっと大げさかなと思ってしまいます。どちらにしても普段使うvimとの連携ができないのが辛いです。

じゃあvimでやれば？という話ですが、以前にもvim上でのリアルタイムプレビューを試行錯誤していました。 PlantUML も使えるとのことで確か previm を試したのですが、期待したように動かず諦めていました。

そんな中、 markdown-preview.nvim という vim でリアルタイムのプレビューを出しながら マークダウン＋PlantUML を書くことができる便利なプラグインを導入できたのでその設定を書いてみます。

動作例 (gif)

とりあえず動作例を見てみましょう。

前回の記事で書いた gif動画 が大活躍です。

リアルタイムプレビューの開始, 同期スクロール, 終了

PlantUML のリアルタイムプレビュー

使ってみての感想

• 良い点
  • ブラウザも勝手にオープンしてくれて楽
  • 一文字書く毎に瞬時に反映されるので待つストレスが無い(PlantUMLも結構速い)
  • スクロールが同期されるので長文でもブラウザ側のスクロールが不要
  • ブラウザを落としても、また同じタブを開けば同期は継続される
  • vim上の編集ファイルを閉じたらブラウザ上のタブも閉じてくれる

• ちょっと困る点
  • 空行が必要なはずの時もうまくいってしまう。
  • PlantUML の出力結果が微妙に違う時がある。

以下導入手順

install "open-browser.vim"

Open-Browserというvimプラグインを導入します。
https://github.com/tyru/open-browser.vim

これは :OpenBrowser url で指定ブラウザを起動できるようにするものです。 設定は以下で、今回は google chrome を指定しました。 なお、vimのプラグイン管理は NeoBundle を使っています。

NeoBundle "tyru/open-browser.vim"
let g:openbrowser_browser_commands = [ {'name': 'google-chrome-stable',  'args': ['{browser}', '{uri}']} ]

install "markdown-preview.nvim"

https://github.com/iamcco/markdown-preview.nvim

本記事の本丸です。BTCアドレスなんかも載せていて、なかなかやりおる作者さんです。

NeoBundle 'iamcco/markdown-preview.nvim'

注意として、インストール後にも自分でビルドする必要があります。
プラグインマネージャにもよりますが、以下のスクリプトを叩いて終わりでした。
なお、プラグインの設定はデフォルトのままです。

~/.vim/bundle/markdown-preview.nvim/app/install.sh