Markdown Preview
Write Markdown and see the rendered result as you type, including GFM tables, fenced code blocks, quotes and lists. Copy the HTML with one click.
Type Markdown and watch it render live, with support for headings, emphasis, lists, links, images, block quotes, fenced code blocks and GitHub-flavoured tables. The generated HTML can be copied directly.
// Markdown Preview: Features
Write and see at the same time
Markdown is readable as plain text, which is its point, but tables and nested lists are the two constructs where the source stops being obvious. A table with mismatched pipe counts and a list with inconsistent indentation both look plausible and render wrongly. Seeing the result as you type turns a commit-and-check cycle into an immediate one.
What is supported
Headings at every level, bold, italic, combined bold italic and strikethrough, inline code, ordered and unordered lists, links and images, block quotes, horizontal rules, fenced code blocks with a language label, and GitHub-flavoured tables with column alignment. That covers what documentation, READMEs and issue comments actually use.
Markdown is not one specification
The original description left a great deal undefined, so implementations diverged. CommonMark exists to pin down the ambiguous cases; GitHub Flavored Markdown adds tables, strikethrough, task lists and automatic links on top of it; and various other flavours add their own extensions. The practical consequence is that a document can render differently in your editor, on GitHub and in your static site generator, and the differences cluster around exactly the constructs that are hardest to get right by eye.
Copying the HTML
The rendered HTML can be copied as source, which is useful when you need to paste formatted content into a system that does not accept Markdown: an email template, a CMS field, a documentation tool that only takes HTML. Writing in Markdown and converting is usually faster and produces cleaner markup than writing the HTML directly.
Internal documentation stays on your machine
Parsing and rendering both happen locally and nothing you type is transmitted, stored or logged, so internal documentation, unpublished release notes and draft specifications are all safe to work on here. For diagrams inside your documentation, the Mermaid Preview renders the diagram syntax that many Markdown environments support.
// Markdown Preview: FAQ
Which Markdown features are supported?
- Headings, bold, italic, bold italic, strikethrough, inline code, ordered and unordered lists, links, images, block quotes, horizontal rules, fenced code blocks with a language label, and GitHub-flavoured tables including column alignment.
Will this match how GitHub renders my README?
- Closely for the common constructs, which is what matters in practice. GitHub applies some additional processing of its own, including task lists, automatic linking and emoji shortcodes, so verify anything unusual on GitHub itself before relying on it.
Why does my table not render?
- Nearly always a pipe count mismatch or a missing separator row. Every row needs the same number of cells, and the header must be followed by a row of dashes with one entry per column. Colons in that row set alignment: left, right or centred.
Can I copy the HTML?
- Yes. The copy HTML button gives you the rendered markup, which is what you want when pasting into an email template, a CMS field or a documentation system that accepts HTML but not Markdown.
What is the difference between CommonMark and GFM?
- CommonMark is a precise specification that resolves the ambiguities in the original description of Markdown. GitHub Flavored Markdown builds on it and adds tables, strikethrough, task lists and automatic links. Most modern tools implement one or the other, which is why they mostly agree.
Does it highlight syntax in code blocks?
- Code blocks are rendered as preformatted code with the language recorded, rather than colour-highlighted. The language label is what a downstream renderer such as GitHub uses to apply highlighting, so including it is worthwhile even though it changes nothing here.
Why is my nested list flattened?
- Indentation. Different flavours disagree about how many spaces are needed to nest a list item, with two and four both appearing in the wild. Using four spaces per level is the most widely compatible choice, and it renders correctly in essentially every implementation.
Are raw HTML tags allowed?
- Markdown permits inline HTML and many documents rely on it for things Markdown cannot express. Be aware that destinations differ in what they allow: GitHub strips a great deal for security, and some static site generators pass it through entirely. Prefer Markdown syntax where one exists.
Can I use it for long documents?
- Yes, though re-rendering happens on each keystroke, so a very long document will feel less immediate. For extended writing a local editor with a preview pane is more comfortable; this is at its best for a section, a README or a comment.
Is the Markdown I write sent to a server?
- No. Parsing and rendering both run in your browser, and the text is never transmitted, stored or logged.
// How to Use Markdown Preview
-
Write or paste Markdown
Type into the editor, or press the sample button to load a document that exercises every supported construct, which is a quick way to see what the renderer handles.
-
Watch the preview
The rendered result updates as you type. Tables and nested lists are where errors hide, so check those against the preview rather than trusting the source to look right.
-
Copy the Markdown or the HTML
Take the Markdown for a README or an issue comment, or copy the rendered HTML when the destination accepts markup but not Markdown.
Category Design