Markdown Preview, HTML Converter & Syntax Guide

Markdown preview, Markdown ↔ HTML conversion and syntax guide

The rendered result will appear here.

About Markdown Preview, HTML Converter & Syntax Guide

There is no single Markdown. John Gruber's 2004 description left many cases ambiguous, so parsers disagreed; CommonMark is the specification that pinned those cases down, and GitHub Flavored Markdown (GFM) is CommonMark plus a handful of extensions such as tables, task lists and strikethrough. This tool renders with marked, an open-source CommonMark and GFM parser, and departs from it only in how raw HTML is handled, for safety. Knowing where it matches and where it differs saves you from surprises when the same text lands on GitHub or a blog engine.

Three modes share this page: a live preview, a two-way Markdown ↔ HTML converter, and a syntax guide that shows each construct next to its rendered result.

Raw HTML is shown as text, never executed

CommonMark passes raw HTML straight through and leaves sanitizing to whoever embeds the renderer. GFM adds a “disallowed raw HTML” extension that neutralizes a short list of tags, including script, style, iframe, textarea and title, by escaping their opening angle bracket.

This tool goes further. Everything the parser recognizes as raw HTML is escaped, so <script>alert(1)</script> appears as literal text in a paragraph instead of running. The trade-off is that harmless tags GitHub allows, such as <details> or <kbd>, also show up as text. Link and image URLs are checked for their scheme, and executable ones like javascript: or vbscript: are replaced with #.

What is supported, and what differs from the spec

All of CommonMark is supported, including ATX and setext headings, the flanking rules for emphasis, hard line breaks (two trailing spaces or a backslash), “5.” and “3)” ordered lists with their start number, four-space indented code, reference links and backslash escapes, plus the GFM extensions: tables with :--: alignment, ~~strikethrough~~, - [ ] task items and bare www. autolinks. So snake_case_name keeps its underscores, and a URL with balanced parentheses such as …/Foo_(bar) stays one link. The remaining differences:

Raw HTML. Tags such as <details>, <kbd> or  are neither rendered nor hidden; they appear as text (see the section above).
Footnotes ([^1]), definition lists, :smile: emoji codes and heading anchor ids are extensions outside the GFM spec, so they are not generated.
Non-ASCII characters and spaces in link URLs are percent-encoded (%ED%95%9C and so on), as the CommonMark reference implementation does. Browsers open the same address.

Converter mode: Markdown ↔ HTML

Markdown → HTML uses the same renderer as the preview, so strikethrough, task-list checkboxes and escaped pipes (\|) in table cells come out exactly as they do there, with a line break between block tags for readability.

HTML → Markdown turns headings, paragraphs, bold and italic, links, images, nested lists, block quotes, pre/code blocks, tables, <br> and <hr> back into Markdown. <del> becomes ~~strikethrough~~ and checkboxes become [x] or [ ]. script and style elements are removed along with their contents. Any other tag it doesn't know is stripped while its text is kept, and all attributes (class, style, onclick) disappear. Block tags such as div or section get a blank line on each side, so their text does not run into the last item of a preceding list. That makes it handy for pulling a chunk of a web page into a README, but layout that depended on divs will flatten.

Syntax guide mode

The guide walks through headings, paragraphs and line breaks, emphasis, lists, links and images, code, quotes, rules, tables, escaping and inline HTML. Each result is the spec-correct HTML, and for most entries it matches the preview. For things this tool does not generate (footnotes, definition lists, emoji codes, heading ids, inline HTML and comments) the guide shows, written by hand, what platforms like GitHub produce, so for those entries the guide and the preview differ.

Worked examples

Sanitization in action

Input: <script>alert(1)</script> [click me](javascript:alert(1))
Output: <p><script>alert(1)</script></p> <p><a href=“#” rel=“noopener noreferrer”>click me</a></p>

The tag is escaped into text and the javascript: link becomes #. Balanced parentheses inside a URL are read as part of the URL.

Identifiers with underscores

Input: snake_case_name and file_name_here
Output: <p>snake_case_name and file_name_here</p>

Following CommonMark, an underscore inside a word cannot open or close emphasis, so the text stays as written. Asterisks do work inside words: in foo*bar*baz, bar turns italic.

Converting HTML back to Markdown

Input: <h2>Hi</h2><p>A <strong>b</strong> <a href=“/x”>l</a></p><ul><li>one<ul><li>two</li></ul></li></ul>
Output: ## Hi A **b** [l](/x) - one - two

Nested lists come back with two-space indentation, which both CommonMark and GFM accept.

Ordered list numbering

Input: 5. five 6. six
Output: <ol start=“5”> <li>five</li> <li>six</li> </ol>

The list starts at the first number you write, which is handy for continuing a step list after a paragraph. Later numbers are ignored: 5. 5. 5. still counts 5, 6, 7.

How to use it

Choose Preview, Converter or Syntax guide from the tabs.
Type Markdown (or HTML) on the left; the result updates as you type.
Copy the resulting HTML or Markdown.

Frequently asked questions

Line breaks show on GitHub but lines join here. Why?

GitHub issues and comments preserve single line breaks, but files like README.md and CommonMark in general split paragraphs only on blank lines. This tool follows the spec: end a line with two spaces or a backslash (\) to break it inside a paragraph, and leave a blank line to start a new paragraph.

Can I mix HTML into my Markdown?

Not in this tool: every tag is displayed as text. That is deliberate, so pasted content can never run scripts in the page.

Does the code block get syntax highlighting?

A fence like ```js produces <pre><code class=“language-js”>. Coloring is done by a highlighter such as Prism or highlight.js that reads that class; this tool does not add colors itself.

How do I put a pipe character inside a table cell?

Escape it as \|. Both the preview and the converter treat it as a literal |.

Is ~single tilde~ strikethrough?

Yes. As in GFM, one or two tildes both produce <del>.

Sources

Last reviewed: 2026-09-23

Privacy and how data is handled