Why render Markdown yourself
Markdown is the default writing format for READMEs, docs and notes, but many destinations need HTML: a CMS without a Markdown editor, an email newsletter, a static page, a help-centre article or a component that takes innerHTML. Converting here gives you the exact markup so you can paste it anywhere, inspect it, or check how a tricky bit of Markdown is interpreted before you publish.
Supported Markdown syntax
Rendering uses markdown-it, a CommonMark-compliant parser, with the GitHub-style extensions people expect:
- Headings, paragraphs, emphasis, blockquotes, ordered and unordered lists, horizontal rules and images.
- Fenced and indented code blocks; a fence’s language becomes a class, e.g.
<code class="language-js">, ready for a syntax highlighter such as Prism or highlight.js. - Tables with column alignment (
:---,---:). - Strikethrough with
~~text~~. - Task lists:
- [x] donebecomes a list item with a disabled, checked checkbox inside a<label>, using thecontains-task-listandtask-list-itemclasses GitHub uses. - Autolinks: bare URLs like
https://example.combecome links. - A
mermaidcode fence becomes<pre class="mermaid">, which Mermaid.js renders as a diagram.
Footnotes, definition lists and math are not part of this flavour and are left as text.
Raw HTML and safety
Like GitHub, the renderer passes raw HTML in your Markdown through unchanged, so <details>, <kbd> or a custom <div> keep working. That also means the output is not sanitised: if the Markdown came from an untrusted user, run the HTML through a sanitiser such as DOMPurify before inserting it into a page. The preview tab on this page is sanitised, so nothing in it can run scripts.
When raw HTML is malformed — an unclosed <div> for example — the result cannot be pretty-printed, so you get the HTML exactly as rendered, with an info note.
Full HTML document
By default the output is an HTML fragment: just the elements, ready to drop into an existing page or template. Switch on Full HTML document to get a standalone file instead. It adds <!doctype html>, a UTF-8 charset, a responsive viewport tag, a <title> taken from the first heading, the content wrapped in <main>, and a small built-in stylesheet: readable line length, system fonts, bordered tables, styled code blocks, and color-scheme: light dark so it follows the reader’s theme. Save it as .html and it opens nicely in any browser.
In both modes the HTML is pretty-printed with consistent indentation. For a printable version, see Markdown to PDF.
Tips
Tidy messy Markdown first with the Markdown formatter, or go the other way with HTML to Markdown. Your text is converted locally and stays on your device.
Examples
Release notes with a table and task list
Shows a GFM table, a bold list item and task-list checkboxes rendered with GitHub-compatible classes.
# Release notes
- **Faster** JSON formatting
- [x] Tree view
- [ ] Diff view
| Format | Tier |
| --- | --- |
| JSON | MVP |
| YAML | MVP |
<h1>Release notes</h1>
<ul class="contains-task-list">
<li><strong>Faster</strong> JSON formatting</li>
<li class="task-list-item">
<label
><input
class="task-list-item-checkbox"
checked=""
disabled=""
type="checkbox"
/>
Tree view</label
>
</li>
<li class="task-list-item">
<label
><input class="task-list-item-checkbox" disabled="" type="checkbox" />
Diff view</label
>
</li>
</ul>
<table>
<thead>
<tr>
<th>Format</th>
<th>Tier</th>
</tr>
</thead>
<tbody>
<tr>
<td>JSON</td>
<td>MVP</td>
</tr>
<tr>
<td>YAML</td>
<td>MVP</td>
</tr>
</tbody>
</table>
Standalone page
Produces a complete HTML file whose title comes from the heading, with an autolinked URL and a code block tagged language-bash.
# Deployment checklist
Run `npm run build` and check https://status.example.com before you start.
```bash
npm ci
npm run build
```
> Never deploy on Fridays.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Deployment checklist</title>
<style>
:root {
color-scheme: light dark;
}
body {
max-width: 46rem;
margin: 2rem auto;
padding: 0 1rem;
font:
16px/1.6 system-ui,
-apple-system,
"Segoe UI",
Roboto,
sans-serif;
}
h1,
h2,
h3,
h4,
h5,
h6 {
line-height: 1.25;
margin: 1.6em 0 0.6em;
}
h1,
h2 {
padding-bottom: 0.3em;
border-bottom: 1px solid #8884;
}
a {
color: #0969da;
}
code,
pre {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 0.9em;
}
code {
padding: 0.15em 0.35em;
border-radius: 4px;
background: #8882;
}
pre {
padding: 1em;
overflow: auto;
border-radius: 6px;
background: #8882;
}
pre code {
padding: 0;
background: none;
}
blockquote {
margin: 0;
padding: 0 1em;
color: #666;
border-left: 4px solid #8886;
}
table {
border-collapse: collapse;
margin: 1em 0;
}
th,
td {
padding: 0.4em 0.8em;
border: 1px solid #8886;
}
th {
background: #8881;
}
img {
max-width: 100%;
}
ul.contains-task-list,
.task-list-item {
list-style: none;
}
hr {
border: 0;
border-top: 1px solid #8886;
}
</style>
</head>
<body>
<main>
<h1>Deployment checklist</h1>
<p>
Run <code>npm run build</code> and check
<a href="https://status.example.com">https://status.example.com</a>
before you start.
</p>
<pre><code class="language-bash">npm ci
npm run build
</code></pre>
<blockquote>
<p>Never deploy on Fridays.</p>
</blockquote>
</main>
</body>
</html>
Raw HTML inside Markdown
The details and summary tags pass through untouched, and the Markdown inside them is still rendered.
## FAQ
<details>
<summary>Is it free?</summary>
Yes, **completely**.
</details>
<h2>FAQ</h2>
<details>
<summary>Is it free?</summary>
<p>Yes, <strong>completely</strong>.</p>
</details>
Common errors and how to fix them
| Error | Cause | Fix |
|---|---|---|
The HTML could not be pretty-printed (it contains malformed raw HTML), so it is shown as renderedExplained | Raw HTML in the Markdown has unbalanced tags, such as an unclosed <div> or <span>. | Close the tag in your Markdown; the conversion itself still succeeds. |
A table is rendered as plain text | The delimiter row is missing, or the table has no blank line before it. | Add a row like | — | — | under the header and leave an empty line above the table. |
Markdown inside an HTML block is not rendered | CommonMark treats lines directly after an HTML tag as raw HTML. | Leave a blank line between the HTML tag and the Markdown inside it. |
Frequently asked questions
Which Markdown flavour is used?
CommonMark via markdown-it, plus GitHub-style tables, strikethrough, task lists and autolinks. Footnotes and math are not supported.
Is the generated HTML safe to put on my site?
Only if you trust the Markdown, because raw HTML passes through. Sanitise output from untrusted users with a library like DOMPurify.
Does it add syntax highlighting?
No colours are added, but each fenced block carries a language class such as language-js that highlighters recognise.
What is the difference between a fragment and a full document?
A fragment is only the content elements, for pasting into an existing page. A full document adds the html, head and body structure, a title and basic styles.