[Document & Workflow] Sublime Text: Markdown Preview + LiveReload で Markdown をプレビュー・生成する
Markdown ファイルのプレビューと生成のための設定を調べたら、思いのほか大変でした。
そして細かい部分が、イマイチまとまらない。
[markdown]
## インストール
### Chrome 拡張機能
LiveReload の Chrome 拡張機能を追加します。
> * [Chrome ウェブストア – LiveReload](https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei)
Safari や Firefox の拡張も、こちらからインストールできます。
> * [How do I install and use the browser extensions? – LiveReload Help & Support](http://feedback.livereload.com/knowledgebase/articles/86242-how-do-i-install-and-use-the-browser-extensions-)
### Sublime Text Plugin
Package Control(`cmd+shift+P`) で、Markdown Preview と LiveReload をインストールします。
## 設定
基本的にインストールのみで利用できますが、使いやすいように設定を加えます。
### ショートカットキーの割り当て
> * [revolunet/sublimetext-markdown-preview](https://github.com/revolunet/sublimetext-markdown-preview)
“Sublime Text 2” → “Preferences” → “Key Bindings – User” に設定を追記します。
プレビューに利用するパーサーを `github` として指定します。
また Markdown 記法の改行指定用に、`shift+return` で `半角スペース2つ+改行` を入力するようにします。
> * [Sublime Text で Markdown． – sonoshouのまじめなブログ](http://sonoshou.hatenablog.jp/entry/2013/12/20/Sublime_Text_%E3%81%A7_Markdown%EF%BC%8E)
“`json: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` で指定します。
“`json:MarkdownPreview.sublime-settings
{
/*
プレビューを Safari.app に変更する
*/
“browser”: “/Applications/Safari.app”,
/*
Build 時の Parser を設定する
*/
“parser”: “github”,
/*
Syntax highlight を有効化する
*/
“enable_highlight”: true
}
“`
Syntax highlight には、`highlight.js` が使われるということなのですが、うまく設定が効かない気もします。
> * [sublimetext-markdown-preview/sample.md at master · revolunet/sublimetext-markdown-preview · GitHub](https://github.com/revolunet/sublimetext-markdown-preview/blob/master/sample.md#code)
### Markdown ファイルのテーマ設定
エディタ上の Syntax highlight はテーマファイルに依存するようなので、この辺りを指定する方が使い勝手が良いようです。
> * [Configuring Sublime Text :: Scott Granneman](http://www.granneman.com/webdev/editors/sublime-text/configuring-sublime-text/)
markdown ファイルを開いた状態で、設定ファイルを呼び出します。
“Sublime Text 2” → “Preferences” → “Settings – More” → “Syntax Specific – User” に設定を追記します。
“`json: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` にも同じファイルを設定しました。
## 補遺
### GitHub Flavored Markdown 利用時の追加設定
GitHub Flavored Markdown のシンタックスハイライトを利用したい場合は、GitHub API 認証を必要に応じて行うよう。
> * [Sublime Text で GitHub Flavored Markdown をプレビューする | rarilog](http://rarihoma.s601.xrea.com/post-2013-11-23-01)
> * [SublimeText2 – sublime text で githubのMarkdown記法を使う – Qiita](http://qiita.com/lambdasakura@github/items/cb75c701d964bfce4ad3)
[/markdown]