How to Convert Markdown to HTML

3 min read

Converting Markdown to HTML means turning lightweight plain-text formatting, such as # for headings and ** for bold, into the HTML tags a browser renders. Markdown is quicker to write and easier to read as source; HTML is what web pages, email templates, and CMS fields need.

Try Markdown Preview →

Convert it in the browser

  1. Open the Markdown Preview editor.
  2. Write or paste Markdown in the left pane.
  3. The right pane shows the rendered Preview. Switch it to HTML Code to see the generated markup.
  4. Click Copy HTML, or use Download .html to save a file. Download .md saves your Markdown source.

The editor counts lines, words, and characters as you type, and everything stays in your browser.

How Markdown maps to HTML

Markdown HTML
# Title <h1>Title</h1>
## Section <h2>Section</h2>
**bold** <strong>bold</strong>
*italic* <em>italic</em>
[link](https://example.com) <a href="https://example.com">link</a>
![alt](image.png) <img src="image.png" alt="alt">
`code` <code>code</code>
- item <ul><li>item</li></ul>
1. item <ol><li>item</li></ol>
> quote <blockquote>quote</blockquote>
--- <hr>

A blank line separates paragraphs. Each block of text between blank lines becomes one <p> element.

GitHub Flavored Markdown extras

The editor supports GitHub Flavored Markdown (GFM), which adds syntax that plain Markdown lacks:

Tables become <table> markup:

| Plan | Price |
| --- | --- |
| Free | $0 |
| Pro | $9 |

Fenced code blocks keep formatting intact and become <pre><code>:

```js
const total = items.reduce((a, b) => a + b, 0);
```

Task lists render as checkboxes:

- [x] Write draft
- [ ] Review

Going the other way: HTML to Markdown

Switch the mode to HTML → Markdown and paste HTML. The editor produces Markdown you can drop into a README, a docs site, or a note app. This is handy when moving content out of an old CMS or cleaning up text copied from a web page.

Common gotchas

  • Line breaks. A single newline inside a paragraph doesn't create a <br>. Leave a blank line to start a new paragraph.
  • Lists need a blank line before them when they follow a paragraph, or some parsers treat them as text.
  • Indentation in lists. Nested items need consistent indentation, usually two or four spaces.
  • Special characters. Characters like * and _ inside words can trigger emphasis. Escape them with a backslash: \*.
  • Raw HTML. Markdown allows HTML inline, but if the output goes into a CMS, check that its sanitizer keeps the tags you used.

When to use each format

Write in Markdown for READMEs, documentation, notes, and blog drafts: it's fast and diffs cleanly in Git. Convert to HTML when the destination needs markup: an email template, a CMS field without Markdown support, or a static page.

Summary

Paste your text into the Markdown Preview editor, check the rendered result, and copy the HTML. Use the reverse mode to turn existing HTML into Markdown. To count words in a draft before publishing, the Word Counter gives reading time too.

Try Markdown Preview →