Markdown to HTML Converter

You wrote your documentation in Markdown but the CMS needs HTML. The conversion isn’t just wrapping text in <p> tags — fenced code blocks need <pre><code class="language-js">, tables need <table> with <thead> and <tbody>, and task lists need <input type="checkbox"> elements. You need accurate, standards-compliant HTML output.

Why This Converter (Not the Markdown Preview)

PureDevTools has a Markdown Preview for writing and previewing Markdown side by side. This tool gives you the raw HTML output — paste Markdown, get the converted HTML with proper element nesting, copy it or download as .html. Use the preview for writing; use this converter when you need the actual HTML source.

What Is Markdown to HTML Conversion?

Markdown is a lightweight plain-text format designed to be easy to read and write. HTML (HyperText Markup Language) is what browsers render. Converting Markdown to HTML is the foundational step that powers README files on GitHub, blog posts in static site generators like Hugo or Jekyll, documentation platforms like MkDocs, and comment systems on developer forums.

Common reasons to convert Markdown to HTML include:

• Embedding Markdown-authored content in a web page or email template
• Generating HTML output from documentation written in .md files
• Previewing how a README or wiki page will look when rendered
• Migrating content from a Markdown-based CMS to an HTML-based system
• Extracting HTML snippets for copy-pasting into a rich text editor or CMS

How the Converter Works

This tool parses your Markdown input using a custom block-level and inline parser written in TypeScript — no external libraries, no server calls. All processing runs entirely in your browser; your Markdown content never leaves your device.

The parser handles:

1. Block-level elements — fenced code blocks, ATX and Setext headings, horizontal rules, blockquotes, tables, unordered and ordered lists, task list checkboxes, and paragraphs
2. Inline elements — bold, italic, bold+italic, strikethrough, inline code, images, links, autolinks, and hard line breaks
3. HTML escaping — raw text is escaped to prevent unintended HTML injection in the output
4. URL sanitisation — javascript:, data:, and vbscript: URLs in links and images are replaced with #

Supported Markdown Syntax

Code Block Language Classes

When you add a language identifier to a fenced code block:

```typescript
const x: number = 42;
```

The converter emits:

<pre><code class="language-typescript">const x: number = 42;</code></pre>

The language-* class follows the convention used by Prism.js and Highlight.js. You can drop this output directly into a page that loads either library and syntax highlighting will be applied automatically. Toggle the Syntax class on code blocks option to omit the class if your target renderer doesn’t use it.

Table Conversion

The converter supports GFM (GitHub Flavored Markdown) pipe tables with optional column alignment using : in the separator row:

| Left     | Center  |    Right |
| :------- | :-----: | -------: |
| Alice    |  42     |  $100.00 |
| Bob      |  37     |   $85.50 |

Becomes:

<table>
  <thead>
    <tr>
      <th style="text-align:left">Left</th>
      <th style="text-align:center">Center</th>
      <th style="text-align:right">Right</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style="text-align:left">Alice</td>
      <td style="text-align:center">42</td>
      <td style="text-align:right">$100.00</td>
    </tr>
    ...
  </tbody>
</table>

Alignment is applied via inline style="text-align:..." on each <th> and <td>.

Task List Checkboxes

The converter supports GFM task list syntax:

- [x] Completed item
- [ ] Pending item

Becomes:

<ul>
  <li><input type="checkbox" disabled checked> Completed item</li>
  <li><input type="checkbox" disabled> Pending item</li>
</ul>

The disabled attribute prevents interaction (task lists in rendered Markdown are display-only). Toggle Task list checkboxes in the options panel to convert them as plain list items instead.

Preview Tab

Click Preview to see the rendered HTML as a web page. This is useful for verifying that headings, lists, tables, code blocks, and links look correct before copying or downloading the output. The preview renders in a sandboxed div — it does not execute scripts.

Conversion Options

Headings

When enabled (default), ATX headings (# H1 to ###### H6) and Setext headings (underlined with = or -) are converted to the corresponding <h1> through <h6> tags. When disabled, headings are wrapped in <p><strong>…</strong></p> instead — useful when the output will be inserted into a context where heading levels are controlled externally.

Syntax class on code blocks

When enabled (default), fenced code blocks with a language identifier get a class="language-<name>" attribute on the <code> element. When disabled, the class is omitted and the output is plain <pre><code>.

Task list checkboxes

When enabled (default), - [ ] and - [x] list items are converted to <li><input type="checkbox" disabled> elements. When disabled, [ ] and [x] are preserved as literal text inside <li>.

Tables

When enabled (default), GFM pipe tables are converted to <table> with <thead>, <tbody>, <th>, and <td>. When disabled, table rows are converted as plain paragraphs.

Nested Lists

The parser handles nested unordered and ordered lists by tracking indentation. A child list indented under a parent list item is emitted as a nested <ul> or <ol>:

- Fruits
  - Apple
  - Banana
    - Cavendish
- Vegetables

Becomes:

<ul>
  <li>Fruits<ul><li>Apple</li><li>Banana<ul><li>Cavendish</li></ul></li></ul></li>
  <li>Vegetables</li>
</ul>

Mixed ordered and unordered nesting is supported.

Blockquotes

Blockquotes are fully recursive — a blockquote can contain headings, lists, code blocks, and other blockquotes:

> ## Quoted Heading
>
> - Item A
> - Item B
>
> > Nested blockquote

Frequently Asked Questions

Does this tool send my Markdown to a server?

No. The entire conversion runs in your browser using a TypeScript parser. Your Markdown content never leaves your device.

What Markdown flavour does the converter support?

The converter supports CommonMark-compatible syntax plus GFM (GitHub Flavored Markdown) extensions: pipe tables and task list checkboxes. It does not support raw HTML passthrough, footnotes, or definition lists.

Can I convert large Markdown documents?

Yes. The parser processes the document in a single linear pass. Typical documents (under 1 MB) convert in under 50 ms on modern devices.

Why is my raw HTML inside Markdown not rendered?

The converter does not pass raw HTML through. Any <tags> in your Markdown input are escaped to <tags> for security. This prevents XSS injection in the output.

How do I use the HTML output in my project?

Copy the output from the HTML tab or click Download .html to save a standalone HTML file. If you only need the fragment (not a full page), copy from the HTML tab and paste it into your template. The downloaded file wraps the fragment in a minimal <!DOCTYPE html> shell.

The Preview tab is blank. Why?

The Preview tab renders only valid converted HTML. If your Markdown input is empty or produces only whitespace, the preview will be empty. Check the HTML tab to confirm output was generated.