Markdown To HTML

Markdown to HTML Converter

Paste or type Markdown into the box, load the Example, or Open a file up to 10 MB (you can also drag it onto the page). The HTML appears as you type.

The HTML tab shows the code with syntax colours. Preview shows how the page will look, in the site’s light or dark theme. Under the result you’ll find counts of words, headings, links and images, plus the size of the HTML. Copy the code or Download .html. The download is named after the file you opened, so guide.md becomes guide.html.

The conversion runs in your browser. Nothing you paste or open is uploaded.

Example

## What you need

- Node.js **20** or newer
- An API key from your [dashboard](https://example.com/dashboard)

​```bash
npm install
​```

With id attributes on headings switched on and indentation set to none:

<h2 id="what-you-need">What you need</h2>
<ul>
<li>Node.js <strong>20</strong> or newer</li>
<li>An API key from your <a href="https://example.com/dashboard">dashboard</a></li>
</ul>
<pre><code class="language-bash">npm install
</code></pre>

The code block gets a language-bash class, which syntax highlighters like Prism and highlight.js use to colour it. The heading gets an id built the way GitHub builds them, so a link to #what-you-need jumps straight to it.

What it supports

The converter follows CommonMark, the standard definition of Markdown, plus the extras GitHub adds:

• Headings, emphasis, links and images, and nested lists
• Task lists with checkboxes: - [x] Done
• Tables, including column alignment
• Fenced code blocks with a language
• Blockquotes, footnotes and strikethrough
• Raw HTML inside the Markdown
• Bare URLs turned into links

The HTML matches what GitHub, GitLab and most static site builders produce from the same file.

Mistakes it points out

Markdown never shows an error. When something is written slightly wrong, it just produces something other than what you meant. These are the common cases, and each gets a note under Worth a look, with the line number where it helps.

A heading without a space. #Heading stays a plain paragraph with a # in front. CommonMark needs a space after the #, though some older tools didn’t.

A line of --- right under text. Instead of a horizontal rule, the line above becomes a heading:

Some text
---

becomes <h2>Some text</h2>. Put a blank line before the --- to get a rule.

Line breaks that disappeared. In Markdown, a single line break inside a paragraph is just a space:

Line one
Line two

shows as “Line one Line two.” To keep the break, end the first line with a backslash, or two spaces, or switch on A single line break becomes <br>.

A reference link with no definition. [the docs][docs] only becomes a link if a line like [docs]: https://... exists somewhere in the file. Otherwise the brackets show as plain text.

Footnote marks without a footnote, or with Footnotes switched off.

Heading structure. More than one level-1 heading, or a skipped level such as an ## followed directly by a ####. Screen readers and search engines use headings to understand a page’s outline, so both are worth fixing.

Images without alt text. ![](photo.jpg) gives the image no description for screen readers or search engines. Write it as ![A red bicycle](photo.jpg).

Raw HTML and safety

Markdown can contain HTML, and with Keep raw HTML tags on, it passes straight through. With it off, tags are shown as text instead.

The notes tell you when the output contains a <script> tag, an onclick-style attribute or a javascript: address, because those run code when the page loads. Links with javascript: or data: addresses are left as plain text.

The preview runs in a sandboxed frame, so nothing in the Markdown ever runs here. Your own site won’t have that protection, though. If the Markdown comes from other people, such as comments, user profiles or support messages, switch Keep raw HTML tags off before publishing the result.

Options

Indent: 2 spaces, 4 spaces, or None (as converted). Code blocks are never re-indented, because changing their spaces would change the code.

Output:

• HTML fragment (body content) is for pasting into a CMS, a blog editor or an existing template.
• Full HTML page adds <head> with the character set, a viewport tag for mobile, and a <title> taken from the first heading, so the file opens properly on its own.

A single line break becomes <br>: keeps every line break, the way GitHub comments and many chat apps do.

Bare URLs and emails become links: https://example.com and [email protected] become clickable without brackets.

Smart quotes, dashes and ellipses: "quotes" become “quotes”, -- becomes an en dash (–), --- an em dash (—), and ... an ellipsis (…). Code is left alone.

id attributes on headings: ## What you need gets id="what-you-need", so other pages can link to that section. Repeated headings are numbered so every id is unique.

Footnotes: [^1] in the text links to a numbered note at the end.

Extras: definition lists, ^superscript^, ~subscript~, ==highlight== and abbreviations. These aren’t part of GitHub’s Markdown, so the same file won’t look the same on GitHub. Note that GitHub reads ~text~ as strikethrough, while with Extras on it becomes subscript.

Small conveniences

• A pasted HTML page gets a pointer to HTML to Markdown, in case you meant to go the other way.
• Text wrapped in a ```markdown fence is unwrapped. Chat assistants often deliver Markdown that way, and without unwrapping you’d get one big code block.
• Ctrl+A (Cmd+A on a Mac) inside the HTML box selects only the HTML.

FAQ

Will the HTML look the same as on GitHub?

The structure will be the same. The look comes from CSS: GitHub applies its own stylesheet, and your site will apply yours. The Preview tab uses this site’s styles, so treat it as a check of structure, not of final design.

How do I make a line break without a new paragraph?

End the line with a backslash or two spaces, or switch on A single line break becomes <br>. A blank line always starts a new paragraph.

Can I convert HTML back to Markdown?

Yes, with HTML to Markdown. To strip all formatting and keep only the text, use Markdown to Text.

How do I tidy or shrink the HTML afterwards?

Use the HTML Formatter to re-indent it, or the HTML Minifier to make it as small as possible.

Is my Markdown uploaded anywhere?

No. Everything happens in your browser, and nothing you paste or open is stored.