Markdown Previewer
Write Markdown and see the formatted result live, side by side, with a syntax reference and support for tables, code blocks and task lists.
There is no such thing as markdown, and this page had to pick one
Markdown separates blocks with blank lines. A single newline inside a paragraph is, by the base specification, a soft break: it survives into the HTML as a newline character, and the browser collapses it to a space. Two typed lines become one flowing line.
That is right for prose in a wrapping editor and wrong for almost everything people type into a box — addresses, lists of names, lyrics, a signature. So most renderers turn a single newline into a hard line break instead. This page does — and the checkbox at the top turns it off, so the same document can be watched changing under you rather than taken on trust. Here is one hard-wrapped paragraph, 3 lines long, rendered both ways:
| Renderer | Line breaks | Output |
|---|---|---|
| this page | 2 | <p>The quick brown fox jumps over the lazy dog and then keeps<br>going for a while longer, so that the paragraph wraps across<br>several lines in a narrow editor window.</p> |
| base specification | 0 | <p>The quick brown fox jumps over the lazy dog and then keeps
going for a while longer, so that the paragraph wraps across
several lines in a narrow editor window.</p> |
Same input, same renderer, one option — and a break at the end of every typed line
against none at all. Paste the sample above into the box and you will get the first row.
The option only reaches newlines inside a paragraph, which is why most of a document looks
identical either way. Of 7 common constructs it changes 2:
Construct Affected? a single newline yes a blank line between no two trailing spaces no a list no a heading then text no inside a blockquote yes a fenced code block no
Blank lines, lists, headings and fenced code are decided by block rules the option has no say
in. A blockquote is affected, because it contains a paragraph. And two trailing spaces
— the specification's own way of asking for a hard break — work either way, which
makes them the portable spelling if you need exactly one line break and nothing else.
Neither behaviour is a bug. But when a document looks right in one place and wrong in another,
this is the first thing to check, and no amount of re-reading the markdown will show it —
the markdown is identical.
Markdown is a superset of HTML, not a safe subset of it
The most common wrong belief about markdown is that it lets people format text without letting them write HTML. It is the exact opposite. Raw HTML is passed through untouched, on purpose, as an escape hatch for anything the syntax cannot express. All 6 of these reach the output byte for byte:
| Input | What it is | Reaches the page? |
|---|---|---|
<b>bold</b> | a formatting tag | unchanged |
<img src=x onerror="alert(1)"> | an event handler | unchanged |
<script>alert(1)</script> | a script element | unchanged |
<a href="javascript:alert(1)">click</a> | a javascript: URL | unchanged |
<style>body{display:none}</style> | a style element | unchanged |
<iframe src="https://example.com"></iframe> | an iframe | unchanged |
6 of 6, which is the format working as specified rather than failing. It is harmless here: this page renders markdown you typed, in your own browser, and there is nobody else to affect. It is not harmless in the place people usually reach for a markdown renderer — a comment box, a wiki, a profile. Rendering somebody else's markdown and inserting the result is a scripting hole unless the HTML is filtered after rendering, because it is the renderer that hands the raw tags through. The panel under the preview names the raw tags in whatever you have typed, so this is visible rather than theoretical — but it detects and does not filter, and nothing about it should be read as making anything safe.
And the backslash is a trap
Three ways to stop a tag being markup, and only two of them work:
| Written as | Comes out as | Neutralised? |
|---|---|---|
nothing at all — <b>bold</b> | <p><b>bold</b></p> | no |
a backslash — \<b>bold</b> | <p><b>bold</b></p> | no |
a code span — `<b>bold</b>` | <p><code><b>bold</b></code></p> | yes |
an indented block — <b>bold</b> | <pre><code><b>bold</b>
</code></pre> | yes |
A code span or an indented block turns its whole contents into visible text. The backslash does not, and it fails in the worst possible way: it escapes exactly the one character it precedes. The opening tag became text, the closing tag is still live markup, and the output is now unbalanced — half an escape, which reads as though it succeeded. If you want a tag shown rather than obeyed, wrap it in backticks.
How to use
- Type or paste Markdown on the left.
- The rendered result appears on the right as you type.
- Use the reference for syntax you have forgotten.
- Copy the HTML if you need it elsewhere.
Frequently asked questions
What is Markdown for?
Writing formatted text in plain text, so the source stays readable without being rendered. It was designed so that the markup looks like what it means — asterisks around emphasis, hashes for headings — which is why it reads naturally even unformatted.
Which flavour does this preview use?
A CommonMark base with the common GitHub extensions — tables, strikethrough, task lists and fenced code blocks. That combination covers what most people mean by Markdown, though a specific platform may still differ in details.
How do I write a code block?
Fence it with three backticks on the lines above and below, optionally naming the language after the opening fence for syntax highlighting. The older four-space-indent style still works but is easy to trigger accidentally and cannot specify a language.
Why is my nested list not indenting?
Indentation for nested lists needs to line up with the parent item's text, which usually means two to four spaces depending on the marker. Getting this slightly wrong produces a flat list or a code block, and it is the most common Markdown frustration by some distance.
Can I include images?
Yes, with the same syntax as a link but preceded by an exclamation mark. The image itself has to be hosted somewhere reachable — Markdown references images, it does not embed them, so a local path will not work once the document moves.
Is Markdown a good format for long documents?
For structured prose, yes — it is used for books, documentation and academic papers. Its limits appear with complex layout, precise figure placement, cross-references and footnotes, where extensions or a different format become necessary.
🔒 This tool runs entirely in your browser. Nothing you enter is uploaded, logged, or stored.