[Document & Workflow] Sublime Text: Markdown Preview + LiveReload で Markdown をプレビュー・生成する
Markdown ファイルのプレビューと生成のための設定を調べたら、思いのほか大変でした。
そして細かい部分が、イマイチまとまらない。
Contents
インストール
Chrome 拡張機能
LiveReload の Chrome 拡張機能を追加します。
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つ+改行 を入力するようにします。
// 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 で指定します。
{
/*
プレビューを 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” に設定を追記します。
{
// 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 にも同じファイルを設定しました。
補遺
GitHub Flavored Markdown 利用時の追加設定
GitHub Flavored Markdown のシンタックスハイライトを利用したい場合は、GitHub API 認証を必要に応じて行うよう。