Help us understand the problem. What is going on with this article?

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

More than 5 years have passed since last update.

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

ここでは、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を検索して見つけることが出来ます。ご参考までに。

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

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away