How to Get Styled Markdown into Gmail
Harvey Levine
I hope this idea will be of value to some of you.
I now use Markdown-Here for almost all of my emails and it really has made a great improvement in the appearance of my email. I have a gmail account.
However, there are occasions when I can’t use MDH because the underlying Github Markdown doesn’t support the features I need, such as footnotes. I’ve followed Adam’s suggestion and submitted a feature request for footnote support.
When I use MDH and want to do sometime like make the h4 heading level show up in red in my gmail, I simply modify the MDH CSS to add the “color:red” style to the h4 section. Then, when I write a line like:
#### This is a level 4 heading
the line is indeed rendered in red.
The problem comes when I want to use footnotes in addition to making h4 show up as red. That precludes using MDH. I’ve spent a few days trying to figure out how to convince gmail to use the styles that show up in the previews of stand alone Markdown editor. I’ve selected all text in the preview window of editors like, for example, Byword for the Mac and then copied and pasted the clipboard into the compose window for gmail. Some of the attributes, like bold, italics, links, and even footnotes work fine. But the styles for color and heading size don’t work. All headings are in black and, strangely, are all the same size.
Eventually I stumbled on this article. This post answered my remaining questions. Here are the steps to get styled html into gmail when you can’t use MDH:
(This is for a Mac)
- Write your email in a stand-alone Markdown editor.
- Preview the Markdown using Brett Turpstra’s program Marked. This program allows you to preview Markdown using your choice of several built-in CSS files, or you can supply your own CSS file. You can modify one of the CSS files to contain the styles you need, like making h4 render in red.
- Once the preview looks the way you want it, choose File/Export/Save to hmtl from the menu.
- In the Save dialog check the box “Include preview template in output” and select the CSS file you used for the preview from the popup.
- After hitting Save, you’ll have an html file that you need to get into the gmail compose window.
- This is the trick mentioned in the link above. Double click on the html file to launch your default browser, which will open with a rendering of the html file. This should look exactly as it did in the Marked preview window.
- In the browser “Select all” to select all the styled text. Then hit Copy
- Finally, go to the gmail compose window, put the cursor in the box where you write your email, and do a paste. The result is an email that is rendered exactly like the preview in your Markdown editor.
I imagine that Windows Markdown editors with previews might work similarly. Obviously what you want is a Markdown editor with a preview (or a stand-alone previewer like Marked) that can export the preview to an html file. You should be able to control the CSS for the preview and the resulting html file should have the previews template in the output.
Considering all the steps in this alternate for Markdown-Here, it is clear why MDH is a much better way to render styled Markdown in Gmail. But if you can’t use MDH because you need footnotes or some other style not present in the Github Markdown, at least there is another way to create a styled gmail.
Adam Pritchard
Thanks for this, Harvey.
There are a couple of things you might already know about, but some of your wording makes me suspect that maybe you don’t. And maybe they’ll be helpful!
Render a selection
Most people probably just click the Markdown Here button and render their whole email. But you can instead just highlight part of your email and then click the MDH button and render just that part. Here’s the screenshot for it from the README (full size):
Raw HTML
If you want a h4 to show up red once (like, not as your normal thing), you can do this:
#### <span style="color:red">I'm a Red Head</span> (sorry!)
I’m a Red Head (sorry!)
If you do stuff like that regularly, or if you have additional special styles you’d like to use but don’t want to keep typing, you can add a CSS class to the MDH Primary Styling CSS. For example, I’ll add this to mine:
.special {
color: red;
font-style: italic;
font-size: 1.3em;
}
And then I’ll use it like so:
<span class="special">I'm so special!</span>
I’m so special!
Harvey Levine
Adam Pritchard
The one thing I was aware of was that you can use MDH on just a block of selected text instead of the whole email. I use a signature block with large Italic fonts, an image, and colors in gmail and I don't want to subject that block to Markdown conversion, so I always select everything but the signature block before calling upon MDH to convert the Markdown. However now that you've explained how to create styles within the CSS and use them in the email document, I can probably create the styles I need for the signature block within the CSS.
I only have one question: is the information you provided in your comment specific to MDH or could I do the same thing in other Markdown environments where I have access to the CSS? I'm asking because I often write small ebooks in Markdown and create the ePub file in Sigil. If I were to create styles in Sigil's CSS and use <span> code in my Markdown for the ebook, would that work the same way as you outlined? Or is the technique you explained only for MDH?