Sublime Text Markdown Syntax Highlighting

Instructions for use with SublimeText3 in the comments below

sublime-markdown

One of the features I find lacking in Sublime Text is the default support for Markdown syntax highlighting. Fortunately Sublime Text can be customized and we can define a color scheme of our own.

To get the results as shown in the screenshot above, edit your theme file (~/Library/Application Support/Sublime Text 2/Packages/Color Scheme - Default/Monokai.tmTheme) and paste in the code below (which is inspired upon this gist) just before the </array>

<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>#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>#268bd2</string>
	</dict>
</dict>

Once you’ve saved the theme you should get the same results as seen in the screenshot above (no need for a restart) when viewing markdown files

Whilst you are at it you can also install Markdown Preview which lets you preview your files in the browser (and thus convert it to HTML)

Elsewhere , ,

15 Responses to Sublime Text Markdown Syntax Highlighting

  1. Anthony says:

    Since it’s an edit to the ST default files, this will probably be gone after an update?
    If so, it would be nice if this could get merged in some way to the default Markdown language package.

  2. michel says:

    Great !
    However I preferred to copy monokai and create a MonikaiMD.tmTheme, and use this trick : http://hiltmon.com/blog/2012/11/07/multiple-themes-in-sublime-text-2/

    It works like a charm, and your additions makes MD editing very comfy. Thanks !

  3. Michael Merline says:

    Would it be possible to post code that reflected syntax highlighting for *MultiMarkdown* as well? This is really terrific information either way. Thanks for sharing!

    • Bramus! says:

      Michael, I’m not familiar with MultiMarkdown, so cannot help you any further.

      • Michael Merline says:

        After playing around with this code on a few theme files, it seems like it is fuly compatible with MultiMarkdown syntax, but just doesn’t highlight some of the features added to MultiMarkdown from Gruber’s stock Markdown.

  4. Jordan says:

    From Terminal:

    cd ~/Library/Application\ Support/Sublime\ Text\ 2/Packages/Color\ Scheme\ -\ Default

    subl Monokai.tmTheme

    add the above and restart. Works like a charm!! Thanks!

  5. Adnan says:

    I am using a theme of my own, and so the file to be modified is in the ‘user’ folder inside of Packages.

  6. miranda ackerman says:

    For Sublime 3 on Linux
    Sublime 3 is good at allowing user customization, to add a custom package go to
    Preferences -> Browse Packages…
    this opens the users custom folder, the packages here override the ones in the default
    you can add your *customizedMonokai.tmTheme* theme there.

    to use the custom theme just
    Preferences -> Settings-User…
    and add the line
    “color_scheme”: “Packages/User/customizedMonokai.tmTheme”,

    By the way in Linux the default *Monokai.tmTheme* can be located in the *Color Scheme – Default.sublime-package* zip file at */opt/sublime_text/Packages/*

  7. Sanford Redlich says:

    Update of Miranda’s instructions, for Sublime 3 on OSX (thanks Miranda!):

    Sublime 3 is good at allowing user customization, to add a custom package go to
    Preferences -> Browse Packages…
    this opens the users custom folder, the packages here override the ones in the default
    you can add your *customizedMonokai.tmTheme* theme there.

    STEPS

    Create the new overriding tmTheme file
    * create this file: “/Users/[user name]/Library/Application Support/Sublime Text 3/Packages/User/customizedMonokai.tmTheme”

    Get the xml for the theme you want
    * copy /Applications/Sublime Text.app/Contents/MacOS/Packages/Color Scheme – Default.sublime-package to somewhere
    * change its postfix to “.zip”
    * unzip it and open the tmTheme you want, copy the contents into the “customizedMonokai.tmTheme” file created above

    To use the custom theme
    * just go to Preferences -> Settings-User…
    * add the line
    “color_scheme”: “Packages/User/customizedMonokai.tmTheme”,

  8. Pingback: Setting up Sublime Text 3 for Markdown, CoffeeScript, Jade, LESS, Stylus and Ruby | Sanford on Ruby and JavaScript

  9. john says:

    It seems that this theme doesn’t highlight the indented code-snippets…

  10. Hick says:

    Great job!!!
    hehe, so excited to see the picture!!!
    the only reason now for me not to replace emacs +asciidoc with sublime + markdown is the color theme! it seems like to be good solution!

  11. Hick says:

    I can understand that the following code defined the color of the heading of markdown. I want to to define different color for different level of heading, it seems like I need to modify the markdown.tmLanguage to define different heading like “markup.heading1″ … “markup.heading5″ a t first ???

    name
    Markup: Heading
    scope
    markup.heading
    settings

    fontStyle
    bold
    foreground
    #cb4b16

  12. Pingback: Sublime Text3 で Markdown のシンタックスハイライトを有効にする手順

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>