Markdown to HTML Converter - Convert Markdown to HTML

Markdown → HTML

About the Markdown ↔ HTML playground

Markdown ↔ HTML converts Markdown's lightweight, readable syntax into clean HTML and can convert HTML back into Markdown. Headings, lists, links, images, emphasis, code blocks, and blockquotes are all mapped to their HTML equivalents. It's perfect for previewing README files, generating page markup from notes, or extracting simpler Markdown from existing HTML — all in both directions.

Markdown is a plain-text formatting syntax created by John Gruber and standardized by CommonMark, designed to be easy to write and read as-is. HTML (HyperText Markup Language) is the structural language of the web, built from tags and attributes that browsers render. This tool maps Markdown constructs onto semantic HTML elements such as <h1>, <ul>, <a>, and <code>, bridging authoring convenience with web output.

HostedMarkdown ↔ HTML runtime

mainentry file

single fileworkspace

stdinprogram input

How it works

Write

The main file is the entry point for each run.

Give it input

Use the Input panel to pipe standard input to your program when it needs data.

Run

Run sends your code to a fresh hosted runtime and streams the result into the output panel.

Keep or share

Your draft stays in this browser, and Share creates a separate snapshot link.

External resources

commonmark.org— Official website
GitHub— Official spec repository

Input (Markdown)

# Title

Some **bold** and *italic* text.

- one
- two

Output (HTML)

<h1>Title</h1>
<p>Some <strong>bold</strong> and <em>italic</em> text.</p>
<ul>
  <li>one</li>
  <li>two</li>
</ul>

Input (Markdown link & code)

See [docs](https://example.com) and `npm install`.

Output (HTML)

<p>See <a href="https://example.com">docs</a> and <code>npm install</code>.</p>

Input (Markdown blockquote)

> Note: be careful.
>
> Second line.

Output (HTML)

<blockquote>
  <p>Note: be careful.</p>
  <p>Second line.</p>
</blockquote>

Input (Markdown headings & ordered list)

## Steps

1. Install
2. Build
3. Ship

Output (HTML)

<h2>Steps</h2>
<ol>
  <li>Install</li>
  <li>Build</li>
  <li>Ship</li>
</ol>

Input (Markdown image & fenced code)

![logo](/logo.png)

```js
const x = 1;
```

Output (HTML)

<p><img src="/logo.png" alt="logo"></p>
<pre><code class="language-js">const x = 1;
</code></pre>

Input (Markdown table)

| Name | Age |
| --- | --- |
| Ada | 36 |
| Linus | 54 |

Output (HTML)

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Ada</td>
      <td>36</td>
    </tr>
    <tr>
      <td>Linus</td>
      <td>54</td>
    </tr>
  </tbody>
</table>

Input (Markdown rule & strikethrough)

Done ~~later~~ now.

---

Output (HTML)

<p>Done <del>later</del> now.</p>
<hr>

markdown

html

Output

HTML output

Markdown ↔ HTML

Write

Give it input

Run

Keep or share

Editing

Navigation

Selection