LoginSignup
135
144

More than 5 years have passed since last update.

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

Last updated at Posted at 2015-10-12

今さら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>
    
  • エスケープ

    \#
    \+
    

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

参考

135
144
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
135
144