SublimeText3 Plugin+Markmon+PandocでMarkdownをHTMLリアルタイムプレビューする #Markdown

Sublime上でシンタックスハイライトをしてMarkdownのマークアップが上手く出来ているか確認することができますがそこはやはり人の子。HTMLで確認したい、CSSをこちらで指定したい、という欲求が生まれます。そしてHTMLで確認できるなら、リアルタイム反映をして欲しいというのが欲求の筋でしょうｗ

ここでは、SulimeText3でMarkdownをリアルタイムHTMLプレビューする方法をご紹介します。

※本記事で確認したのはMac（Yosemite）& SublimeText3です。

Plugin

Markmon real-time markdown previewというプラグインを使います。
このプラグインを利用するのに、Markmon、Pandocをインストールが必要です。

Markmon

まずはMarkmonをインストールします。node.js製なので、node.jsが未インストールの方は先にインストールして下さい。（ここでは割愛します）

$ npm install -g markmon

ちょっとだけ公式を覗くと、コマンドラインでのmarkmonの使い方が書いてあります。

Usage: node ./bin/markmon [filename] --port [num] --command [string] --view [string] --projectdir [path] --stylesheet [path] --help

Options:
--port Port to listen to > [default: 3000]
--command Command to parse markdown to html > [default: "pandoc --mathjax -N -t HTML5"]
--view Command to execute after the server is setup
--projectdir Root directory of your project, useful for local image resources
--stylesheet Path to your custom stylesheet
--help Get this help message

これはわかりやすいですね。
ファイルを指定して、ローカルサーバを立ち上げてくれるようです。

Pandoc

ちなみにこのMarkmonの動作にPandocが必要のようです。
色々インストール方法があるみたいですが、僕はcaskでインストールしました。

$ brew cask install pandoc

さて、準備が終わりました。
これらをSublimeText3のプラグインから操作しよう、ということになります。

SublimeText3のPlugin

Markmon real-time markdown preview をPackageインストールで導入します。
（Packageインストールのやり方はここでは割愛します。）

そしてMarkdownのファイルを開き、Tools > markdmon > launch を選びます。

するとブラウザが立ち上がります。そして開いているマークダウンをいじるとリロードも必要なくリアルタイム編集が可能になります！
意外と楽でいいですね。

CSSの指定方法など

SublimeText3のメニューの、Preferences > Package Settings > markmon > Settings - User をみると設定ファイルが空っぽなので、markmon公式の設定ファイルを真似しましょう

{
    //On Windows try "markmon.cmd" if you get errors.
    //If markmon is not on your path you'll need to use a full path to it
    "executable": "markmon",
    "port": 3002,
    "command": "pandoc -t HTML5 --mathjax",
    "stylesheet": null,
    "projectdir": null
}

設定の内容は、markmonコマンドとだいたい同じですね。
stylesheetあたりに自作のmarkdonwスタイルシートのパスを書きます。

シンタックスハイライト

僕はこれで十分満足なのですが、やはりSublimeText3側でシンタックスハイライトすると更に最強感がでます。

あたりがインストールが楽でオススメです。Packageコントロールからインストールします。

自分のmarkdownのCSSがないならば・・！

Bootstrapのように、markdown用のCSSを検索して見つけることが出来ます。ご参考までに。

自作するのもいいですね！！