これは便利!Sublime Text3 でマークダウンのプレビューを表示させる方法

以前の記事で紹介したEvernoteとSublime Text3を連携してマークダウン方式で入力する方法を紹介しましたが、アップデートしてEvernoteに反映するまでどのように表示されるのかわかりませんでした。

しかしSublime Textにマークダウンのプレビュー機能を追加すれば、リアルタイムに編集内容を確認できるようになるとのこと!早速試してみましたので、その設定方法を紹介します!

準備するもの

  • node.js(ver 0.10系)
  • Markmon
  • Pandoc

以上のものをSublime Textとは別に用意する必要があります。ちなみに今回紹介する方法はすべてMacでのお話です。

node.js

node.jsはhomebrewでインストールします。homebrewが入っていない場合は先にインストールしておきましょう。

node.jsをインストールするには下記のコマンドをターミナルで実行します。

brew install node010

今回はnode.jsのバージョン0.10系をインストールしました。この後インストールするMarkmonはnode.jsのパッケージ管理ツールnpmを使ってインストールするのですが、最新のバージョンではうまく動かなかったためです。

Markmon

Markmonはpandocで変換したマークダウンの結果をnode.jsで吐き出すために使用します。インストールには以下のコマンドを実行。

npm install -g markmon

Pandoc

Pandocはドキュメント変換ツールです。様々なドキュメント形式の変換に対応しておりますがMarkmonからはマークダウン -> HTML5の形式に変換するようにして利用されます。

Pandocのインストールにはcaskを使用します。こちらも入っていない場合は先にインストールしておきましょう。

Pandocのインストールには下記コマンドを実行。

brew cask install pandoc

以上で事前準備は完了です。次にSublime Text上でプラグインをインストールします。

Markmon real-time markdown preview

Sublime Text上で ⌘ + ⇧ + pを入力してコマンドパレットを開いてPackage Controlの”Install Package”を選択して下さい。Sublime TextにPackage Controleが追加されていなければ追加して下さい。

スクリーンショット 2015-05-09 13.13.28

パッケージの一覧から「Markmon real-time markdown preview」を検索して選択します。

スクリーンショット 2015-05-09 13.15.11

以下表示されたらインストール完了です。

スクリーンショット 2015-05-09 13.17.00

プレビュー表示開始

では早速プレビュー表示を開始してみましょう。test.mdというファイルを作成し、SublimeTextで開きます。そしてメニューバー「Tools」->「Marksown」->「Launch」をクリック

スクリーンショット 2015-05-09 13.30.52

するとプレビュー画面がブラウザで立ち上がります。入力したマークダウンのプレビューがリアルタイムに反映されます。

スクリーンショット 2015-05-09 13.33.12

こ、、これは、、。便利と言わざるを得ないっ!!いままで頭の中で想像しながら編集していた作業はなんだったのか。。

これで作業効率アップだぜって思っていたのですが、ちょっと残念な点が。

Evernoteのノート編集ではリアルタイムにプレビュー出来ない

これができれば最強だと思っていたのですが、Evernoteのノート編集時のプレビューはリアルタイムに反映されません。

今のところはローカルデータで編集したものをコピペでやるしかなさそう。

CSSがうまく適用できひん

メニューバー「Preferences」->「Package Settings」->「Markmon」->「Settings – User」に以下の設定を追加すればCSSが適用できるらしいのですが、うまく反映されませんでした。

{
    "stylesheet": "CSSファイルのパス"
}

なぜだろう。。。

そのままSublime Textを閉じてもNode.jsのローカルサーバー動きっぱなし。

Sublime Textをそのまま閉じちゃうとNode.jsのローカルサーバーが動きっぱなしになっちゃいます。

$ ps aux | grep node
local_user 20099   0.0  0.0  2432772    664 s000  S+    1:55PM   0:00.00 grep node
local_user 20091   0.0  0.2  3085356  31972   ??  S     1:55PM   0:00.33 node /usr/local/bin/markmon --port 3002 --command pandoc -t HTML5 --mathjax

閉じる際はメニューバー「Tools」->「Marksown」->「Exit」で終了してから閉じてあげましょう。

それでもメリットを感じるプレビュー表示

それでもプレビュー表示はあったほうが俄然便利です。Markdownのプレビュー表示にはAtomを使うという手もあるのですが、多種多様なツールを使い分けるよりもツールはなるべくまとまっていたほうがシンプルなので、このままSublime Textでプレビューを使っていこうかと思っています。

コメントを残す