VimでMarkdownをGitHub風にリアルタイムプレビュー

「VimmerだがMarkdown文書を書く時にはリアルタイムプレビュー機能が欲しいのでしかたなく専用エディタを使っている。」

そんな根無し草的Vimmerの夢を叶えるVim用のMarkdownリアルタイムプレビューツールがあったので紹介します。

使い方

vimでmarkdownテキストを開くだけです。

vimでMarkdownテキストを入力するとWebブラウザが自動的に起動して、GitHubとよく似たプレビューが表示されます。

そして、vimのMarkdownテキストを入力するとリアルタイムにブラウザのプレビューがアップデートされます。プレビューを更新させるためにMarkdownテキストを保存する必要はありません。

導入方法

instant-markdown-d

これは何？

Markdown文書をHTMLに変換してブラウザにリアルタイムプレビューするNode.jsのアプリです。

REST APIを備えており、Vim以外からも利用可能です。ざっと眺めた限りではREST API経由でMarkdown文書を受け取るとDoctor内のRubyのスクリプトを使ってHTMLデータを生成し、WebSocket(socket.io)でローカルのブラウザにpushしているようです。

GitHubのリポジトリはこちら(suan/instant-markdown-d)です。

インストールの前提条件

以下がインストールされているものとします。

• Ruby
• Node.js

インストール

1. Ruby製のMarkdownパーサとシンタックスハイライトのツールをインストールします。redcarpetはGitHub内部でも使われているようです。github.com : Rolling out the Redcarpet

   $ gem install redcarpet pygments.rb
   

2. Node.js製のMarkdownリアルタイムプレビューサーバを-gオプションを付けてグローバルにインストールします。

    $ npm -g install instant-markdown-d
   

vim-instant-markdown

これは何？

Vimとinstant-markown-dを連携するVimプラグインです。

インストールの前提条件

vundleを使っているものとします。vundleを使っていない場合のインストール方法は公式ドキュメントのInstallationを参照してください。

インストール方法

1. ~/.vimrcに以下を記述します。

    Bundle 'Markdown'
    Bundle 'suan/vim-instant-markdown'
   

   1つめの'Markdown'は.mdなどのvimのMarkdownテキストを開いたらvimにMarkdown形式と認識させ、シンタックスハイライトを行うプラグインで、同様の機能を持つ別のプラグインを使ってもかまいません。

   2つめの'vim-instant-markdown'はvimとMarkdownリアルタイムプレビューサーバvim-instant-makdown-dを連携させるためのプラグインです。

2. :BundleInstallでインストールします。

インストールはこれで終わりです。