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

More than 3 years have passed since last update.

今さら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属性)](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>



  • エスケープ

    \#
    
    \+




後でもっと読んでおきたい


参考