[Document workflow] Sublime Text: Markdown Preview + LiveReload で Markdown をプレビュー・生成する

Markdown ファイルのプレビューと生成のための設定を調べたら、思いのほか大変でした。
そして細かい部分が、イマイチまとまらない。

インストール

Chrome 拡張機能

LiveReload の Chrome 拡張機能を追加します。

grunt 2013-11-14 19-22-32

Safari や Firefox の拡張も、こちらからインストールできます。

Sublime Text Plugin

Package Control(cmd+shift+P) で、Markdown Preview と LiveReload をインストールします。

設定

基本的にインストールのみで利用できますが、使いやすいように設定を加えます。

ショートカットキーの割り当て

“Sublime Text 2” → “Preferences” → “Key Bindings – User” に設定を追記します。
プレビューに利用するパーサーを github として指定します。
また Markdown 記法の改行指定用に、shift+return半角スペース2つ+改行 を入力するようにします。

Default (OSX).sublime-keymap
  // Key Bindings for Markdown Preview
  // https://github.com/revolunet/sublimetext-markdown-preview
  { "keys": ["alt+m"], "command": "markdown_preview", "args": {"target": "browser", "parser":"github"} },
  { "keys": ["shift+enter"], "command": "insert_snippet", "args": {"contents": "  \n"}},

alt+m で標準ブラウザにプレビューが表示されるようになります。
編集後に保存すると、プレビューが書き変わります。

Markdown Preview の設定

必要に応じて、ユーザ設定ファイルに設定を追記します。
“Sublime Text 2” → “Preferences” → “Package Settings” → “Markdown Preview” → “Settings – User” に設定を追記します。

プレビューするブラウザを、Safari に変更します。
cmd+b で、HTML ファイルが生成されます。
ビルド時に利用されるパーサーは、下記 parser で指定します。

MarkdownPreview.sublime-settings
{
    /*
        プレビューを Safari.app に変更する
    */
    "browser": "/Applications/Safari.app",
    /*
        Build 時の Parser を設定する
     */
    "parser": "github",
    /*
        Syntax highlight を有効化する
    */
    "enable_highlight": true
}

Syntax highlight には、highlight.js が使われるということなのですが、うまく設定が効かない気もします。

Markdown ファイルのテーマ設定

エディタ上の Syntax highlight はテーマファイルに依存するようなので、この辺りを指定する方が使い勝手が良いようです。

markdown ファイルを開いた状態で、設定ファイルを呼び出します。
“Sublime Text 2” → “Preferences” → “Settings – More” → “Syntax Specific – User” に設定を追記します。

Markdown.sublime-settings
{
    // Which file extensions go with this file type?
    "extensions":
    [
        "md",
        "mdown",
        "mdwn",
        "mmd",
        "txt"
    ],
    // Sets the colors used within the text area
    "color_scheme": "Packages/Color Scheme - Default/Dawn.tmTheme",
    // Set to true to removing trailing white space on save
    "trim_trailing_white_space_on_save": false
}

MultiMarkdown も呼び出して、MultiMarkdown.sublime-settings にも同じファイルを設定しました。

2014-04-28_md_01

補遺

GitHub Flavored Markdown 利用時の追加設定

GitHub Flavored Markdown のシンタックスハイライトを利用したい場合は、GitHub API 認証を必要に応じて行うよう。