Convert Markdown to HTML with Sublime Text and the Markdown Preview package

I have been working with markdown for a couple years now and it’s a great way to save a ton of time getting content onto the web. But the more you use it, the more you look for shortcuts.

There are a bunch of web and desktop applications for working with markdown that give you a 2-up view. They show your markdown document on one side, and the final rendered HTML on the other. You can usually export the file as HTML , but I have noticed that a lot of these just spit out an entire HTML document complete with head and body elements. This is cool, but not that useful if most of the time you are just working with the code on an existing page.

A while back I discovered a good application for Windows called MarkdownPad. One thing I really like about MarkdownPad is being able to highlight any of your text, then right-click and choose “Copy as HTML”. This will copy just the selected HTML to your clipboard, without any extra code. It will simply be the headers, paragraphs and lists that you highlighted.

sublime convert markdown html

I find that apps like these are awesome for editing a longer document, because the 2-up view is really handy. But for small pieces of writing, I would rather not have to leave Sublime Text. After some searching, I found a way to do very fast markdown to HTML conversion so I can paste wherever the code needs to go, such as in a WordPress page or existing HTML file.

Getting just the HTML you want with no extra markup

This method uses a Sublime Package called Markdown Preview. The package does a couple things, such as generating an HTML page from some highlighted markdown text. With some tweaking of the user files, it can also become a huge time saver for just converting your selected markdown text into HTML without any extra code.

So this allows a lot faster workflow because you can type some Markdown, highlight it, run the command to copy into your clipboard, and then paste into your HTML file or into the WordPress editor. No more extraneous code, and no more having to switch apps.

markdown to html sublime

Set up Markdown Preview and Customize it

To set up Markdown Preview like I have it, you will have to make a couple edits to your user file for the package. Just a reminder — always make your edits to the user file and not the default, because that will wipe your changes if you update. The user file is safe from these updates.

This snippet will customize the output of the Markdown Preview package. You can access this file this way.

Preferences > Package Settings > Markdown Preview > Settings – User

Once you have it set up, you can access the command from the Command Pallete (CNTL+SHIFT+P on Windows, CMD+SHIFT+P on Mac) then typing “mark” to bring up the command to copy to clipboard.

command-palette

So now we have the command available, but it could be a little better if it was mapped to a keyboard shortcut.

It’s actually a little trickier to set up a Key Binding for something in a package, but I managed to find the proper code for it. This will go in Key Bindings – User

I have it mapped to CNTL+E+M (Control-Export-Markdown made sense to me) but you can change the key combo to whatever you like.

Other Handy Markdown Stuff

Also – While working with Markdown in sublime text, I use another awesome package called MarkdownEditing which allows you to get a little more visual representation of how your code will look, such as it will bold your headlines. It adds a little bit of style to the document without going overboard.

markdownediting sublime

Sidenote – if you are on a Mac, Marked 2 is a good native application for working with markdown. It’s also written by Brett Terpstra who wrote MarkdownEditing for Sublime Text.

Sidenote 2 – Update Aug 2017, I recently discovered the Typora Writing App which has become my new favorite way to write and edit markdown files.

Hopefully this saves you as much time as it does for me.