Markdown Preview
Side-by-side editor and rendered output
Markdown is written to be readable as source, but some things — a table’s alignment, whether a nested list nested the way you meant, how a fenced code block will be highlighted — only become clear once rendered. A side-by-side preview closes that loop immediately instead of after a commit and a page reload.
The rendering here follows CommonMark plus the GitHub-flavoured extensions in everyday use: tables, fenced code, strikethrough and task lists. That is worth stating, because Markdown has no single universal dialect and a document that renders correctly in one place can render subtly differently in another.
How to use it
- Write or paste Markdown on the leftThe rendered output updates as you type, so you can see the effect of a change without leaving the page.
- Watch the structural casesNested lists, tables and code fences are where Markdown most often does something other than what was intended. They are the reason to preview at all.
- Copy out what you needTake the Markdown to a README or an issue. Nothing you write is stored or sent, so drafting a private document here is safe.
Frequently asked questions
Why is my nested list not nesting?
Indentation. A nested item must be indented to align with the content of its parent — generally two spaces for a hyphen marker, four for an ordered one. Indent by one space and it stays at the same level; indent too far and it may be treated as a code block instead.
How do I write a table?
A header row, a separator row of hyphens, then the body, with pipes between cells. Colons in the separator set alignment: left, right or centred. Tables are a GitHub-flavoured extension rather than core CommonMark, so a strict renderer will show your pipes as literal text.
How do I show a code fence inside a code fence?
Use more backticks on the outside than on the inside. Four backticks can wrap a block containing three, and so on. The same trick works inline: a run of backticks can enclose text containing a shorter run.
Does this preview match GitHub exactly?
Close, but not guaranteed. GitHub applies its own sanitiser, its own heading anchors and its own handling of things like issue references and mentions, none of which are part of any Markdown specification. For a README, previewing on GitHub itself remains the final check.
Can I use HTML inside Markdown?
Generally yes, and it is the usual escape hatch for anything Markdown cannot express — a details block, an image with explicit dimensions. Be aware that renderers handling untrusted input often strip HTML entirely, so a document relying on it may render differently elsewhere.