Markdown Preview
Render Markdown to HTML instantly with a live preview pane.
About the Markdown Preview
The Markdown Previewer on HT99 Tools renders a Markdown document into HTML using a simplified CommonMark-compatible pipeline. Type a heading, paste a README, draft a blog post — the tool produces both a visual preview and the raw HTML source you can copy into a CMS, an email, or a static-site generator.
Markdown is the de-facto standard for plain-text authoring on the web. GitHub renders README.md files in Markdown; Slack, Discord, and Reddit use Markdown variants for chat formatting; Hugo, Jekyll, Eleventy, and Ghost use Markdown for blog posts; Notion, Obsidian, and Logseq store notes as Markdown; RFC 7991 (the xml2rfc format) accepts a Markdown source. The CommonMark specification (released 2017) is the canonical standard that resolved years of ambiguities in John Gruber's original 2004 syntax.
This tool implements the core CommonMark feature set: ATX-style headings (# to ######), bold and italic emphasis, inline code, fenced code blocks, links, unordered and ordered lists, and blockquotes. It does not implement every CommonMark edge case — nested lists, reference-style links, setext headings, hard line breaks, and HTML block detection are simplified or omitted — but it handles the syntax that covers 95% of real-world README files.
How It Works
The renderer applies a sequence of regular-expression replacements to the source text, in an order chosen to avoid mutual interference. Fenced code blocks (```...```) are processed first, so that Markdown syntax inside the block (asterisks, brackets, hashes) is not interpreted as Markdown. Headings are processed next, ordered from ###### down to # so that longer hashes do not shadow shorter ones.
Inline code (`code`) is wrapped in <code> tags before emphasis is applied, so that an asterisk inside a code span is not turned into bold/italic markup. Lists — both unordered (- item) and ordered (1. item) — are converted to <li> items, then wrapped in <ul> when the items are contiguous. Blockquotes (> ...) become <blockquote>. Links ([text](url)) become <a href="..."> with target="_blank" and rel="noopener noreferrer" for security.
Emphasis is applied last so it can match across inline code and links. **bold** becomes <strong>, *italic* becomes <em>. The order matters: bold must be applied before italic, otherwise **bold** would be parsed as <em><em>bold</em></em>. The optional HTML escape step runs first — before any Markdown syntax — so that raw HTML in the input is displayed as text rather than passed through to the rendered output (a defence against accidental XSS in user-supplied Markdown).
Worked Examples
The default input is a 600-character README-style document with a top-level heading, a section heading, a paragraph with bold text, a fenced code block containing an HTTP header, a numbered list of three endpoints, and a blockquote describing a rate limit. The preview renders the heading as <h1>, the section heading as <h2>, the code block as <pre><code> with monospace font, the list as <ol> with three <li> items, and the blockquote as <blockquote> indented with a left border.
Enable the “Escape raw HTML” option and any <script> or <div> in your input will be displayed as literal text rather than rendered as HTML. This is the safe default when rendering untrusted Markdown (such as a comment field on a blog post). Disable it to allow raw HTML to pass through — useful for embedding a YouTube iframe or a custom <div> in a known-trusted README.
Enable the “Single newlines become <br>” option to mimic the line-break behaviour of GitHub Flavored Markdown, where a single newline inside a paragraph produces a line break. Default CommonMark behaviour is to join lines with spaces; only a blank line ends a paragraph.
When to Use This Tool
- Previewing a README.md before pushing it to GitHub or GitLab.
- Drafting a blog post for a static-site generator (Hugo, Jekyll, Eleventy).
- Composing a chat message with formatting (Slack, Discord, Reddit) and seeing the result before posting.
- Converting Markdown to HTML for embedding in a web page or email template.
- Learning CommonMark syntax by experimenting with different inputs.
- Proofreading documentation for formatting errors before publication.
- Demonstrating Markdown syntax for a writing tutorial.
Limitations & Disclaimer
This tool implements a simplified CommonMark renderer using regular expressions. It does not support nested lists, reference-style links, setext headings (underlined with = or -), hard line breaks (backslash-newline), images (), horizontal rules (---), or HTML block detection. GFM extensions (tables, task lists, strikethrough, autolinks) are also unsupported. The renderer may produce invalid HTML for edge cases (lists containing multiple paragraphs, ambiguous emphasis nesting). For production use, prefer a dedicated library such as marked, markdown-it, remark, or micromark that implements the full CommonMark specification. See our disclaimer for full terms.
Frequently Asked Questions
What is CommonMark and how does it differ from original Markdown?
CommonMark is a standardised version of Markdown, released in 2017, that resolves years of ambiguity in John Gruber's original 2004 spec. For example, the original spec did not precisely define how nested lists should be indented, leading to inconsistent rendering across tools. CommonMark defines parsing rules in enough detail that conformant implementations produce identical output. GitHub Flavored Markdown (GFM) is a strict superset of CommonMark that adds tables, task lists, strikethrough, and autolinks.
Does the tool support GitHub Flavored Markdown (GFM)?
Partially. The tool supports core CommonMark: headings, emphasis, code (inline and fenced), links, lists, and blockquotes. It does not support GFM extensions: tables (pipe syntax), task lists (<code>- [x]</code>), strikethrough (<code>~~text~~</code>), or autolinking of bare URLs. For full GFM support, use a library like <code>marked</code>, <code>markdown-it</code>, or <code>micromark</code> with the GFM plugin enabled.
Can I use raw HTML in my Markdown?
Yes, by default. Markdown allows raw HTML to pass through to the output, so <code><div class="custom">...</div></code> in your Markdown will be rendered as an HTML div. Enable the “Escape raw HTML” option to prevent this — raw HTML will be displayed as text, which is safer when rendering untrusted input. CommonMark specifies a list of HTML block elements that trigger HTML-block parsing; this tool uses a simplified approach (escape-on-option).
How does the tool handle code blocks with syntax highlighting?
The tool renders fenced code blocks as <code><pre><code></code> but does not add syntax highlighting. For syntax highlighting, use a library like Prism.js, highlight.js, or Shiki, which scans for <code><code class="language-xxx"></code> and applies colour based on the language. Most static-site generators (Hugo, Jekyll, Eleventy) integrate one of these libraries automatically.
Why do my nested lists not render correctly?
The tool supports flat lists only — items at the same indentation level. Nested lists (items indented under a parent) require a more sophisticated parser that tracks indentation. For nested lists, use a dedicated Markdown library like <code>marked</code>, <code>markdown-it</code>, or <code>remark</code>, which implement the CommonMark indentation rules correctly. Most real-world READMEs use nested lists sparingly; for the rest, this tool is sufficient.
Is my Markdown uploaded anywhere?
No. Rendering runs entirely in the browser. Drafts, proprietary documentation, and unpublished content never leave the device.
Last updated: September 9, 2026 · Author: HT99 Tools Editorial Team