How to Set Up Sublime Text for a Vastly Better Markdown Writing Experience

Over the last couple of months, I've been writing a lot of Markdown, primarily for these blog posts. I've tried various text editors, but haven't been entirely happy with the writing experience until last week when I discovered two excellent packages for Sublime Text. Here's the setup which I used to write this very post and which I'll be using to write Markdown from now on.

Writing Markdown in Sublime Text

I've been a long-time fan of the Sublime Text editor. It's lightweight, fast, and highly customizable. Plus, it simply looks gorgeous on a MacBook with a retina display.

If I need to sit down and focus on my writing, I like to enter Sublime's distraction free mode, which then switches to fullscreen and hides everything but the current file's content. That makes it a lot easier to stay focused on the task of writing:

Sublime Text in Distraction Free Mode

You can either click on View | Enter Distraction Free Mode in the menu bar or use the (slightly uncomfortable) CTRLCMDSHIFTF keyboard shortcut.

Additionally, I usually activate the Do Not Disturb mode to prevent Mac OS X from showing Growl notifications in the upper right corner of the screen. Again, this helps me focus solely on the writing.

The Monokai Extended Package

While the writing experience in Sublime's distraction free mode is already pretty good, the syntax highlighting for Markdown, frankly, isn't:

Markdown without syntax highlighting in Sublime Text

If you install the Monokai Extended package and select the Monokai Extended color scheme, the highlighting will improve drastically:

Markdown with syntax highlighting in Sublime Text

The background color will be slightly darker, which I like. If you'd rather stick to the original Monokai one, go for the Monokai Extended Bright color scheme instead:

Monokai Extended color scheme in Sublime Text

Besides highlighting Markdown, the package will provide additional highlighting for Less, HTML, Handlebars, and more. Color all the things!

The Markdown Extended Package

Now that the Markdown text is highlighted a lot better, let's look at how fenced code blocks are displayed. By default, Sublime won't highlight them:

Fenced code blocks without syntax highlighting in Sublime Text

Luckily, the author of the Monokai Extended package, Jon Schlinkert, provides a package named Markdown Extended for making code blocks pretty, too. With that package installed, you can enjoy language-specific syntax highlighting:

Fenced code blocks with syntax highlighting in Sublime Text

Make sure that the syntax for the current file is set to Markdown Extended:

Active Syntax in Sublime Text

I'm pretty happy with this setup. Thanks, Jon, for providing two truly helpful packages that make writing Markdown in Sublime Text even more enjoyable.

Use the coupon code LAUNCHDAY for $10 off!

Learn ES6

13 Comments

Jannis

Thanks for the great summary. To keep your sanity when working with tables in MD I can recommend the Sublime Table Editor: https://github.com/vkocubinsky/SublimeTableEditor

Kevin Sullivan

THANK YOU! I was having trouble finding a dark markdown syntax highlighter - they were all incomplete or light themed...

Anže

I was a bit puzzled following your guide. Monokai Extended doesn't give you no MD coloring. There are no syntax highlighting rules installed with it. They are installed with Markdown Extended. Only when Markdown Extended is installed, will Monokai extended color the MD file appropriately. The otherwise nice guide would be more straightforward if it was "reversed".

Glenn Dixon

This didn't work for me. Color scheme set to Monokai Extended, syntax set to Markdown Extended. I've got totally default yellow highlighting only.

wtf?

ST3 - is that the problem possibly?

Glenn Dixon

ok uh, I wish I could delete the previous comment. But, just in case I'm not the only stupid person in the universe, it helps to close any open documents and then reopen them.....

Daniel Smedegaard Buus

Hmmm, I have the same issue as Glenn, but reopening files (or restarting Sublime) doesn't help. Enabling "Markup Extended" removes all highlighting. Regular "Markdown" has some highlighting, but nothing like the screenshots here. Sublime 3 here as well... Strange...

Daniel Smedegaard Buus

And now I wish I could delete my comment :'D The markdown I was viewing just wasn't properly formatted. https://github.com/jonschlinkert/sublime-markdown-extended helped :)

Noah Coad

Gosh this is so good. Thank you! Was wondering why Markdown Extended by itself wasn't giving better MD syntax highlighting. This nailed it.

Mike

I had trouble getting this one working, but basically what I did to get this to work was switch to completely different theme and then pick Monokai Extended and it worked (I'm using Sublime 2.0.2)

amy

Sublime will still open the .md extension by default as markdown. You can override this by opening a markdown file and then selecting Preferences > Settings - More > Syntax Specific - User. Then force Monokai Extended (or whatever you want) for markdown syntax.

{
    "color_scheme": "Packages/Monokai Extended/Monokai Extended.tmTheme"
} 
Gavin

Thank you very much for this post! There are two more utilities that really improve the markdown experience (in my opinion) that I would recommend adding: SmartMarkdown which adds a lot of extra functionality including support for tables and collapsing sections. And Markdown Preview which doesn't really help when working in sublime but still is quite useful when you want to export your work into various formats.

Claudia

Today I installed the Chrome extension called Markdown Reader (version 1.0.14) and it auto-updates the display when you save the markdown files in Sublime Text. I am starting to really enjoy this md stuff.

Thanks for this post - I enjoy the nice highlighting.