Markdown to Email HTML
Markdown in, email HTML out, with every style inline and a 600px column. Paste it into your email platform's HTML editor or download the .html.
Email-safe HTML will appear here...
To convert Markdown to email HTML, paste it into the left panel, then copy or download the HTML on the right. Every heading, paragraph, list, link, quote and code block gets its styles written inline on the tag, and the whole message sits in a centred 600px column. Paste the result into the HTML editor of your email platform, or into an HTML signature or template field.
What does the output look like?
A short billing email
Hi Sam,
The **March invoice** is ready. Pay it from the [billing page](https://example.com/billing).
- Due: 15 April
- Amount: $240<div style="max-width:600px;margin:0 auto;font-family:Arial,Helvetica,sans-serif;font-size:16px;color:#333333;line-height:1.6;">
<p style="font-family:Arial,Helvetica,sans-serif;font-size:16px;color:#333333;line-height:1.6;margin:0 0 16px;">Hi Sam,</p>
<p style="font-family:Arial,Helvetica,sans-serif;font-size:16px;color:#333333;line-height:1.6;margin:0 0 16px;">The <strong style="font-weight:bold;">March invoice</strong> is ready. Pay it from the <a style="color:#059669;text-decoration:underline;" href="https://example.com/billing">billing page</a>.</p>
<ul style="font-family:Arial,Helvetica,sans-serif;font-size:16px;color:#333333;line-height:1.6;margin:0 0 16px;padding-left:24px;">
<li style="margin-bottom:4px;">Due: 15 April</li>
<li style="margin-bottom:4px;">Amount: $240</li>
</ul>
</div>A heading, inline code and a quote
## Deploy log
Run `npm run deploy`, then check:
> Build time dropped to 41s.<div style="max-width:600px;margin:0 auto;font-family:Arial,Helvetica,sans-serif;font-size:16px;color:#333333;line-height:1.6;">
<h2 style="font-family:Arial,Helvetica,sans-serif;font-size:22px;font-weight:bold;color:#1a1a1a;margin:24px 0 12px;line-height:1.3;">Deploy log</h2>
<p style="font-family:Arial,Helvetica,sans-serif;font-size:16px;color:#333333;line-height:1.6;margin:0 0 16px;">Run <code style="font-family:Courier New,monospace;font-size:14px;background:#f5f5f5;padding:2px 6px;border-radius:3px;">npm run deploy</code>, then check:</p>
<blockquote style="border-left:4px solid #059669;margin:0 0 16px;padding:12px 16px;color:#555555;font-style:italic;">
<p style="font-family:Arial,Helvetica,sans-serif;font-size:16px;color:#333333;line-height:1.6;margin:0 0 16px;">Build time dropped to 41s.</p>
</blockquote>
</div>Why are the styles inline instead of in a stylesheet?
Many email clients and sending tools remove <style> blocks, or only keep them in some cases. A style="..." attribute on the tag itself is the form most likely to survive. That is why the output repeats the font on every paragraph and list: it reads as redundant, but each element keeps its look even if everything around it is stripped.
How do I get it into Gmail?
Gmail's compose window has no HTML source view, so pasting the copied HTML gives you the tags as text. Instead, click Download, open the .html file in your browser, select all, copy, and paste into the Gmail message. Gmail keeps inline formatting from pasted content, so the headings, bold text and links carry over. Check the result by sending yourself a test.
Will it look the same in Outlook?
Mostly. Classic Outlook for Windows renders email with Word's engine, which ignores max-width and border-radius. There, the message spans the full window width instead of 600px, and code boxes get square corners. Fonts, colours, bold, lists and links still come through. Send a test to an Outlook account before a large send.
What doesn't get styled?
Tables, images and h4 to h6 headings come out as plain HTML with no inline styles. A table has no borders or padding, and an image shows at its natural size, which can be wider than 600px. Add a width attribute to large images and borders to tables before sending.
For HTML with a regular stylesheet instead of inline styles, use Markdown to HTML.
How are tables, code, front matter and other edge cases handled?
| Input | What you get |
|---|---|
| Tables | Plain <table> with no inline styles, so no borders |
| Fenced code | <pre> with monospace font and grey background; no syntax colours |
| Images | <img> with src and alt, no width set |
| h1 to h3 | Styled: 28px, 22px, 18px bold Arial |
| h4 to h6 | No inline styles; the client's default heading look |
| Nested lists | Nested <ul>/<ol>, each with its own inline styles |
| Task lists | Disabled <input type="checkbox">. Email clients often drop form elements, so write [x] as text instead |
| YAML front matter | Not removed: shows as a rule, and the key: value lines become a heading. Delete it first |
| LaTeX math | Left as $...$ source |
| Mermaid code blocks | Shown as a code block with the diagram source |
| Emoji | Unicode emoji kept; :shortcodes: kept as typed |
| Raw HTML | Passed through unchanged |
How does this compare with Markdown Here and Pandoc?
| MDConvert (this page) | Markdown Here | Pandoc | |
|---|---|---|---|
| How it works | Paste Markdown, copy or download HTML | Browser extension; render Markdown inside the compose window | Command line: pandoc -s mail.md -o mail.html |
| Styles | Inline on every tag | Inline, from CSS you can edit | A <style> block in <head>; needs an inliner such as juice or premailer |
| Writes directly in Gmail | No, copy from the downloaded file | Yes | No |
| Install needed | No | Yes, an extension | Yes |
| Tables styled | No | Yes | Via the stylesheet, until it is stripped |
If you write in Gmail or Thunderbird every day, Markdown Here fits better because it works in the compose window. This page suits one-off messages and pasting into an email platform's HTML editor.
Maintained by Ankit Aglawe. Last updated .
Related Tools
Need a different format? See every tool on the Markdown converter page, or go back to the MDConvert home page.