今さらSublime Text3でのMarkdownの編集環境をつくってみる。（環境：MacBook Pro Retina 2015 15inch）
-
パッケージコントロールのインストールを済ませておく（https://packagecontrol.io/installation ）
-
コマンドパレット（SHIFT+COMMAND+P） > "Package Control: Install Package"で以下のパッケージをインストールする
- OmniMarkup Previewer（Markdownのリアルタイムプレビュー）
- Monokai Extended（Markdownのシンタックスハイライト）
- Markdown Extended（Markdownに挿入したコードのシンタックスハイライト）
- Trailing Space（行末半角スペースの可視化）
- Table Editor（Markdownでの表作成）
（Markdown Extended をインストールした時点でCPU使用率が跳ね上がることがあるみたいなので、少し放置してCPU使用率が落ち着くまで待つ）
-
インストールが完了したら早速Markdownファイル(.md)を作成してみる
-
Markdown用のシンタックスやカラースキームを有効にするために、View > Syntax > Open all with current extension as... > Markdown Extended と開き、生成される~/Library/Application Support/Sublime Text 3/Packages/User/Markdown Extended.sublime-settingsの内容を以下のように設定する
{
"color_scheme": "Packages/User/SublimeLinter/Monokai Extended Bright (SL).tmTheme",
"enable_table_editor": true,
"extensions":
[
"md"
],
"trim_trailing_white_space_on_save": false
}
- 次にTrailing Spacesの設定を行う。通常は無効にしておきMarkdownの編集時にのみ有効にしたいので、Sublime Text > Preferences > Package Settings > Trailing Spaces > Setting - Userと開き、
生成された~/Library/Application Support/Sublime Text 3/Packages/User/trailing_spaces.sublime-settingsの中身を以下のように設定する
{
"trailing_spaces_enabled": false,
"trailing_spaces_highlight_color": "invalid"
}
-
ここで一度Sublime Text3を再起動する。再起動すると、コマンドパレットから Trailing Spaces: Toggle Trailing Spaces Highlighting（実質、trailingと入力するだけで十分） で末尾スペースのハイライトの有無を切り替えできるようになっている
-
最後にTable Editorを有効化する。Markdownファイルを編集状態にした状態でコマンドパレットを呼び出し、
Table Editor: Enable for current syntax と
Table Editor: Set table syntax 'Simple' for current view を実行する -
これにより、例えば、
|Aと入力した後にタブキーを押すと表が補完されるようになる -
2015/10/18追記
どうやらTable Editorはデフォルトだと日本語の入力で問題が生じるようなので、対策を行っておく。
Sublime Text > Preferences > Package Settings > Table Editor > Key Bindings - Default を開き、このファイルをそのまま、
~/Library/Application Support/Sublime Text 3/Packages/Table Editor/Default (OSX).sublime-keymap
として保存する。
(Table Editorディレクトリが存在しない場合は自分で作成する)
ここでSublime Textを一度再起動しておく。再起動後、先ほど保存した~/Library/Application Support/Sublime Text 3/Packages/Table Editor/Default (OSX).sublime-keymapを開き、このファイルの24行目付近および148行目付近に書かれている
{ "keys": ["enter"], "command": "table_editor_next_row"
という記述を、
{ "keys": ["super+enter"], "command": "table_editor_next_row"
のようにenterからsuper+enterに書き換え、保存する。保存後、Table Editorの日本語処理が正しく動作するようになる。
（参考：http://webdesign-dackel.com/2015/02/11/sublimetext3-table-editor-jp/ ） -
ここまででMarkdownの編集環境の構築が完了した。Markupのプレビューを行う際には、ALT+CMD+O を入力するとブラウザ上でHTMLの確認行える。HTMLとしても出力できる模様。
Markdown記法メモ
-
見出し(h1-h6)
# header1 ## header2 ### header3 header1 ======= header2 ------- -
パラグラフ(p)
こんにちは。 こんにちは。 -
改行(br)
こんにちは。 こんにちは。 (二文字以上の空白文字) -
水平線(hr)
--- *** ___ - - - -
強調(em、strong)
*強調！* _強調！_ **強調!!** __強調!!__ -
引用(blockquote)
> stay foolish! > > stay foolish! -
コード(code)
`var x = 1;` here's the code. var x = 1; var y = 2; (4文字以上の半角空白あるいはタブを入れることでコードとして認識される) -
リスト(ul、ol)
* item1 * item2 * item3 + item1 + item2 + item3 - item1 - item2 - item3 1. item1 2. item2 3. item3 1. item1 1. item2 1. item3 1. item4 -
リンク(a)
自動リンク <http://google.com> <test@example.com> インラインリンク [Google](http://google.com "Title(alt属性)") 外部参照リンク [Google][1] ... [1]: http://google.com "title(alt属性)" -
画像(img)
 ![Title(alt属性)][1] ... [1]: food.jpg [](http://google.com) -
インラインHTML
Markdown中では通常のHTMLも記述できる <a href="http://google.com" target="_blank">Google</a> -
エスケープ
\# \+
後でもっと読んでおきたい
- Sublime Textの設定メモ（http://qiita.com/matsui-a/items/d9b18e378f421011f8de ）
- Sublime Textに導入しているオススメのプラグイン23選（http://ottan.xyz/sublime-text-plugin-321/ ）
参考
- ドットインストール Markdown記法入門（http://dotinstall.com/lessons/basic_markdown ）
- Markdown記法まとめ（http://cartman0.hatenablog.com/entry/2015/03/31/034758 ）
- Sublime TextでMarkdownを快適に書くためのプラグインと設定（http://ozpa-h4.com/2014/04/25/sublime-text-markdown/ ）
- マークダウンエディタとして使う方法（http://futago-life.com/sublime-text3-wiki/how-to/markdown ）
- Sublime Text: 特定の拡張子とシンタックスハイライトを紐付ける（http://log.chocolateboard.net/sublime-text-syntax-highlighting/ ）
- SublimeText3のTable Editorで日本語入力を何とかする（http://webdesign-dackel.com/2015/02/11/sublimetext3-table-editor-jp/ ）