HTML ↔ Markdown Converter
Convert HTML to Markdown, or render Markdown back to HTML, with the result redrawing as you type. Turndown handles one direction, markdown-it the other, and GFM tables survive both.
Markdown
The Markdown lands here.
Anything that does not arrive as Markdown is named below.
Converted
Not converted
View
Direction
What did not survive
How to use
- Clear the sample out of the left pane and paste your own HTML in its place.
- Read the Markdown on the right as it updates; the Direction control under the panes switches to Markdown → HTML when you want the reverse.
- Use Input, Split, or Output to decide how much room each pane gets, and drag the divider between them to fine-tune it. Split is the default.
- Take the result with Copy Markdown (or Copy HTML going the other way), or Download to save it as converted.md or converted.html. The strip under the panes names anything that did not arrive as Markdown before you take it.
How this works
Paste a block of HTML on the left and Markdown appears on the right, roughly a fifth of a second after you stop typing. The output is opinionated. Headings get hashes rather than underlines, bullets use a dash, and a pre wrapping a code element becomes a fenced block instead of four-space indentation. GitHub-Flavored Markdown is switched on as well, which is what turns an HTML table into a pipe table and keeps task-list checkboxes as checkboxes.
Most of what I convert from HTML to Markdown is text moving between systems that disagree about formatting. A section lifted out of a CMS. A table from a docs site. An email template that has to become a README. The markup is parsed into a real document before anything is written out, which is why wrapper divs, class attributes, and inline style rules quietly fall away and only structure survives. Going the other direction, markdown-it runs with linkify on, so a bare URL sitting in your text arrives as a working link without you typing brackets around it.
What the sample converts to
The left pane starts with a snippet already in it, so there's something to look at before you paste anything of your own. It's a Release notes heading, one sentence with a bold word and a link to example.com, and a two-item bullet list.
On the right you get a hash heading, the sentence with the bold word wrapped in double asterisks, the link rewritten as [docs](https://example.com), and the two items behind dashes. One small thing worth noticing: the & entity in the source shows up as a plain ampersand in the Markdown, because the markup is parsed into a document before a single character of output is written.
Good to know
- Markup goes in by paste. There is no URL field, so open the page yourself, take the source or the section you care about, and bring that.
- Layout does not come through. Wrapper divs, class names, and inline styles are dropped on purpose, which means a round trip out to Markdown and back returns tidy structural HTML with every styling hook gone.
- Some markup has no Markdown form. Iframes, video and audio embeds, sub and sup are kept as raw HTML, so H2O keeps its subscript; scripts, styles, noscript and template blocks are dropped; anything else, such as a definition list or an abbreviation, is flattened to its text. Every one of them is named on the strip under the panes, so nothing goes missing in silence.
Frequently asked questions
Does it go both ways or only HTML to Markdown?
Both directions work. The Direction control under the panes switches between them, and the pane labels, the copy button, and the download filename all follow whichever one you picked.
Do GitHub-style tables come through?
HTML tables convert to pipe tables, and the same plugin looks after strikethrough and task-list checkboxes. Content pulled out of a GitHub issue or a docs site makes the trip without you lining up pipes by hand.
What happens to code blocks?
A pre wrapping a code element becomes a fenced block with triple backticks, and inline code keeps its single backticks. Fences beat four-space indentation here because they survive being nested inside a list item and they read cleanly in a diff.
Will it clean up the mess a CMS or Word paste leaves behind?
Mostly. The markup is parsed into a document and only the structural pieces get converted, so span soup and style attributes fall away on their own, and any script or style block in the paste is dropped rather than written out as text. Genuinely odd markup can still land raw in the output and want a minute of hand tidying; the strip under the panes says which elements those were.
Can I keep raw HTML inside my Markdown?
Going Markdown to HTML, inline HTML passes straight through untouched, which is legal Markdown and handy for a details block or a named anchor. markdown-it is configured with html enabled, so nothing of yours gets stripped on the way.
Why doesn't a single line break start a new line?
Because breaks are off, which is standard CommonMark behaviour. One newline reads as a space. Leave a blank line to start a new paragraph, or put two spaces at the end of a line to force a break. Bare URLs go the other way, linkify is on, and they turn into links on their own.
Can I share a link that opens on Markdown → HTML?
The direction you choose is written into the page URL as a mode parameter, so a bookmark or a pasted link brings the next person back to the same setting. Only the direction rides along; the text in the panes stays where it is.
Missing something in HTML ↔ Markdown Converter? Suggest a feature →
Tell someone who needs this.