Markdown
Markdown to HTML, with a live preview
Write on the left and watch the result on the right as you type, with both panes scrolling together. When you are done, three separate outputs: clean HTML for your content management system, HTML with the styles inside for an email, and the way back — paste HTML, get readable Markdown.
Your draft never leaves this page: it is converted right here.
Why it matters that this is not uploaded
What people paste into a Markdown editor is almost never public text: it is an unpublished draft, a product's internal documentation, meeting notes, or the content of a website that does not exist yet. Sending that to a stranger's server so it can add a few tags is a bad trade. Here there is nowhere to send it: the engine that parses the Markdown and the one that cleans the HTML are downloaded into your browser and work inside it.
How it works, in 3 steps
-
Write or paste your Markdown
The preview on the right updates as you type, and both panes scroll together. The bar at the top has the formats with their shortcuts, and Tab indents instead of jumping to the next field.
-
Pick the output you need
Clean HTML for a content management system, inline-styled HTML for an email, or the reverse conversion if what you have is HTML. Each with its own copy button.
-
Take it with you
Copy to the clipboard, download as
.mdor.html, or export the preview to PDF. Along the bottom, the word count and reading time.
What people use it for
- Publishing an article written in MarkdownYou wrote it in your editor and the blog wants HTML. Copy the clean HTML and paste it, with no styles fighting the site's template.
- Laying out an email or a newsletterEmail platforms throw stylesheets away. The inline-styled HTML arrives with the formatting written inside each tag.
- Rescuing a Word documentSomeone sends you a formatted document and you want it in Markdown for the repository. Paste the HTML and it comes out clean, with the lists rebuilt.
- Writing a READMESee how it will look before you push it, with tables, task lists and highlighted code blocks.
- Pulling the text out of a web pageYou copy an article and instead of a tangle of wrappers and classes you get the content in Markdown, ready to reuse.
- Handing something over as a PDFYou write in Markdown, which is fast, and export the preview to a PDF made of real text, not an image.
The three outputs, and why one is not enough
Nearly every converter gives you a single HTML output and leaves it there. The trouble is that the HTML that works on a website does not work in an email, and anyone who tries to use the same one for both ends up with an unformatted newsletter and no idea why.
The clean HTML is semantic and carries not one style attribute: just <h2>, <p>, <ul>, <strong>, <table>. That is what you paste into WordPress, a content management system or a template, where the site's stylesheet supplies the design and your own styles only get in the way. Tick "full document" and it also comes wrapped in its page structure, with the character encoding and a sober stylesheet, ready to save as a standalone file.
The inline-styled HTML carries its appearance written inside every tag. It is ugly to read and it is exactly what email needs: Gmail strips style tags out of the head before it shows the message, and so do many newsletter platforms, store product description fields and some task managers. The styles used are the ones email actually understands — fonts, sizes, margins, borders; no grid, no flexbox, neither of which works in email.
And the reverse conversion is the other direction, which gets its own section below because there is more to it.
HTML to Markdown: the part almost nobody gets right
It is half of the searches and half of the results disappoint, always for the same reason: they do a literal transcription of every tag instead of keeping the content.
The HTML people actually paste is not clean HTML. It is this:
- What Microsoft Word copies, with hundreds of Office-specific style attributes, its own namespace tags, conditional comments and — worst of all — lists that are not lists: loose paragraphs with a bullet character typed inside them, which a literal transcription turns into paragraphs with a stray symbol in front.
- What Google Docs copies, which wraps the entire document in a bold tag carrying an internal id; unwrap it or the whole text comes out bold.
- What you copy from a web page, with its nested wrappers, its classes, its data attributes and its trackers hanging off the links.
Here the HTML is cleaned first and converted afterwards. Styles, namespaces and comments go; elements that carry no content go; Word's fake lists are rebuilt by grouping consecutive bulleted or numbered paragraphs into a real list; the Google Docs wrapper is unwrapped; presentational tags are normalised to semantic ones — <b> becomes <strong>, <i> becomes <em>; and the empty wrappers left behind are collapsed. When the source is recognised, the tool says so.
If what you are dealing with is a messy paste from a PDF with the line breaks landing mid-sentence, the site has a separate text cleaner built for exactly that.
What it supports: extended Markdown, not the 2004 one
The base is CommonMark, the specification that pins down all the odd cases the original Markdown left to each program's judgement. On top go the GitHub Flavored Markdown extensions nobody considers optional any more — tables, task lists, strikethrough, autolinks — and footnotes, which are not in GitHub but are in almost every static site generator.
Code blocks are highlighted per language: just write the language name after the opening triple backticks. The highlighter is only downloaded if your document has a fenced block with a language, so if you are writing prose the page loads nothing extra.
Markdown syntax quick reference
Everything below works in the editor above. The rows marked as an extension are not in the original Markdown, but they are in CommonMark with the GitHub extensions — which is what GitHub, GitLab, Reddit, Discord, Obsidian and the usual static site generators use.
Text
| For | You write | You get | Notes |
|---|---|---|---|
| Bold | **text** | text | Two underscores work too. |
| Italic | *text* | text | One asterisk, or one underscore. |
| Bold italic | ***text*** | text | Three asterisks. |
| Strikethrough | ~~text~~ | Extension. Two tildes: one alone does nothing anywhere. | |
| Inline code | `code` | code | If the code contains backticks, wrap it in two. |
| Line break | Two spaces at the end | New line | Or a <br> tag, which is easier to see. |
| New paragraph | One blank line | Paragraph | A single newline does not start a paragraph. |
| Escape a symbol | \*not italic\* | *not italic* | The backslash removes the special meaning. |
Structure
| For | You write | Notes |
|---|---|---|
| Headings | # Heading 1 · ## Heading 2 · ### Heading 3 | Up to six hashes. Leave a space after them. |
| Blockquote | > quoted text | Nest them with >>. |
| Bulleted list | - item | * and + work too. Indent two spaces to nest. |
| Numbered list | 1. item | The numbers need not be in order: they renumber themselves. |
| Task list | - [x] done · - [ ] to do | Extension. The x may be uppercase. |
| Horizontal rule | --- | Three hyphens on a line of their own. |
| Code block | ```js … ``` | The language name switches highlighting on. |
| Indented block | Four spaces | The old alternative; no per-language highlighting. |
Links, images and tables
| For | You write | Notes |
|---|---|---|
| Link | [text](https://example.com) | With a title: [text](url "title"). |
| Autolink | <https://example.com> | Extension: a bare address links itself too. |
| Reference link | [text][id] and below [id]: https://… | Handy when the same address repeats. |
| Image |  | Like a link, with an exclamation mark in front. |
| Footnote | text[^1] and below [^1]: the note | Extension. Numbering and back-links are generated for you. |
| Table | | A | B || --- | --- || 1 | 2 | | Extension. The columns need not line up in the source. |
| Align a column | | :--- | :---: | ---: | | Left, centre and right, in the row of hyphens. |
| Inline HTML | <sub>below</sub> | What Markdown does not cover is written in HTML and passes through. |
Editor keyboard shortcuts
| Shortcut | Does | Shortcut | Does |
|---|---|---|---|
Ctrl + B | Bold | Ctrl + 1 … 3 | Headings 1 to 3 |
Ctrl + I | Italic | Ctrl + Shift + X | Strikethrough |
Ctrl + K | Link | Ctrl + Shift + L | Bulleted list |
Ctrl + E | Inline code | Ctrl + Shift + O | Numbered list |
Ctrl + Shift + E | Code block | Ctrl + Shift + T | Task list |
Ctrl + Shift + Q | Blockquote | Tab | Indents two spaces |
On a Mac, Ctrl is ⌘. The formatting buttons work as toggles: if the selected text already has the format, they take it off. And Ctrl + Z undoes as it would in any text field, including what the buttons did.
Frequently asked questions
What is the difference between Markdown, CommonMark and GitHub Flavored Markdown?
Markdown on its own is John Gruber's 2004 original: simple, with a lot of cases undefined, because it was described by its program rather than by a specification. Two converters could give different results for the same text and both be right.
CommonMark, from 2014, settled that: how many spaces indent a list, what an asterisk inside a word does, how things nest. GitHub Flavored Markdown is CommonMark plus four widely used additions: tables, task lists, strikethrough and autolinks.
Then there is the rest: MultiMarkdown and Pandoc add footnotes, definition lists and formulas; Obsidian and Notion add their own internal links; and what Slack or Discord use looks like Markdown but is not. What you write here works in CommonMark, on GitHub and in the usual static site generators.
Which flavour does this tool use exactly?
CommonMark as the base, plus the GitHub extensions — tables, task lists, strikethrough and autolinks — and footnotes, which are not in GitHub but are in Hugo, Jekyll, Astro, MkDocs and Pandoc.
That is the combination that makes one text render the same in a repository, on a static blog and in most modern editors.
Why is the email HTML so ugly?
Because it has to be. Gmail strips style tags out of the head before it shows the message, and plenty of newsletter platforms and product description fields do the same. The only way formatting survives is if it is written inside every tag.
That is why only properties email genuinely understands are used: fonts, sizes, margins, colours and borders. No grid, no flexbox — in many email clients neither exists. If what you want is an email signature, there is a dedicated tool.
Why does the reverse conversion usually go wrong in other tools?
Because they transcribe every tag instead of keeping the content. The real HTML people paste comes from Word — hundreds of Office attributes and lists that are really paragraphs with a bullet typed in — from Google Docs, which wraps the whole document in a bold tag, or from a web page, with its wrappers and its trackers.
Here it is cleaned first and converted after: styles and namespaces out, Word's lists rebuilt, the Google Docs wrapper unwrapped, presentational tags normalised to semantic ones, and empty wrappers collapsed. When the source is recognised, you are told.
Can I write HTML inside the Markdown?
Yes: it is part of the specification and sometimes it is the only way out. A forced break, a subscript or an awkward table are written in HTML because Markdown has no syntax for them, and they pass straight through to the output.
The preview is sanitised before it is painted, because it runs inside this page. What you copy or download goes out whole, because it is your content going to your site; and if it contains anything executable, the tool warns you first.
How is the reading time calculated?
Words divided by 200, rounded up, with a minimum of one minute. Two hundred words a minute is the silent reading speed most blogs and content management systems use as a reference.
It is an estimate for putting a "5 min read" line in a header, not a measurement: technical documentation reads considerably slower, and text with a lot of code reads in fits and starts. If you need a closer look at the text, the word counter goes into more detail.
Does the PDF come out as text or as an image?
As real text. It uses the browser's own printing with a stylesheet prepared for paper, rather than drawing the page onto a canvas and putting that image inside a PDF, which is what many tools do.
The difference shows: the text selects and copies, the reader's search finds it, links stay live and the file is a fraction of the size. In the print dialog, choose "Save as PDF" as the destination.
Is what I write uploaded to a server?
No. Parsing the Markdown, the preview, all three conversions and the files you download are generated inside your browser. There are no accounts, no database, and no request that carries your text anywhere. Once the page has loaded, disconnect from the internet and check: it still works exactly the same.