sonoshouのまじめなブログ

情報系大学生からのウェブ見習い人生の記録

Sublime Text で Markdown．

Sublime Text Markdown

Sublime Text 導入 | sonoshouのまじめなブログ
でSublime Textを導入したのですが，
キーバインドできるMarkdownエディタとしも優秀だという話を聞き，
Sublime Textを自分なりにカスタマイズしてみました．

結論から言うと，非常にMarkdownが書きやすいです！
キーバインド使えることがこんなに嬉しいのか……！
Markdownって改行（半角スペース2回）が面倒だと思ってたのですけど，
SHIFT + Enterに半角スペース2回を割り当てたら幸せになりました．

ただ，他のMarkdown専用アプリと比較すると，
プレビューがリアルタイムに見られないのが痛い……．
キーバインドを取るか，プレビューを取るか，好みかもしれません．

Macな方は適宜読み替えて下さい．
大きく違う点はありませんでした．

追記（2014年11月24日）

OmniMarkupPreviewerが非常に優秀であることがわかりました。
こいつのおかげで、リアルタイムにプレビューが見ることができます。
使い方やインストール等は以下のページを参考にして下さい。
Sublime TextでのMarkdown導入も丁寧に書かれています。
情報系大学生のWebメモ

また、OmniMarkupPreviewerデフォルトのCSSを変える際は、
以下のページが参考になりました。
日々の観察ブログ

完成図

エディタ画面

f:id:sonoshou:20131222165101p:plain

プレビュー画面

f:id:sonoshou:20131222165105p:plain

パッケージコントロールのインストール

Sublime Textのパッケージコントロールは必須です．
これにより，様々なパッケージを簡単にインストールすることができます．
以下のサイトを参考にしました．
Sublime Text 3初期導入

  1. Sublime Text 3を起動して， Ctrl + ` もしくは Ctrl + @ を押す．
  2. 以下の呪文を入力．（2013年12月19日確認）
    import urllib.request,os; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); open(os.path.join(ipp, pf), 'wb').write(urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ','%20')).read())
  3. インストールが始まる．

これで各種のインストールが簡単に行うことができます．

Markdownなあなたへ

Sublime TextをMarkdownしたいあなたへ．

Markdown Previewのインストール

ボタン一つでSublime Textからプレビューを表示できるようにしましょう．
こちらのページを参考にしました．
SublimeText2でMarkdownをプレビューするプラグイン

  1. Ctrl + Shift + P または Command + Shift + PでSublime Package Managerを起動する．
  2. Package Control: Install Packageを選択．
  3. Markdown Previewを入力して選択．

Markdown Previewがインストールできます．
次は，ショートカットの設定です．

  1. メイン画面から， Preferences -> Key Binding-User を開きます．
  2. [ { "keys": ["alt+m"], "command": "markdown_preview", "args": {"target": "browser"} }]　を追加．

以上です． ["alt+m"]の部分がショートカットの指定なので，変えたい人はお好みで変えましょう．

alt+mボタンを押すとブラウザが開き，Markdownのプレビューを見ることができます．

Markdown PreviewのCSS編集

初期設定では日本語のフォントのセンス悪く，美しくありません．
そこで，Markdown Previewに使われるCSSを編集して，お好みのフォントを使いましょう．

  1. メイン画面から， Preferences -> Browse Packages （Mac版は,左上リンゴマーク隣のSublime TextからPreferencesへ．）
  2. Sublime Text 3 / Installed Pakages にアクセス
  3. Markdown Preview.sublime-package を Markdown Preview.zip にリネーム．
  4. Markdown Preview.zip を解凍．
  5. github.css と markdown.css があるので，これらのファイルを開く．
  6. font-familyをお好みに編集．
  7. 解凍してできた Markdown Preview フォルダを圧縮．
  8. Markdown Preview.zip を　Markdown Preview.sublime-package にリネーム．
  9. メイン画面から， Preferences -> Package Settings -> Markdown Preview -> Settings - Users を開く
  10. {"css" : "markdown.css"} または {"css" : "github.css"} を入力．

以上です．

私はこちらのサイトを見て，font-familyを編集しました．
CSSのfont-family指定はこれで決まり！（2013春） | 遠近法ノート

font-family:'Lucida Grande',
'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3',
Meiryo, メイリオ, sans-serif;

Markdownをカラフルに

せっかくなのでMarkdownをカラフルにして，見やすくしましょう！
以下のサイトを参考に．
Sublime Text で markdown をカラフル

  1. Ctrl + Shift + P または Command + Shift + PでSublime Package Managerを起動する．
  2. Package Control: Install Packageを選択．
  3. Markdown Extendedとmonokai extendedを入力して選択．

これでインストールが終了です．
次は設定です．

  • .mdをメイン画面から View -> Syntax > Open all with current extension as で Markdown Extendedに設定．
  • Preferences -> Color Scheme -> Monokai Extended のどちらか好きなほうに設定．

以上です．

日本語をインライン入力可能にする

Windowsのデフォルトだと，日本語がインライン入力できず，非常に打ちづらいです．
Windowsの方は，こちらでインライン入力可能にしましょう．
以下のサイトを参考にしました．
Windows版「Sublime text 2」で日本語をインライン入力する方法

  1. Ctrl + Shift + P または Command + Shift + PでSublime Package Managerを起動する．
  2. Package Control: Install Packageを選択．
  3. IME Supportを入力して選択．

以上です．

タブや半角スペースを表示したい（お好み）

Sublime Text 2| Mnemoniqs Web Designer Blog
こちらのホームページを参考にしました．

  1. メイン画面から　Preferences > Settings User を開く．
  2. {"draw_white_space": "all"} を追加．

以上です．

キーバインドも工夫したい（お好み）

私の好みです．
日本語のMarkdownで一番不便なのが改行だと思うのです．
改行するたびに全角と半角を切り替えて，
改行する行に半角スペースを２つ入力する必要があるからです．

そこで，

{ "keys": ["shift+enter"], "command": "insert_snippet", "args": {"contents": "  \n"}}, // markdown用

と指定することで，Shift + Enterで改行することができます．
個人的にはこれだけでも非常に便利なので，おすすめです．

以下は改行以外の各種Markdown記法にショートカットを振ってみた例です．
これらの設定が便利かどうかはこれから試していく予定です．

参考までに……．

[
{ "keys": ["ctrl+f"], "command": "move", "args": {"by": "characters", "forward": true } }, // emacs風  
{ "keys": ["ctrl+b"], "command": "move", "args": {"by": "characters", "forward": false } }, // emacs風  
{ "keys": ["ctrl+p"], "command": "move", "args": {"by": "lines", "forward": false } }, // emacs風
{ "keys": ["ctrl+n"], "command": "move", "args": {"by": "lines", "forward": true } }, // emacs風
{ "keys": ["ctrl+h"], "command": "left_delete" }, // emacs風
{ "keys": ["ctrl+d"], "command": "right_delete" }, // emacs風
{ "keys": ["ctrl+a"], "command": "move_to", "args": {"to": "bol", "extend": false} }, // emacs風
{ "keys": ["ctrl+e"], "command": "move_to", "args": {"to": "eol", "extend": false} }, // emacs風
{ "keys": ["alt+m"], "command": "markdown_preview", "args": {"target": "browser"} }, // markdown preview
{ "keys": ["shift+enter"], "command": "insert_snippet", "args": {"contents": "  \n"}}, // markdown用
{ "keys": ["alt+1"], "command": "insert_snippet", "args": {"contents": "1.\t"}}, // markdown用
{ "keys": ["alt+2"], "command": "insert_snippet", "args": {"contents": "2.\t"}}, // markdown用
{ "keys": ["alt+3"], "command": "insert_snippet", "args": {"contents": "3.\t"}}, // markdown用
{ "keys": ["alt+4"], "command": "insert_snippet", "args": {"contents": "4.\t"}}, // markdown用
{ "keys": ["alt+5"], "command": "insert_snippet", "args": {"contents": "5.\t"}}, // markdown用
{ "keys": ["alt+6"], "command": "insert_snippet", "args": {"contents": "6.\t"}}, // markdown用
{ "keys": ["alt+7"], "command": "insert_snippet", "args": {"contents": "7.\t"}}, // markdown用
{ "keys": ["alt+8"], "command": "insert_snippet", "args": {"contents": "8.\t"}}, // markdown用
{ "keys": ["alt+9"], "command": "insert_snippet", "args": {"contents": "9.\t"}}, // markdown用
{ "keys": ["alt+0"], "command": "insert_snippet", "args": {"contents": "0.\t"}}, // markdown用
{ "keys": ["alt+-"], "command": "insert_snippet", "args": {"contents": "-\t"}}, // markdown用
{ "keys": ["alt+t"], "command": "insert_snippet", "args": {"contents": "#$0#"} } , // markdown用
{ "keys": ["alt+s"], "command": "insert_snippet", "args": {"contents": "**$0**"} } , // markdown用
{ "keys": ["alt+c"], "command": "insert_snippet", "args": {"contents": "`$0`"} } , // markdown用
{ "keys": ["alt+k"], "command": "insert_snippet", "args": {"contents": "----------\n"} } , // markdown用
{ "keys": ["alt+q"], "command": "insert_snippet", "args": {"contents": ">\t"} } , // markdown用
{ "keys": ["alt+l"], "command": "insert_snippet", "args": {"contents": "[title](http://)"} } , // markdown用
]