Web

Spicing up Your Emails with Markdown

Ralph Mason
Share

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](https://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.

So Clickable

document.getElementById("clicker").addEventListener("click", function() {
alert("you triggered " + this.id);
});

<button id="clicker">So Clickable</button>

document.getElementById("clicker").addEventListener("click", function() {
alert("you triggered " + this.id);
});