note から WordPress に出戻りました!😭

[ Sublime Text ] Markdown のシンタックスハイライトを変更するとか

だるかぶ

サンダルでスーパーカブ乗りの『だるかぶ』です!
ご訪問ありがとうございます。ゆっくりしていってね。(本ページは広告を含みます。)

Sublime Text 2 で Markdown のシンタックスハイライトを変更する方法がわかったのでご紹介します。

▲ こんな感じ

Markdown から HTML を生成してプレビューするパッケージはあったのですが、シンタックスハイライトを変更する方法が無くて、探すのに苦労しました。

Sublime Text 2 で Markdown のシンタックスハイライトを変更する方法

Sublime Text Markdown Syntax Highlighting | Bram.us で紹介されている次のコードをコピーする。

※ 個人的な好みで、少し改定しています。

<!-- ここから Markdown 用の記述 -->
<dict> <key>name</key> <string>Markdown: Linebreak</string> <key>scope</key> <string>text.html.markdown meta.dummy.line-break</string> <key>settings</key> <dict> <key>background</key> <string>#A57706</string> <key>foreground</key> <string>#E0EDDD</string> </dict>
</dict>
<dict> <key>name</key> <string>Markdown: Raw</string> <key>scope</key> <string>text.html.markdown markup.raw.inline</string> <key>settings</key> <dict> <key>foreground</key> <string>#269186</string> </dict>
</dict>
<dict> <key>name</key> <string>Markdown: Punctuation for Inline Block</string> <key>scope</key> <string>punctuation.definition.raw.markdown</string> <key>settings</key> <dict> <key>foreground</key> <string>#269186</string> </dict>
</dict>
<dict> <!-- 見出し --> <key>name</key> <string>Markup: Heading</string> <key>scope</key> <string>markup.heading</string> <key>settings</key> <dict> <!-- <key>fontStyle</key> --> <!-- <string>bold</string> --> <key>foreground</key> <string>#ff9900</string> <!-- <string>#cb4b16</string> --> </dict>
</dict>
<dict> <key>name</key> <string>Markup: Italic</string> <key>scope</key> <string>markup.italic</string> <key>settings</key> <dict> <key>fontStyle</key> <string>italic</string> <key>foreground</key> <string>#839496</string> </dict>
</dict>
<dict> <key>name</key> <string>Markup: Bold</string> <key>scope</key> <string>markup.bold</string> <key>settings</key> <dict> <key>fontStyle</key> <string>bold</string> <key>foreground</key> <string>#586e75</string> </dict>
</dict>
<dict> <key>name</key> <string>Markdown: Punctuation for Bold, Italic</string> <key>scope</key> <string>punctuation.definition.bold.markdown, punctuation.definition.italic.markdown</string> <key>settings</key> <dict> <key>foreground</key> <string>#586e75</string> </dict>
</dict>
<dict> <key>name</key> <string>Markup: Underline</string> <key>scope</key> <string>markup.underline</string> <key>settings</key> <dict> <key>fontStyle</key> <string>underline</string> <key>foreground</key> <string>#839496</string> </dict>
</dict>
<dict> <key>name</key> <string>Markup: Quote</string> <key>scope</key> <string>markup.quote</string> <key>settings</key> <dict> <key>fontStyle</key> <string>italic</string> <key>foreground</key> <string>#268bd2</string> </dict>
</dict>
<dict> <!-- 区切り線 --> <key>name</key> <string>Markup: Separator</string> <key>scope</key> <string>meta.separator</string> <key>settings</key> <dict> <!-- <key>background</key> --> <!-- <string>#eee8d5</string> --> <!-- <key>fontStyle</key> --> <!-- <string>bold</string> --> <key>foreground</key> <string>#666666</string> <!-- <string>#268bd2</string> --> </dict>
</dict>
<!-- ここまで Markdown 用の記述 -->

次のファイルの `</array>` の前にペーストする。

~/Library/Application Support/Sublime Text 2/Packages/Color Scheme - Default/Monokai.tmTheme

以上で完了です。

簡単に見出しへジャンプできる

Markdown では、行頭に `#` を付けて見出しを書けます。

[ Ctrl ] + [ R ] で、見出し行だけを階層付きで一覧することができます。

▲ こんな感じ。

行頭に `#` がついていると、CSS のセレクタと同じように解釈されるようです。

感想

シンタックスハイライトで、Markdown がとっても書きやすくなりました!
ありがとうございます!

追記@2014-04-30

Markdown をシンタックスハイライトする [ Monokai Extended ] というパッケージがありました。
これだと、インストール一発で終わります。

参考 : Sublime Text で Markdown を快適にする 3 つのパッケージ – 情報系大学生の Web メモ

現場からは以上です。それでは、またッ!!!