Web
Article

Spicing up Your Emails with Markdown

By Ralph Mason

Markdown provides a simple way to mark up plain text so that it can be converted to HTML.

I use Markdown daily to write documents, website content and so on. I also compose a lot of emails, so I was delighted to stumble on an easy way to create pretty HTML emails with Markdown too.

Markdown Here

the Markdown Here logoMarkdown Here (MDH) is a simple browser extension that can be installed in browsers such as Chrome, Firefox, Safari and Opera. It adds an icon to your browser's address bar:

MDH address bar icon

Simply add Markdown syntax to your email, and when you're ready to send, click the MDH icon. (You can also activate MDH via a keyboard shortcut of your choice—CTRL + ALT + M by default—or a via a dropdown context menu.) Clicking that icon means that all of your Markdown is converted to HTML—so you end up sending an HTML email. (No Markdown actually gets sent with the email, so you don’t have to worry about email clients not understanding it.)

For example, you can send emails that look like this:

email styled by MDH

Other Uses

If sending email in the browser isn't your thing, you can also use MDH with email clients such as Thunderbird, Postbox and Icedove.

And Markdown Here isn't limited to email. You can use it in other web editing interfaces such as Google Groups, Evernote and WordPress.

Creating HTML Emails

I tend to send email directly through Gmail in my browser. It's really nice to be able to enhance emails with some HTML formatting, which is easy with Markdown.

I often need to send longish emails, and it's great to be able to add headings, quotes, inline code, code blocks and lists to make the email readable and break up the content.

Here are some examples of what you can do.

Code

Being involved in web design and development, I often send code samples in emails. Writing inline code is as easy at this:

You could try `.element {display: block;}` instead.

After the MDH conversion, the above text look like this:

inline code

And a block of code is easy too. Note that you can specify the language to get nice syntax highlighting:

```javascript
(function() {
    var method;
    var noop = function () {};
    var methods = [
        'assert', 'clear', 'count', 'debug', 'dir', 'dirxml', 'error',
        'exception', 'group', 'groupCollapsed', 'groupEnd', 'info', 'log'
    ];
    var length = methods.length;
    var console = (window.console = window.console || {});
}());

// From the HTML5 Boilerplate
```

And this is the result:

a block of code with syntax highlighting

Quoting

It's handy to be able to quote text in an email. Simply copying the text and placing a > before it is super easy:

> Should I click this email link saying I'll win $1MM?

Nah, maybe not.

Resulting in this:

quoted text

Rather than sending long, potentially unsightly URLs, you can easily convert them to nice, text-based links:

There are some great articles on [SitePoint](http://www.sitepoint.com/).

Which renders like so:

linked text

Lists

Text is often easier to read in lists. Creating ordered and unordered lists is as simple as this:

- first item in an unordered list
- second item in an unordered list

1. first item in an ordered list
1. second item in an ordered list

This is the result:

unordered and ordered lists

Headings

You can markup headings like so:

# Heading One

Some text

## Heading Two

Rendering thusly:

heading examples

Emphasis

You can easily add italics and bold like so:

*These* are both _italic_, and **these** are both __bold__. 
And this is *__italic and bold__*.

Which appears like this:

italics and bold

Horizontal Rule

If I'm changing topic, it can be nice to throw in a horizontal rule:

End of one topic.

---

Beginning of the next …

Which outputs like this:

horizontal rule

Tables

Admittedly, I rarely need to place a table in my emails, but it's nice that you can:

Selector    |   Property        |   Value
---         |   ---             |   ---
`body`      |   **color**       |   *#30353b*
`.aside`    |   **float**       |   *right*
`img`       |   **display**     |   *inline-block*

The above text renders like this:

a table

Images

You can add images to your email, as long you can link to them somewhere online:

Here's a cool picture of grass:

![grass](https://unsplash.it/600/200?image=487)

an image of grass

Other HTML Elements

MDH also allows you to add HTML elements that aren't covered by Markdown. For example, you could add superscript:

This is the 1<sup>st</sup> presentation …

superscript example

This text should be <s>crossed out</s>.

strikethrough demo

Styling

MDH uses GitHub-like styles by default. But you can easily customize the styling if you want. For example, in Chrome for Mac, go to Window > Extensions, where you'll see the MDH extension:

Markdown Here extension in Chrome

Click on the Options link. This opens a very useful Options page, where you can alter various MDH settings, including styles. You can either choose from a list of themes (including some spiffy ones popular in code editors like Sublime Text), or write your own CSS entirely:

MDH styling options

While you're on this page, make sure to check out the other available options, such as setting a preferred keyboard combination for activating MDH.

Installation

MDH is easy to install. The official site provides a number of links through which to add it to your browser or email client. You can also get the project's source code, hosted at GitHub, from that page.

Additional Resources

Finally, here are some links to resources for using and learning about MDH:

Wrap Up

I hope you've enjoyed this brief introduction to MDH. It's a pretty simple extension, but I use it every day, and honestly would hate to be without it.

Is this something you would consider using? Do you know of anything similar? Let me know in the comments.

  • Eno

    Thanks Ralph, for an easy to understand intro to markdown and this cool extension. I’be been wanting to learn markdown and this is an easy way to learn by using it every day in emails etc.

    • Ralph Mason

      Thanks Eno. That’s a great point. I hadn’t thought of it as a good way to learn/practice Markdown, but it really is, as email is something most people do regularly, and regular practice makes something familiar. :-)

      Most Markdown editors—including this one—add extra functionality to the vanilla Markdown, such as support for tables, so be aware of that.

      • Eno

        Thanks for that tip.

  • Chris Perry

    Having only just used Markdown recently for the first time, it was interesting to see how else I might put it to use.

    • http://careersreport.com Don Lacy

      Allow me to show @ you a real way to earn a lot of extra money by finishing basic tasks from your house for few short hours a day — See more info by visiting >MY!___@+__ID|

  • Chris Ward

    Nice… I like desktop apps too much though, so until there is Apple Mail support…

    • Ralph Mason

      To each his/her own! I can’t stand Mail, personally. Very confusing, and it regularly seems to get confused over passwords. Bane of my existence when clients ring up because Mail is acting up!

      I’m tempted to try Postbox, but gave up on Thunderbird. I guess it’s ideal to have a local copy of your emails, but since giving up on Mail, I’ve been relying solely on Gmail/Google Apps online.

      • Chris Ward

        I have tried every alternative and can’t get on with any of them. I like controlling my email too much.

        • Robert Dubois

          Did you try Airmail 2? My personal fave

  • http://AhmadAwais.com/ Ahmad Awais

    Hey, Ralph thanks for the awesome extension!

    • Ralph Mason

      Glad you like it! I think it deserves a lot of love. :-)

  • Robert Dubois

    Thanks Ralph! One thing I’m trying to understand about Markdown and emails is: How do standard email applications display markdown if, for example, a user sends a markdown email to one which doesn’t have a Markdown-ready application such as Outlook? Or doesn’t use any plugins? Will Outlook and other apps (including Webmail clients) display Markdown nonetheless?

    • Ralph Mason

      Thanks Robert. The way the extension works is that you write your email message in Markdown, but then, before you send it, you click a button that converts your Markdown to HTML. So you end up sending an HTML email—which of course will display just fine in any email client.

      I’ve updated the article to make this a little clearer!

Recommended

Learn Coding Online
Learn Web Development

Start learning web development and design for free with SitePoint Premium!

Instant Website Review

Use Woorank to analyze and optimize your website to improve your website to improve your ranking!

Run a review to see how your site can improve across 70+ metrics!

Get the latest in Front-end, once a week, for free.