読者です 読者をやめる 読者になる 読者になる

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

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

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

f:id:slowquery:20130325213652p:plain

使い方

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)です。

インストールの前提条件

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

インストール

  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でインストールします。

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

広告を非表示にする