読者です 読者をやめる 読者になる 読者になる

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 + PSublime 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.cssmarkdown.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 + PSublime Package Managerを起動する.
  2. Package Control: Install Packageを選択.
  3. Markdown Extendedmonokai 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 + PSublime 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で一番不便なのが改行だと思うのです.
改行するたびに全角と半角を切り替えて,
改行する行に半角スペースを2つ入力する必要があるからです.

そこで,

{ "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用
]