Markdown Preview
See your Markdown rendered as you type, in your browser, with every piece of raw HTML escaped rather than run.
Runs entirely in your browser. Nothing is uploaded, logged or stored.
The HTML this produces
Write Markdown on the left and read it on the right. Everything happens in your browser, so a draft you are not ready to show anybody does not have to be shown to a server first.
How it works
The document is read line by line into blocks — headings, paragraphs, lists, quotes, code, tables — and then each block's text is read for the inline pieces: emphasis, code spans, links and images. Anything the renderer does not recognise stays as text.
Raw HTML is escaped rather than passed through. If you write a tag, you see the tag. That is a deliberate departure from most renderers, which allow a curated subset — and the reason is that curating the subset correctly is a job that has gone wrong for much larger projects, repeatedly.
A link is only made when its address begins with a scheme on a short list, checked on the decoded form of the address rather than what was typed. When it is refused the text stays and the link does not, so you can see that something was there.
Examples
| Case | Input | Result |
|---|---|---|
| Inline emphasis and code | **bold**, *italic* and `code`. | <p><strong>bold</strong>, <em>italic</em> and <code>code</code>.</p> |
Frequently asked questions
Is my document sent anywhere?
No. The renderer is JavaScript running in this page. Nothing is uploaded, nothing is logged and nothing is stored — you can turn off your network connection and the tool still works.
Why is my HTML showing as text?
Because it is escaped on purpose. Markdown lets a document contain HTML, and letting that HTML through means deciding which tags and attributes are safe — a decision that is subtle, that changes as browsers change, and that has been got wrong by well-resourced projects more than once. Escaping all of it has no such failure mode. The cost is that a document leaning on inline HTML will not look the way it does on GitHub, and that is the trade being made.
Is this exactly CommonMark?
No, and it would be misleading to say so. It is a subset, plus tables, task lists and strikethrough from GitHub's flavour. It covers headings, paragraphs, emphasis, code spans and blocks, links, images, nested lists, quotes and rules. Reference-style links, footnotes and HTML blocks are not implemented.
Why do remote images not appear?
Because this page does not let itself load images from other sites. Fetching one would tell that server you are reading this document, and at what time, which is precisely the leak a local preview exists to avoid. The image tag is in the HTML output, so it works wherever you paste it — it just does not fire from here.
What happens to a link like javascript:…?
It is not made into a link. The scheme is checked against a short list — http, https, mailto, tel, ftp, or no scheme at all for a relative path — and the check runs on the decoded address, because a browser resolves the entities in an attribute before it acts on them. The text of the link stays visible so you can see what was there.
Good to know
- The HTML the preview shows is the HTML the tool gives you. There is one output, not a safe one for display and a different one to copy.
- Headings get no id attribute. An id taken from your document would share a namespace with this page's own, and a collision would break the page around the preview.
- Links to other sites carry rel="nofollow noopener noreferrer", so a page opened from here gets no handle on this one.