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.

How do you write website copy that people actually read?

When I first was given the task of writing for the web, I went at it the same way as a lot of people. I thought that all I had to do was make web content that used the same big words as I read everywhere else. Words that made whatever the website was about sound important, well-to-do, and “corporationey”.

The world yawned…

That approach didn’t work then, and really nothing has changed.

I have assembled these tips to hopefully give you some insight on how to write engaging copy that gets people to do what you want them to. Good Luck.

Give your users something to do!

The ideal website will not only make you look professional and enhance your credibility, but will have a logical conversion path for people to take and perform the action you want them to. This could be filling out a contact form, signing up for a newsletter, or buying something. Every page on your site should have a call to action where people can complete the action that you want them to do and where you give them a reason to click on that link.

Be helpful, don’t just talk about yourself and how great you are

This is probably the most important thing to remember when writing your copy. While you want to explain what you do, resist all the urges to make you or your company sound big, important or "the best". This kind of copy makes people leave your website before doing anything. Readers are very good at distinguishing info that they need from "marketing" that they don’t.

Being helpful simply means giving answers to people’s questions, concerns and explaining complicated things to them in ways that save their time, make them bookmark your pages for later, and make them think that your site is worth sharing with a friend.

Do your keyword research

SEO is something of a complicated subject. A lot of people know they need it, but don’t really know what it is. Sort of like a vaccine. The fact is that while good on-page SEO is important in order to rank well, writing keywords into your copy needs to be taken into the grand scheme of what the page is meant to do, and what action the reader is meant to take after reading it.

Concentrating on creating really good content that people will likely link to out of merit is really the best traffic getting strategy you can have, which ultimately is what you are after with SEO.

Make it fun and interesting

If your audience are just normal folks like you, then they probably like to read the same stuff as you. With the growth of Facebook and social media, a lot of the rules of writing have gone out the window. Maintaining attention is priority number one. If you don’t particularly like reading dry textbook-like copy, your readers don’t really either.

In addition to just writing as if you were writing to one person, you can do things like add fun pictures to your posts or articles that break up large blocks of text and keep the mood light. Things like the meme generator can give your post original content and make it more fun to read. If you are going with stock photos, choose something interesting that relates to the topic. But as always, carefully consider what you want to accomplish with stock photos because if your information looks too much like marketing, they can also turn off your readers.

It boils down to what kind of voice you want your site to have – ideally it should fit within your own. Give people praise when thanking them for filling out a form, use figures of speech they understand in your messages, and make your copy sound more "real".

Don’t use big words just to sound smart.

On a lot of business websites, you wonder if the person writing the copy had a thick six-sigma marketing textbook at their side while writing out the copy. There are so many terms in that kind of material that people NEVER use in normal speech, other than when they are trying to bullshit someone into thinking they are smart. Best-of-breed, utilize (just say use), expertise, all your (X) needs, are all things that you shouldn’t have in your copy.

Think about your customers as they are first introduced to your company and to your industry. They’re uneducated in that stuff. They don’t know all the jargon and words that you use in your daily operations, and you have to find out what words they do use. You never want to go above someones head because the moment they don’t understand anymore, they leave your site and hop onto a competitors.

Spell check – some people won’t notice, but it’s a big deal to others

Spelling and grammar still matter, but not to everyone. People who are bad at it probably won’t notice or care when you make a mistake. People who are good at it will think your are some kind of idiot. It’s best have someone read through your copy who knows grammar well, and can make edits in that department for you. It’s not worth it to lose an educated customer who respects spelling and grammar just for a tiny error. People can be petty.

Say what you need to say in as few words as possible. People like websites that care about their time

While this goes for all writing in general, it is especially true on the web where attention spans are slim and distractions are plenty. The best thing you can do is write a lot of content to explain things as you would say them, then edit down that content to get the main points across in as few words as possible. There is a bit of difference between a blog post which would be more conversational, and a services page where people just want to understand what you offer in as little time as possible.

In general people like websites that respect their time, don’t try to BS them with frilly or extraneous copy, and never try to pull a fast one on them.

The web is filled with a lot of junk, but don’t be afraid to write something good

If someone likes and shares a particular post, then it will be a source of traffic for your site for a long while. The time you put into coming up with great content for your own website is not lost. It either gets you closer to writing the good stuff, or you hit gold with something that really resonates with your audience.