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)

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Join the Conversation

16 Comments

  1. 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. 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!

      1. 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.

  3. 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!

  4. 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/*

  5. 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”,

  6. 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!

  7. 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

Leave a comment

Leave a Reply to Hick Cancel reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.