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.
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.
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.
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.
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.
About Grady McNeill
Hey there Grady. Love this post.
I’m trying to get your command to work, but when I copy the Markdown with the commands you’ve put down, it spits it back out to me with a whole bunch of CSS that I don’t need at all. Any fixes/ideas why this might be happening? I’d rather not scroll down to the end where all the HTML is, and have it work like yours does in the GIF.
Thanks!
Sounds like a problem with the User settings file for the Markdown Preview package. The code snippet I provided just overrides a few default settings so it will not copy all the CSS to the clipboard. If the user settings file is not changed, you’ll just get the default output (css and all that).
If you open the file by going to:
Preferences > Package Settings > Markdown Preview > Settings – User
If you overwrite the code in the user settings file with the snippet above, it should work. Other than that I am not sure what the problem could be.
The package has a few other things that can be customized by the Settings – User file. If you open the Settings – Default file, you can read what can be customized by the package.
Thanks for commenting, hope that helps.
Right on! Really appreciate you posting this. I’ve been wanting to get this functionality in ST but couldn’t get the package settings tweaked just right. By any chance, do you know if you can set KB shortcuts to multiple package functions? Like if I wanted this Ctrl+e+m to remain but set another (Alt+m, for example) to trigger Markdown Preview to show (preview) my markdown doc in a browser, that should work right?
Anyway, thanks again!
You can set up a second shortcut to preview in the browser, but in this case it may not be what you want. Once you have customized the Markdown Preview Package’s user settings file, that is how it will export the markdown. It is overriding the default way it exports. So your selected text would still preview in the browser, but it would be simply unstyled HTML which would be somewhat hard to read. Rather than always previewing in a browser you may find a dedicated app like Markdownpad better for editing longer documents.
Good word. Thank you sir!
Hey Grady.
Love this post. I’m trying to get your command to work, but when I copy the Markdown with the commands you’ve put down, it spits it back out to me with a whole bunch of CSS that I don’t need at all.
The CSS you see is the inline CSS that the Package adds by default. The MarkdownPreview Sublime Text package needs to be customized with some settings otherwise it will not do what you want. The package settings need to be overridden with the code snippet I provided and then the “Markdown Preview: Copy to Clipboard” command will only convert the text you highlight into HTML and won’t add extra stuff like headers and inline CSS. Once you update the “Settings – User” file you should restart Sublime Text and it should be working.