Go to Qiita Advent Calendar 2024 Top
LoginSignup
81
75

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@kouichi-c-nakamura(Kouichi Nakamura)

Sublime Text 3をMarkdown エディタとして整備

Last updated at Posted at 2016-09-08

Sublime Text 3をMarkdown エディタとして整備する方法。断片的な情報はネット上で見つかりますが、だいたい満足できる環境になるまでに結構かかりました。勉強した分がもったいないので、誰かの役に立つことを願い、私の好みですが、カスマイズ法を掲載します。

そもそも論ですが、後発のATOM エディタのほうが、インストールしたままの状態でのMarkdownのサポートは上だと思います。ですので下を見て、「面倒くさ」と思った方は、ATOMを使いましょう。私も実は既にATOMに乗り換えました。

AtomをMarkdownエディタとして整備

1. Sublime Text 3を入手

2. Package Controlをインストール

これがなぜ標準で入っていないのか非常に理解に苦しみます。そうなっていないのは何か経緯があるのでしょうが、これをインストールせずにSublime Text を酷使している人というのはいないでしょう。

  1. View > Show Console
  2. Consoleのプロンプトに、Install Package Controlに出ているコード（version 3用のもの）をペーストしてenterキー
  3. Sublime Text 3を再起動

以下で頻繁に登場しますが、使い方は非常に簡単で以下の通り。

  1. Tools > Command Pallete...を選ぶ
  2. installなどとタイプすると、メニューの中から候補が絞り込まれるので、Package Control: Install Packageを選択する
  3. 数秒後にパッケージの一覧が表示されるので、該当するものの名前を絞り込んでクリックして選ぶ。

一度インストールしたPackageをアンインストールしたい場合は、Tools > Command Pallete...から、Package Control: Remove Packageを選び、アンインストールするPackageの名前をクリックします

4. IMEsupprt (Windows)をインストール

5. Markdown Extendedのインストール

  • PackageCongrolからインストール
  • Markdownの構文配色

6. Monokai Extendedのインストール

  • PackageCongrolからインストール
  • Syntax highlighting用のcolor schemeです
  • markdown文書を編集中に、Preferences > Color Scheme > Monokai Extended Light を選ぶ
  • 下記の Preferencesも参照

7. Markdown Editingのインストール

  • PackageCongrolからインストール
  • モノクロのColor scheme（私は Monokai extendedに落ち着いています）
  • Alt + B (Win)、Command + Option + B (Mac)で太字
  • Alt + I (Win)、Command + Option + I (Mac)で斜字
  • Ctrl + 数字1-6 (Win)、Command + Control+ 数字1-6 (Mac)でHeader

8. spellcheckを有効化

  • Markdownの編集の際だけ、英文のスペルチェックができるように設定する必要がある。他のプログラミング言語の場合はスペルチェックは無意味である。
  1. テキストファイルを開き（からでもなんでも良い）、Markdown Extendedの構文を選ぶ（View > Syntax Markdown Extendedを選ぶ）
  2. Prefereces > Settings More > Syntax Specific Userを選ぶと、Packages/User/Markdown Extended.sublime-settingsが開く。
  3. 下記の{}の中の一行を、{}の中に追加する。
{
    "spell_check": true,
}

結果

間違ったスペルに赤線がつき、右クリックによって単語を登録すると、Packages/User/Preferences.sublime-settings（アクセスはPrefereces > Settings User）に、

{
  "added_words":
   [
       "hoo",
       "hoge" 
   ],
}

というように単語が登録される。

9. OmniMarkupPreviewerのインストール

  • PackageCongrolからインストール
  • Ctrl + Alt + O (Windows)、Command + Option + O (Mac)で、Markdownをブラウザでプレビュー
  • 変更内容が開きっぱなしのブラウザに自動で反映される点で,類似のMarkdown previwer よりもずっと優れている。
  • これは重要
  • なお、これらのパッケージを使わなくとも、
    1. Tools > Build System > Markdown を選んでおき
    2. Tools > Build、または　Ctrl+B (Windows)、あるいはCommand + B (Mac)によって、オリジナルと同じ場所にhtmlファイルが生成されるので、これをブラウザで開けばpreviewすることができる

10. キーバインディングの衝突の回避

  • Sublime Textは必ずしも日本語入力の環境としては洗練されているとはいえず、上記のPackageを入れた結果、key bindingの衝突が起こり、日本語入力時の挙動がおかしくなることが知られている。
  • どのkeyで衝突が起こっているのかを明らかにして、設定を書き換える必要がある。

10-1. FindKeyConfilcts

  1. PackageCongrolからインストール
  2. Tools > Command Pallete > FindKeyConfilcts: AllConflictsによって、すべてのキーマッピングが一覧として出力される
  3. [enter]については、MarkdownEditing, SmartMarkdownが衝突しており、どちらも、箇条書きの途中で漢字変換の確定を行おうとしてEnterを押すと、文字が消えて次の項目ができてしまうので大変鬱陶しい。
  4. [tab]については、MarkdownEditing, SmartMarkdown、Table Editorが衝突。やはり漢字変換の際に、Mac OS X で影響が出る可能性がある。

参考

[enter]
   insert                                   Default               
   commit_completion                        Default               [{"key": "auto_complete_visible"}, {"key": "setting.auto_complete_commit_on_tab", "operand": false}]
   run_macro_file                           Default               [{"key": "setting.auto_indent", "operator": "equal", "operand": true}, {"key": "selection_empty", "operator": "equal", "match_all": true, "operand": true}, {"key": "preceding_text", "operator": "regex_contains", "match_all": true, "operand": "\\{$"}, {"key": "following_text", "operator": "regex_contains", "match_all": true, "operand": "^\\}"}]
   auto_indent_tag                          Default               [{"key": "setting.auto_indent", "operator": "equal", "operand": true}, {"key": "selection_empty", "operator": "equal", "match_all": true, "operand": true}, {"key": "selector", "operator": "equal", "match_all": true, "operand": "punctuation.definition.tag.begin"}, {"key": "preceding_text", "operator": "regex_contains", "match_all": true, "operand": ">$"}, {"key": "following_text", "operator": "regex_contains", "match_all": true, "operand": "^</"}]
   find_next                                Default               [{"key": "panel", "operand": "find"}, {"key": "panel_has_focus"}]
   find_next                                Default               [{"key": "panel", "operand": "replace"}, {"key": "panel_has_focus"}]
   hide_panel                               Default               [{"key": "panel", "operand": "incremental_find"}, {"key": "panel_has_focus"}]
   insert_snippet                           MarkdownEditing       [{"key": "selector", "operator": "equal", "match_all": true, "operand": "text.html.markdown"}, {"key": "preceding_text", "operator": "regex_contains", "match_all": true, "operand": "^#+\\s+[^#]"}, {"key": "preceding_text", "operator": "not_regex_contains", "match_all": true, "operand": "#+$"}, {"key": "following_text", "operator": "regex_contains", "match_all": true, "operand": "^\\s*$"}, {"key": "setting.mde.match_header_hashes", "operator": "equal", "operand": true}, {"key": "auto_complete_visible", "operator": "equal", "operand": false}, {"key": "selector", "operator": "not_equal", "match_all": true, "operand": "markup.raw"}]
   insert_snippet                           MarkdownEditing       [{"key": "selector", "operator": "equal", "match_all": true, "operand": "text.html.markdown"}, {"key": "preceding_text", "operator": "regex_contains", "match_all": true, "operand": "^(\\s*([*\\-+])\\s+)\\S.*"}, {"key": "auto_complete_visible", "operator": "equal", "operand": false}, {"key": "selector", "operator": "not_equal", "match_all": true, "operand": "markup.raw"}]
   insert_snippet                           MarkdownEditing       [{"key": "selector", "operator": "equal", "match_all": true, "operand": "text.html.markdown"}, {"key": "preceding_text", "operator": "regex_contains", "match_all": true, "operand": "^(\\s*([*\\-+])\\s+)\\[[ x]\\]\\s+\\S.*"}, {"key": "auto_complete_visible", "operator": "equal", "operand": false}, {"key": "selector", "operator": "not_equal", "match_all": true, "operand": "markup.raw"}]
   number_list                              MarkdownEditing       [{"key": "selector", "operator": "equal", "match_all": true, "operand": "text.html.markdown"}, {"key": "preceding_text", "operator": "regex_contains", "match_all": true, "operand": "^(\\s*(\\d+\\.)\\s+)\\S.*"}, {"key": "auto_complete_visible", "operator": "equal", "operand": false}, {"key": "selector", "operator": "not_equal", "match_all": true, "operand": "markup.raw"}]
   number_list_reference                    MarkdownEditing       [{"key": "selector", "operator": "equal", "match_all": true, "operand": "text.html.markdown"}, {"key": "preceding_text", "operator": "regex_contains", "match_all": true, "operand": "^(\\s*\\[(\\d+)\\]:\\s*)\\S.*"}, {"key": "auto_complete_visible", "operator": "equal", "operand": false}, {"key": "selector", "operator": "not_equal", "match_all": true, "operand": "markup.raw"}]
   run_macro_file                           MarkdownEditing       [{"key": "selector", "operator": "equal", "match_all": true, "operand": "text.html.markdown"}, {"key": "preceding_text", "operator": "regex_contains", "match_all": true, "operand": "^(\\s*(\\[\\d+\\]:|[*\\-+]|\\d+\\.)\\s+)$"}, {"key": "following_text", "operator": "regex_contains", "match_all": true, "operand": "^\\s*$"}, {"key": "auto_complete_visible", "operator": "equal", "operand": false}, {"key": "selector", "operator": "not_equal", "match_all": true, "operand": "markup.raw"}]
   insert_snippet                           MarkdownEditing       [{"key": "selector", "operator": "equal", "match_all": true, "operand": "text.html.markdown"}, {"key": "preceding_text", "operator": "regex_contains", "match_all": true, "operand": "^\\s*>+\\s+"}, {"key": "auto_complete_visible", "operator": "equal", "operand": false}]
   smart_list                               SmartMarkdown         [{"key": "selector", "operator": "equal", "operand": "text.html.markdown"}, {"key": "preceding_text", "operator": "regex_contains", "operand": "^\\s*([-+\\**]|\\d+\\.+)\\s+"}]
   smart_list                               SmartMarkdown         [{"key": "selector", "operator": "equal", "operand": "text.html.markdown"}, {"key": "selector", "operator": "equal", "operand": "markup.list"}]

 [tab]
   insert_best_completion                   Default               
   insert_best_completion                   Default               [{"operand": true, "operator": "equal", "key": "setting.tab_completion"}, {"operand": ".*\\b[0-9]+$", "operator": "not_regex_match", "match_all": true, "key": "preceding_text"}]
   replace_completion_with_next_completion  Default               [{"operand": "insert_best_completion", "operator": "equal", "key": "last_command"}, {"operand": true, "operator": "equal", "key": "setting.tab_completion"}]
   reindent                                 Default               [{"operand": true, "operator": "equal", "key": "setting.auto_indent"}, {"operand": true, "operator": "equal", "match_all": true, "key": "selection_empty"}, {"operand": "^$", "operator": "regex_match", "match_all": true, "key": "preceding_text"}, {"operand": "^$", "operator": "regex_match", "match_all": true, "key": "following_text"}]
   indent                                   Default               [{"operand": "\n", "operator": "regex_contains", "key": "text"}]
   next_field                               Default               [{"operand": true, "operator": "equal", "key": "has_next_field"}]
   commit_completion                        Default               [{"key": "auto_complete_visible"}, {"key": "setting.auto_complete_commit_on_tab"}]
   run_macro_file                           MarkdownEditing       [{"operand": true, "operator": "equal", "key": "setting.auto_match_enabled"}, {"operand": true, "operator": "equal", "match_all": true, "key": "selection_empty"}, {"operand": "\\*$", "operator": "regex_contains", "match_all": true, "key": "preceding_text"}, {"operand": "^\\*", "operator": "regex_contains", "match_all": true, "key": "following_text"}, {"operand": "text.html.markdown", "operator": "equal", "match_all": true, "key": "selector"}, {"operand": "markup.raw", "operator": "not_equal", "match_all": true, "key": "selector"}]
   indent_list_item                         MarkdownEditing       [{"operand": true, "operator": "equal", "match_all": true, "key": "selection_empty"}, {"operand": "^\\s*(>\\s*)?[*+\\-]\\s+$", "operator": "regex_contains", "match_all": true, "key": "preceding_text"}, {"operand": "^$", "operator": "regex_contains", "match_all": true, "key": "following_text"}, {"operand": "text.html.markdown", "operator": "equal", "match_all": true, "key": "selector"}, {"operand": "markup.raw", "operator": "not_equal", "match_all": true, "key": "selector"}]
   indent_list_multiitem                    MarkdownEditing       [{"operand": false, "operator": "equal", "match_all": true, "key": "selection_empty"}, {"operand": "text.html.markdown", "operator": "equal", "match_all": true, "key": "selector"}]
   complete_underlined_header               MarkdownEditing       [{"operand": "text.html.markdown", "operator": "equal", "match_all": true, "key": "selector"}, {"operand": true, "operator": "equal", "match_all": true, "key": "selection_empty"}, {"operand": false, "operator": "equal", "match_all": true, "key": "auto_complete_visible"}, {"operand": "^\\-+$|^\\=+$", "operator": "regex_contains", "match_all": true, "key": "preceding_text"}, {"operand": "markup.raw", "operator": "not_equal", "match_all": true, "key": "selector"}]
   smart_folding                            SmartMarkdown         [{"operand": "markup.heading.markdown", "operator": "equal", "key": "selector"}]
   smart_table                              SmartMarkdown         [{"operand": "text.html.markdown", "operator": "equal", "key": "selector"}, {"operand": "^\\s*(\\||\\+[-=])", "operator": "regex_contains", "match_all": true, "key": "preceding_text"}]
   smart_table                              SmartMarkdown         [{"operand": "text.html.markdown", "operator": "equal", "key": "selector"}, {"operand": "^\\s*", "operator": "regex_contains", "key": "preceding_text"}, {"operand": "\\s*(\\||\\+[-=])", "operator": "regex_contains", "match_all": true, "key": "following_text"}]
   table_editor_next_field                  Table Editor          [{"operand": true, "operator": "equal", "match_all": true, "key": "setting.enable_table_editor"}, {"operand": "^\\s*\\|", "operator": "regex_contains", "match_all": true, "key": "preceding_text"}, {"operand": "$", "operator": "regex_contains", "match_all": true, "key": "following_text"}]
   table_editor_next_field                  Table Editor          [{"operand": true, "operator": "equal", "match_all": true, "key": "setting.enable_table_editor"}, {"operand": "^\\s*\\+([\\+\\|\\-\\=]|\\s)*", "operator": "regex_match", "match_all": true, "key": "preceding_text"}, {"operand": "([\\+\\|\\-\\=]|\\s)*$", "operator": "regex_match", "match_all": true, "key": "following_text"}, {"operand": "[\\+\\|]\\s*$", "operator": "regex_contains", "match_all": true, "key": "following_text"}]

次にこれらのキーマッピングの設定を上書きして書き換える

10-2. PackageResourceViewer

Sublime Text 3ではPackage毎のキーバインディングの設定ファイルはそのままでは編集できないので、このPackageResourceViewerによって、設定ファイルを編集可能なように書き出す。

なお、手動でメニューから設定ファイルを開き、それを上記のフォルダを準備してその中に別名保存してもよく、それほど手間ではないし、そのほうが他の余計なファイルがフォルダにないのですっきりして良い、という人もいるかもしれない。手動の方法はこちらや、こちら。

  1. PackageCongrolからインストール
  2. Tools > Command Pallete > PackageResourceViewer: Extract Packageを選び、さらにメニューから希望のPackageを選ぶことによって、そのPackageの設定ファイルが、Packages folder (Preferences > Browse Packages...でフォルダが開く。Windowsでは、C:\Users\xxxxxxxxx\AppData\Roaming\Sublime Text 3\Packages, MacではUsers/xxxxx/Library/Application Support/Sublime Text 3/Packages)の中に書き出され、編集できるようになる。この辺の挙動は　Sublime Text 2とは違っている模様。
  3. Package毎にキーバインディングを変更する（以下の通り）。

MarkdownEditing

  1. 上記手順で、PackageResourceViewer: Extract Packageにより、MarkdownEditingの設定ファイルを展開する
  2. Preferences > Browse Packages...でフォルダに移動
  3. MarkdownEditing フォルダの中の Default (Windows).sublime-keymapまたはDefault (OSX).sublime-keymapを開く
  4. Find > Find... で enterを探す。309行目から373行目までが該当範囲。
  5. "keys": ["enter"]となっている箇所をそれぞれ"keys": ["shift+enter"]などに書き換える(Replaceを使うのが良いでしょう)
  6. 同様にして（必要ならば）tabキーも編集できます
    { "keys": ["enter"], "command": "insert_snippet", "args": {"contents": " ${TM_CURRENT_LINE/(#+?)[^#].*$/$1\n/}"}, "context":
        [
            { "key": "selector", "operator": "equal", "operand": "text.html.markdown", "match_all": true },
            { "key": "preceding_text", "operator": "regex_contains", "operand": "^#+\\s+[^#]", "match_all": true },
            { "key": "preceding_text", "operator": "not_regex_contains", "operand": "#+$", "match_all": true },
            { "key": "following_text", "operator": "regex_contains", "operand": "^\\s*$", "match_all": true },
            { "key": "setting.mde.match_header_hashes", "operator": "equal", "operand": true },
            { "key": "auto_complete_visible", "operator": "equal", "operand": false },
            { "key": "selector", "operator": "not_equal", "operand": "markup.raw", "match_all": true }
        ]
    },
    // Extend lists
    { "keys": ["enter"], "command": "insert_snippet", "args": {"contents": "${TM_CURRENT_LINE/^(\\s*([*\\-+])(\\s+)).*/\n$2$3/}"}, "context":
        [
            { "key": "selector", "operator": "equal", "operand": "text.html.markdown", "match_all": true },
            { "key": "preceding_text", "operator": "regex_contains", "operand": "^(\\s*([*\\-+])\\s+)\\S.*", "match_all": true },
            { "key": "auto_complete_visible", "operator": "equal", "operand": false },
            { "key": "selector", "operator": "not_equal", "operand": "markup.raw", "match_all": true }
        ]
    },
    // Extend lists with GFM tasks
    { "keys": ["enter"], "command": "insert_snippet", "args": {"contents": "${TM_CURRENT_LINE/^(\\s*([*\\-+])(\\s+)\\[[ x]\\](\\s+)).*/\n$2$3[ ]$4/}"}, "context":
        [
            { "key": "selector", "operator": "equal", "operand": "text.html.markdown", "match_all": true },
            { "key": "preceding_text", "operator": "regex_contains", "operand": "^(\\s*([*\\-+])\\s+)\\[[ x]\\]\\s+\\S.*", "match_all": true },
            { "key": "auto_complete_visible", "operator": "equal", "operand": false },
            { "key": "selector", "operator": "not_equal", "operand": "markup.raw", "match_all": true }
        ]
    },
    // Extend Numbered Lists
    { "keys": ["enter"], "command": "number_list", "context":
        [
            { "key": "selector", "operator": "equal", "operand": "text.html.markdown", "match_all": true },
            { "key": "preceding_text", "operator": "regex_contains", "operand": "^(\\s*(\\d+\\.)\\s+)\\S.*", "match_all": true },
            { "key": "auto_complete_visible", "operator": "equal", "operand": false },
            { "key": "selector", "operator": "not_equal", "operand": "markup.raw", "match_all": true }
        ]
    },
    // Extend Numbered Reference
    { "keys": ["enter"], "command": "number_list_reference", "context":
        [
            { "key": "selector", "operator": "equal", "operand": "text.html.markdown", "match_all": true },
            { "key": "preceding_text", "operator": "regex_contains", "operand": "^(\\s*\\[(\\d+)\\]:\\s*)\\S.*", "match_all": true },
            { "key": "auto_complete_visible", "operator": "equal", "operand": false },
            { "key": "selector", "operator": "not_equal", "operand": "markup.raw", "match_all": true }
        ]
    },
    // Remove empty list item
    { "keys": ["enter"], "command": "run_macro_file", "args": {"file": "Packages/MarkdownEditing/macros/Remove Empty List Item.sublime-macro"}, "context":
        [
            { "key": "selector", "operator": "equal", "operand": "text.html.markdown", "match_all": true },
            { "key": "preceding_text", "operator": "regex_contains", "operand": "^(\\s*(\\[\\d+\\]:|[*\\-+]|\\d+\\.)\\s+)$", "match_all": true },
            { "key": "following_text", "operator": "regex_contains", "operand": "^\\s*$", "match_all": true },
            { "key": "auto_complete_visible", "operator": "equal", "operand": false },
            { "key": "selector", "operator": "not_equal", "operand": "markup.raw", "match_all": true }
        ]
    },
    // Extend blockquote
    { "keys": ["enter"], "command": "insert_snippet", "args": {"contents": "${TM_CURRENT_LINE/^(\\s*((>+\\s+)+([*\\-+]\\s+)?)).*/\n$2/}"}, "context":
        [
            { "key": "selector", "operator": "equal", "operand": "text.html.markdown", "match_all": true },
            { "key": "preceding_text", "operator": "regex_contains", "operand": "^\\s*>+\\s+", "match_all": true },
            { "key": "auto_complete_visible", "operator": "equal", "operand": false }
        ]
    },

SmartMarkdown

  1. 上とほぼ同じ。
  2. Preferences > Browse Packages...でフォルダに移動
  3. SmartMarkdown フォルダの中の Default.sublime-keymapを開いてenter、(必要ならtabも）のキーバインディングを変更

11. Preferences

11-1. Packages/User/Markdown Extended.sublime-settings

  • Prefereces > Settings More > Syntax Specific Userを選ぶ
  • font_face プログラミングはconsolasなどの等幅フォントが当たり前ですが、Markdownで文章を書く場合は、proportionalなフォントのほうが、個人的には気持ちがよいです。
  • "color_scheme"については、更に解説が必要。
    • "Packages/Monokai Extended/Monokai Extended Light.tmTheme"という値を設定するだけではダメで、上記の Package Resource Viewerを用いて、Packagesフォルダ内に、 Monokai Extendedを自動生成し、その中にこの編集可能な設定ファイルを extractする必要があります。Tools > Command Pallete > PackageResourceViewer: Extract Package 

{
    "font_face": "Gill Sans MT",
    "font_size": 18,
    "spell_check": true, 
    "color_scheme": "Packages/Monokai Extended/Monokai Extended Light.tmTheme", 
}

11-2. Packages/User/Preferences.sublime-settings

  • Prefereces > Settings User を選ぶ
  • "added_words" ... "spell_check"をtrueに指定すると自動的にここに登録単語が書き込まれるようになる。
  • "translate_tabs_to_spaces"でタブをスペースに置換する（defaultは4、"tab_size"で指定できる）
  • "color_scheme"、"soda_classic_tabs","soda_folder_icons","theme"はいずれも下記のSoda Theme関連。"color_scheme"に関しては、メニューからcolor_schemeを変更すると、変更内容がここに上書きされるので要注意。

{
	"added_words":
	[
		"hoge",
	],
	"color_scheme": "Packages/User/Espresso Soda.tmTheme",
	"ignored_packages":
	[
		"Vintage"
	],
	"soda_classic_tabs": true,
	"soda_folder_icons": true,
	"theme": "Soda Light 3.sublime-theme",
	"translate_tabs_to_spaces": true
}

12. その他のパッケージ

SmartMarkdown

  • Tabキーで見出し項目の内容を折り畳むことができる
  • tab, および enterが衝突を起こすので上記の手順でキーバインドを変更する必要あり

Word Count

  • ステイタスバーに文字数が表示される
  • 字数制限のある文章の執筆には必須

Origami

  • 操作画面を複数のpaneに分割できる
  • OS Xでは標準の機能(Split View)で同様のことが実現できる

Table Editor

  • Markdownにおけるtableの入力をtabキーを使って容易にするもの
  • 上記 SmartMarkdownのキーバインドと衝突する
  • 開発が止まっている

Google Spell Check

  • 標準の辞書に入っていない単語をgoogleで検索して正しいスペルに変換する

Soda Theme

  • 洗練されたUIのテーマにカスタマイズ
  • color schemeも上記のURLが入手できるが、これがなかなかよい。Markdown以外はこれを好んでいる。
  • インストール法はさらに解説が必要
81
75
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
Sign upLogin
81
75

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?