HTML to Markdown Converter

Turn HTML, or rich text pasted from Google Docs, Word or a web page, into clean Markdown.

Rich text

Paste here (Ctrl+V, or ⌘V on a Mac)Copy from Google Docs, Word or a web page; the formatting comes across as Markdown.

Characters: 0

Input

Headings

Bullets

Code blocks

Links

GFM tables

Turns HTML into Markdown: paste formatted text copied from Google Docs, Word or a web page, or paste HTML source. Headings, bold and italics, nested lists, links, images, code blocks and tables come across, and the clutter those editors put on the clipboard is cleaned away.

The conversion runs in your browser, and what you paste is never uploaded or put into the page. Only the Preview tab renders the Markdown, through the same sanitiser as the Markdown Editor. With External media on, images, video and audio the Markdown links to load there from their own servers, as they would on any page.

How to use it

Input — Rich text, the default, takes a paste of formatted text and shows what arrived, such as “2 headings and 3 lists, from Google Docs”. If the clipboard holds plain text only, it is converted as text, and HTML source copied as text gets a Convert as HTML button. HTML takes source code, typed, pasted or opened from a file; switching to it shows the HTML of the last paste.
Headings — # Heading, or underlined with === and ---, which Markdown has for the first two levels only; lower levels use # either way.
Bullets — -, * or + before each list item.
Code blocks — fenced with backticks and the language from a language- or lang- class, or indented by four spaces.
Links — inline, or numbered references listed at the end.
GFM tables — on by default: tables, strikethrough and task lists in GitHub Flavored Markdown. Off, tables and struck-through text stay HTML.
External media — beside the Preview tab, on by default. Off, the preview loads nothing from another server; the Markdown keeps every link either way.

Characters Markdown would read as formatting, such as *, _ or a # starting a line, are escaped with a backslash, and so are < and & where they would start a tag or an entity, so text such as “the <div> element” stays text. A line break becomes a backslash at the end of the line. Scripts, styles, comments, forms and tracking attributes are dropped.

Examples

A paragraph and a nested list from Google Docs

Pasted rich text, as HTML on the clipboard: <b style="font-weight:normal;" id="docs-internal-guid-4f2a"><p dir="ltr"><span style="font-size:11pt;font-family:Arial;font-weight:400">Release </span><span style="font-size:11pt;font-family:Arial;font-weight:700">Thursday</span><span style="font-size:11pt;font-family:Arial;font-weight:400">, after </span><span style="font-size:11pt;font-family:Arial;font-style:italic">final</span><span style="font-size:11pt;font-family:Arial;font-weight:400"> checks:</span></p><ul><li dir="ltr" aria-level="1"><p dir="ltr" role="presentation"><span style="font-size:11pt;font-family:Arial;font-weight:400">Staging</span></p></li><li dir="ltr" aria-level="2"><p dir="ltr" role="presentation"><span style="font-size:11pt;font-family:Arial;font-weight:400">Database migration</span></p></li><li dir="ltr" aria-level="2"><p dir="ltr" role="presentation"><span style="font-size:11pt;font-family:Arial;font-weight:400">Smoke tests</span></p></li><li dir="ltr" aria-level="1"><p dir="ltr" role="presentation"><span style="font-size:11pt;font-family:Arial;font-weight:400">Production</span></p></li></ul></b>
Markdown, default options: Release **Thursday**, after _final_ checks: - Staging - Database migration - Smoke tests - Production

Google Docs marks bold and italics only in its span styles and pastes a nested list flat, giving each item its depth; both come back as Markdown, and the tool notes the paste came from Google Docs.

A README fragment as HTML source

Input HTML: <h2>Usage</h2> <p>Install it, then run <code>serve</code> in the folder:</p> <pre><code class="language-bash">npm install --global serve serve ./dist</code></pre> <table> <thead><tr><th>Flag</th><th align="right">Default</th></tr></thead> <tbody><tr><td><code>--port</code></td><td align="right">3000</td></tr></tbody> </table> <p>See <a href="https://example.com/docs" title="Docs">the docs</a>.</p>
Markdown, default options: ## Usage Install it, then run `serve` in the folder: ```bash npm install --global serve serve ./dist ``` | Flag | Default | | --- | ---: | | `--port` | 3000 | See [the docs](https://example.com/docs "Docs").

The code block keeps its language, and the table its right-aligned column.

The same fragment with other options

Markdown with underlined headings, indented code blocks, reference links and GFM tables off: Usage ----- Install it, then run `serve` in the folder: npm install --global serve serve ./dist <table> <tr><th>Flag</th><th>Default</th></tr> <tr><td><code>--port</code></td><td>3000</td></tr> </table> See [the docs][1]. [1]: https://example.com/docs "Docs"

Frequently asked questions

A Markdown table is a plain grid: one header row, one line per row, inline text in each cell. A table with merged cells, or with a list, heading, quote or code block in a cell, cannot be written that way without losing something, so it stays HTML, cleaned of styles, and a note says how many. GitHub and most Markdown readers show HTML tables as they are. A table without a header row gets an empty one, as Markdown tables need one.

Word puts images on the clipboard as files on your own computer (file:///…/clip_image001.png), which no web page can load: the link is kept so you can find the file, with a note. Google Docs links its images on googleusercontent.com, and those links expire, so save the images and link your own copies. An image embedded in the HTML larger than 100 KB is left out, marked ![alt]().

They keep text from being read as formatting: \* is an asterisk rather than the start of italics, and 1\. at a line's start is a number rather than a list. Markdown readers show them without the backslash.