About

Email clients strip <style> blocks and ignore external stylesheets. If you paste GitHub-flavored Markdown HTML into an email, newsletter, or embed, you get raw unstyled text. This tool parses Markdown into an AST, then serializes each node with the exact inline style attribute matching GitHub's rendering engine. The output is a self-contained HTML fragment that renders identically in Gmail, Outlook, and any context that strips <head> content. It handles GFM extensions: tables, task lists, fenced code blocks with syntax tokens, strikethrough, and nested lists.

The parser operates entirely client-side with zero dependencies. It does not call any remote API. Limitations: no LaTeX math rendering, no Mermaid diagrams, no emoji shortcodes (use native Unicode emoji). Deeply nested blockquotes beyond 5 levels may produce suboptimal indentation. For production email campaigns, test the output in Litmus or Email on Acid, as some clients (Outlook 2007-2019) have additional CSS restrictions beyond inline style support.

Formulas

This tool does not use mathematical formulas. It applies a deterministic text-transformation pipeline. The conversion logic follows this flow:

Input → tokenize(markdown) → AST → render(node, styleMap) → HTML

Where styleMap is a dictionary mapping each element type to its inline CSS string. For example:

styleMap["h1"] = "font-size:2em; font-weight:600; margin:24px 0 16px; padding-bottom:0.3em; border-bottom:1px solid #d1d9e0; line-height:1.25"

The tokenizer processes the input line-by-line for block-level elements (headings, lists, code fences, blockquotes, tables, horizontal rules), then applies inline pattern matching within each text node for emphasis (**bold**, *italic*), code spans, links, and images. Nested structures (lists within lists, bold within italic) are resolved by recursive inline parsing. Each token carries its depth and context, which determines the final style attribute value.

Reference Data

Markdown Syntax	HTML Element	Key Inline Styles Applied	Email Client Support
# Heading 1	<h1>	font-size: 2em; border-bottom: 1px solid #d1d9e0; padding-bottom: 0.3em	All clients
## Heading 2	<h2>	font-size: 1.5em; border-bottom: 1px solid #d1d9e0; padding-bottom: 0.3em	All clients
bold	<strong>	font-weight: 600	All clients
italic	<em>	font-style: italic	All clients
~~strike~~	<del>	text-decoration: line-through	Most clients
`code`	<code>	background: rgba(175,184,193,0.2); padding: 0.2em 0.4em; border-radius: 6px; font-size: 85%	All clients
```lang	<pre><code>	background: #f6f8fa; padding: 16px; border-radius: 6px; overflow: auto; font-size: 85%	Most clients (no scroll in Outlook)
> quote	<blockquote>	border-left: 0.25em solid #d1d9e0; padding: 0 1em; color: #656d76	All clients
- item	<ul><li>	list-style-type: disc; padding-left: 2em; margin: 0.25em 0	All clients
1. item	<ol><li>	list-style-type: decimal; padding-left: 2em; margin: 0.25em 0	All clients
- [x] task	<li> + checkbox	list-style: none; with Unicode ☑/☐ prefix	Most clients
[text](url)	<a>	color: #0969da; text-decoration: underline	All clients
![alt](src)	<img>	max-width: 100%; height: auto	Most clients (blocked by default in some)
\| table \|	<table>	border-collapse: collapse; border: 1px solid #d1d9e0; padding: 6px 13px	All clients
---	<hr>	border: 0; border-top: 1px solid #d1d9e0; margin: 24px 0	All clients
Paragraph	<p>	margin: 0 0 16px 0; line-height: 1.5	All clients
Line break (2 spaces + enter)	<br>	(none needed)	All clients

Frequently Asked Questions

Most email clients (Gmail, Outlook, Yahoo Mail) strip <style> tags from the <head> and <body>. Inline styles on each element are the only reliable way to ensure consistent rendering across all email clients. This is also critical for HTML snippets embedded in platforms that sanitize CSS blocks (e.g., CMS widgets, third-party iframes).

Yes. The parser supports GFM tables (with alignment via colons in the separator row), task lists (- [x] and - [ ]), strikethrough (~~text~~), and fenced code blocks with triple backticks. It does not support Mermaid diagrams, footnotes, or mathematical expressions as those require JavaScript rendering engines that cannot be represented as inline-styled HTML.

Nested lists are detected by indentation (2 or 4 spaces, or 1 tab). Each nesting level generates a child <ul> or <ol> element inside the parent <li>. The inline styles include appropriate padding-left values that increase with depth. Up to 5 levels of nesting are supported with distinct indentation styling.

Code blocks receive GitHub's monospace styling (background: #f6f8fa, font-family: monospace, padding: 16px). However, full syntax highlighting (colorizing keywords, strings, etc.) is not applied because reliable syntax highlighting requires CSS classes that would be stripped in email. The code is properly HTML-escaped and preserves whitespace.

Yes. The output is a self-contained HTML fragment with all styles inlined. Paste it into the HTML editor of your email tool. Be aware that some tools may further process your HTML (e.g., adding tracking pixels to links, wrapping in their own template). Test with a preview send before deploying to your full list. Images referenced via ![alt](url) must be hosted on a publicly accessible server.

All text content is HTML-escaped during parsing. Characters <, >, &, and " are replaced with their entity equivalents. Raw HTML tags typed in the Markdown input are escaped and rendered as visible text, not as executable markup. This makes the output safe to embed in web pages. However, link href values and image src values are preserved as-is - validate URLs if accepting untrusted input.