Markdown Preview
Markdown has no single specification, so the same document renders differently on GitHub, in your editor, and in whatever static site generator you use. This preview implements a practical CommonMark subset and, unusually, escapes raw HTML rather than passing it through.
How to use it
- Type or paste Markdown into the editor.
- The rendered HTML updates live beside it.
- Copy the HTML when you need it. Nothing is transmitted.
Raw HTML is escaped, not rendered
This is the most important difference between this renderer and most others, and it is deliberate.
The original Markdown design permits raw HTML to pass straight through, and most renderers honour that. It is useful when you wrote the document and want an iframe or a styled div in the middle of it. It is dangerous when the document came from somewhere else, because a script tag or an onerror attribute passes through exactly as readily.
Here, HTML in the source is escaped and displayed as literal text. A pasted div appears as the characters of a div rather than becoming one. The consequence is that this preview is safe to point at Markdown from an untrusted source, and that you cannot use it to preview a document that legitimately relies on embedded HTML.
What the renderer supports
The implemented subset covers what most documents actually use.
Supported constructs:
- ATX headings from one to six hash marks.
- Fenced code blocks with an optional language identifier, which becomes a language class on the code element for downstream highlighters. Fences are extracted before escaping, so code containing angle brackets renders correctly.
- Inline code with backticks, bold with double asterisks or underscores, italic with single ones.
- Unordered lists with hyphen, asterisk, or plus, and ordered lists with numbers.
- Blockquotes, horizontal rules, and inline links, which are given rel="noopener noreferrer".
What it does not support
Pipe tables are a GitHub Flavored Markdown extension rather than part of CommonMark, and are not implemented. Neither are task lists, strikethrough, footnotes, definition lists, or automatic linking of bare URLs.
Nested lists beyond the first level are not handled reliably, which is the usual limitation of a regex-based renderer. If your document depends on deep nesting, check the output rather than assuming.
If you need the full GitHub feature set, a parser-based renderer such as markdown-it or remark is the right tool. This one is optimised for being small, fast, and safe rather than complete.
Why previewing locally is worth it
Draft documentation, release notes, incident write-ups, and internal READMEs regularly contain material that is not public yet. Pasting one into a server-side preview service sends it to a third party.
Rendering here happens in the page, so the source and the generated HTML both stay on your machine.
At a glance
| Flavour | CommonMark subset |
|---|---|
| Raw HTML | Escaped, not passed through |
| Tables | Not supported |
| Transmitted | Nothing |
Frequently asked questions
Why is my embedded HTML showing as text?
This renderer escapes raw HTML by design, so it is safe to preview untrusted documents. A renderer that passes HTML through, such as markdown-it with html enabled, is what you want for documents that rely on embedded markup.
Are tables supported?
No. Pipe tables are a GitHub Flavored Markdown extension rather than part of CommonMark, and this implementation covers the CommonMark subset.
Why does the output differ from GitHub?
GitHub applies its own extensions on top of CommonMark, including tables, task lists, strikethrough, and autolinking. Any document using those will differ.
Is my document uploaded?
No. Parsing and rendering happen in the page, so both the Markdown and the generated HTML stay on your machine.
Read more
Formatting and encoding — Pretty-printing catches bugs, Base64 costs 33 percent, and escaping applied in the wrong context prevents nothing.