How to convert Markdown to HTML with a live preview

You’ve written a tidy README in Markdown, and now the marketing site, the newsletter tool or the old CMS wants HTML. Retyping it all as tags is nobody’s idea of a good afternoon. This guide covers the Markdown you’ll actually use, what each piece becomes in HTML, and how to convert it in a few seconds.

What is Markdown

Markdown is a lightweight markup language John Gruber created in 2004. You write plain text with a few punctuation habits, and a processor turns it into HTML. It’s the default format for README files, documentation, blog posts and most comment boxes on developer sites.

Where HTML needs an opening and closing tag for every element, Markdown uses symbols: a line starting with # is a heading, text between ** is bold, and [text](url) is a link. The source stays readable even if it never gets converted, which is the whole point.

Markdown syntax reference

The examples below show standard Markdown and the HTML a typical processor produces.

Headings

Start a line with one to six # characters, followed by a space. The number of hashes sets the heading level.

# Heading 1
## Heading 2
### Heading 3
#### Heading 4

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>

Text formatting

Bold, italic, strikethrough and inline code:

**bold text**
*italic text*
***bold and italic***
~~strikethrough~~
`inline code`

<strong>bold text</strong>
<em>italic text</em>
<strong><em>bold and italic</em></strong>
<del>strikethrough</del>
<code>inline code</code>

Strikethrough isn’t part of the original Markdown. It comes from GitHub Flavored Markdown (GFM), which most tools now support.

Links and images

A link puts the visible text in square brackets and the URL in parentheses. An image uses the same syntax with a leading !, and the bracket text becomes the alt text.

[PulpMiner](https://www.pulpminer.com)
![Ginger cat asleep on a keyboard](https://example.com/cat.png)

<a href="https://www.pulpminer.com">PulpMiner</a>
<img src="https://example.com/cat.png" alt="Ginger cat asleep on a keyboard">

Lists

Unordered lists start each line with -, * or +. Ordered lists use a number and a period. Most processors nest a list when you indent it under another item.

- Coffee
- Croissant
  - Almond, if they have it
- Water

1. Preheat the oven
2. Burn the first batch
3. Try again

Code blocks

A fenced code block starts and ends with three backticks. You can add a language name after the opening fence, which many processors turn into a class for a syntax highlighter.

```javascript
function greet(name) {
  return "Hello, " + name;
}
```

<pre><code class="language-javascript">function greet(name) {
  return "Hello, " + name;
}
</code></pre>

Blockquotes and horizontal rules

A blockquote starts each line with >. Three or more dashes on their own line make a horizontal rule.

> Weeks of coding can save you hours of planning.

---

<blockquote><p>Weeks of coding can save you hours of planning.</p></blockquote>
<hr>

Markdown or HTML

Markdown is built for writing quickly and reading the source. HTML gives you full control over structure and attributes, but it’s verbose, and a page of raw tags is hard on the eyes. Many Markdown processors let you mix in raw HTML for the cases Markdown can’t express, such as custom classes or embedded media.

How to use the Markdown to HTML converter

1. Open the Markdown to HTML converter and type or paste Markdown into the left panel.
2. The right panel updates as you type. Keep it on HTML to see the generated source, or switch to Preview to see it rendered.
3. Select Copy HTML to copy the output, then paste it into your CMS, email template or page. Clear empties the input.

The conversion runs in your browser, so your draft never leaves your machine. Unreleased product announcements stay unreleased.

What the converter supports

The converter covers everyday Markdown. It isn’t a full GFM implementation. It handles:

• Headings from # to ######
• Bold, italic, bold italic, strikethrough and inline code
• Fenced code blocks (the language name is dropped, so the output is a plain <pre><code>)
• Links and images with http:// or https:// URLs. Other URLs, such as relative paths or javascript:, aren’t turned into links.
• Unordered lists with - or *, single-line blockquotes and --- horizontal rules
• Paragraphs separated by a blank line, with single line breaks kept as <br>

Tables, nested lists, link titles and multi-line blockquotes aren’t converted, and ordered lists aren’t wrapped in an <ol>. For those, use a full processor such as marked or markdown-it.