Skip to main content

markdown-html

Markdown is a lightweight text formatting language designed to be readable as plain text and trivial to convert to HTML. The ZTools Markdown to HTML converter parses CommonMark + GitHub-Flavored Markdown (GFM) — including tables, fenced code blocks, task lists, autolinks, and strikethrough — and emits clean, semantic HTML5. The output is sanitized to strip dangerous tags (<script>, <iframe>, etc.) so you can paste user-submitted Markdown safely. A live preview pane mirrors the converted HTML as you type, with a "View HTML source" toggle for copy-paste into your CMS or static site generator.

Use cases​

Drafting blog posts in Markdown for paste into a CMS​

Write the post in Markdown (faster than rich-text editors, version-controllable in Git), convert to HTML once, paste into the WordPress / Ghost / Notion editor. Saves you from the CMS's broken auto-formatting and produces consistent output across posts.

Generating email HTML from Markdown sources​

Maintain newsletter content as Markdown files in a Git repo. Convert each issue to HTML, pipe into your email service's "raw HTML" mode. Reviews happen on the readable Markdown source; the HTML is build output, not the artifact you edit.

Previewing README files before commit​

Paste your in-progress README.md to see exactly how GitHub will render it — including tricky cases like nested lists, code blocks with language hints, and task lists. Faster than push-and-check on GitHub.

Building documentation pages programmatically​

Write docs in Markdown, run them through this converter as part of a build script (call the underlying library directly), embed the HTML into your docs template. This is exactly how Docusaurus, MkDocs, and most static-site doc generators work under the hood.

How it works​

  1. Paste Markdown into the input pane — Up to ~5 MB. Live preview updates within ~50ms of each keystroke.
  2. Parser tokenizes the Markdown — A standards-compliant CommonMark parser (with GFM extensions) builds an AST representing headings, paragraphs, lists, code blocks, etc.
  3. AST is rendered to HTML — Each AST node maps to its semantic HTML equivalent: # → <h1>, list items → <li> inside <ul>/<ol>, fenced code → <pre><code class="language-X">, etc.
  4. HTML is sanitized — Inline <script>, <iframe>, <object>, and inline event handlers (onclick=, etc.) are stripped via DOMPurify. Safe to render user-submitted Markdown to other users.
  5. Toggle preview vs source — Preview shows the rendered HTML inline. Source shows the HTML text for copy-paste. A "Copy as HTML" button copies the source in one click.

Examples​

Input: # Title

A paragraph with bold and code.

  • item 1
  • item 2

Output: <h1>Title</h1> <p>A paragraph with <strong>bold</strong> and <code>code</code>.</p> <ul> <li>item 1</li> <li>item 2</li> </ul>

Input: | col1 | col2 | |---|---| | a | b |

Output: <table><thead><tr><th>col1</th><th>col2</th></tr></thead><tbody><tr><td>a</td><td>b</td></tr></tbody></table>

Frequently asked questions​

Which Markdown flavor does this support?

CommonMark (the strict standard) plus GitHub-Flavored Markdown extensions: tables, fenced code blocks with language hints, task lists (- [x]), strikethrough (~~), autolinks. Compatible with what GitHub, GitLab, and most modern Markdown engines render.

Is my Markdown sent anywhere?

No. The parser, renderer, and sanitizer all run in your browser. Open DevTools → Network and confirm zero requests on input. Important for confidential drafts or internal documentation.

Why is my HTML output missing some tags I expected?

The sanitizer strips potentially-dangerous tags (&lt;script&gt;, &lt;iframe&gt;, &lt;embed&gt;, &lt;object&gt;) and inline event handlers. If you genuinely need an &lt;iframe&gt; (embed a YouTube video, etc.), insert it after conversion in your CMS.

Does it support footnotes?

Yes — footnote syntax ([^1] reference, [^1]: definition later in the doc) is supported as a GFM extension. The renderer produces semantic &lt;sup&gt; references and a &lt;section role="doc-endnotes"&gt; at the end.

Can it highlight code blocks?

Yes. Fenced code blocks with a language hint ( ```javascript) are rendered as &lt;pre&gt;&lt;code class="language-javascript"&gt;. Pair the output with Prism.js or Highlight.js in your destination page for actual color highlighting (the converter just adds the class hooks).

Will it render LaTeX or math?

Not by default — math rendering is a separate pipeline. Wrap math in MathJax or KaTeX classes ($..$, $$..$$) and configure your destination page to load the math renderer. The converter passes the syntax through unchanged when math extensions are enabled.

Tips​

  • Use fenced code blocks (```) with a language hint, not indented code blocks — they're more readable and support syntax highlighting.
  • For images, prefer the \![alt\]\(url) syntax over raw &lt;img&gt; tags. Easier to maintain and the alt text doubles as accessibility.
  • Front-matter (YAML at the top of the file --- ... ---) is preserved as raw text — strip it before converting if you don't want it in the output.
  • For complex tables, write them in Markdown-table format then run through this converter; pasting raw HTML tables into Markdown source breaks future edits.

Try it now​

The full markdown-html runs in your browser at https://ztools.zaions.com/markdown-html — no signup, no upload, no data leaves your device.

Open the tool ↗

Last updated: 2026-05-05 · Author: Ahsan Mahmood · Edit this page on GitHub