[備忘録] 今さらSublime Text3でのMarkdown編集環境構築

今さら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の内容を以下のように設定する
   
```json
{
	"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の中身を以下のように設定する
   
```json
{
	"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属性)](food.jpg)

		![Title(alt属性)][1]
		...
		[1]: food.jpg

		[![Title(alt属性)](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/ ）