What Markdown is
Markdown is a way to format text with plain characters: a # in front of a line makes a heading, two asterisks around a word make it bold, a dash at the start of a line makes a list item. The text stays easy to read as it is, and a program turns it into HTML for the web. According to the CommonMark spec, John Gruber developed Markdown with help from Aaron Swartz and released it in 2004. The spec also explains why it exists: the original description left many cases open, so different programs turned the same text into different HTML. CommonMark pins every case down with hundreds of examples.
This Markdown editor shows the live preview next to your text, or under a Write and Preview switch on a phone. The toolbar adds the syntax for you, and Ctrl+B, Ctrl+I and Ctrl+K (Cmd on a Mac) make text bold, italic or a link. When you are done, copy the HTML for a website or an email template, download the .md file to keep the source, or export a complete .html page.
Markdown syntax at a glance
| You write | You get |
|---|---|
| # Heading, ## Smaller | Headings, levels 1 to 6 |
| **bold**, _italic_, ~~struck~~ | Bold, italic and strikethrough text |
| - item, 1. item | Bulleted and numbered lists; indent to nest |
| - [ ] task, - [x] done | Task list with checkboxes |
| [text](https://example.com) | A link |
|  | An image |
| > quoted text | A blockquote |
| `code`, ``` on its own line | Inline code and code blocks |
| | a | b | and | --- | --- | | A table |
| --- | A horizontal rule |
What is supported, and what is not
The editor follows CommonMark 0.31.2 and adds four extensions of GitHub Flavored Markdown 0.29, the dialect GitHub uses for user content. Supported:
- Blocks: headings with # and underlined headings, paragraphs, blockquotes, bulleted and numbered lists with nesting, fenced code blocks with a language name, indented code blocks and horizontal rules.
- Inline: emphasis and strong emphasis, code spans, links, reference links like [text][ref], images, autolinks in angle brackets, hard line breaks, backslash escapes and character references such as ©.
- GFM extensions: tables with column alignment, task list items, strikethrough with one or two tildes, and links from plain addresses like www.example.com, https://example.com or name@example.com.
Not supported: raw HTML, which is shown as text on purpose (see below), footnotes, math, emoji shortcodes like :smile:, automatic heading anchors and syntax colors in code blocks. A fenced code block gets a class such as language-js, which a syntax highlighter on your own site can pick up.
The parser was written for this page and tested against the example files of both specs. Of the 652 CommonMark 0.31.2 examples, 576 give exactly the HTML the spec expects. Every one of the 76 others is about raw HTML, which this editor escapes on purpose, or about a plain address like https://example.com, which the GitHub autolink extension turns into a link while plain CommonMark does not. All 27 examples of the four GitHub extensions pass.
| CommonMark 0.31.2 section | Examples passed |
|---|---|
| Tabs | 11 of 11 |
| Backslash escapes | 12 of 13 |
| Entity and numeric character references | 16 of 17 |
| Precedence | 1 of 1 |
| Thematic breaks | 19 of 19 |
| ATX headings | 18 of 18 |
| Setext headings | 27 of 27 |
| Indented code blocks | 12 of 12 |
| Fenced code blocks | 29 of 29 |
| HTML blocks | 0 of 44 |
| Link reference definitions | 26 of 27 |
| Paragraphs | 8 of 8 |
| Blank lines | 1 of 1 |
| Block quotes | 25 of 25 |
| List items | 48 of 48 |
| Lists | 24 of 26 |
| Inlines | 1 of 1 |
| Code spans | 21 of 22 |
| Emphasis and strong emphasis | 129 of 132 |
| Links | 86 of 90 |
| Images | 22 of 22 |
| Autolinks | 15 of 19 |
| Raw HTML | 7 of 20 |
| Hard line breaks | 13 of 15 |
| Soft line breaks | 2 of 2 |
| Textual content | 3 of 3 |
Why HTML in your text is shown as text
Markdown allows raw HTML, so a text could contain a script or an image with an onerror attribute that runs code the moment it is shown. Text pasted from somewhere else could do that in the preview, and the HTML you copy could carry it to your website. This editor avoids the problem at the root: it never passes HTML from your text through. Every < you type comes out as < and shows as a visible character, and the only tags in the result are the ones the parser writes itself. Link and image addresses that start with javascript:, vbscript:, file: or data: are shown as plain text, except data: images in PNG, GIF, JPEG or WebP format. The parser was checked against a list of known attack strings and tens of thousands of random inputs, and the output never contained a tag or attribute outside that list.
Links in the preview open in a new tab, so a click never takes you away from your text. To escape or unescape HTML entities in other text, use the HTML entity converter. For notes without formatting, the online notepad is simpler.
How to use the Markdown editor
- 1Write or paste Markdown in the left pane, or press Open file to load a .md file. The preview updates as you type.
- 2Use the toolbar for headings, lists, links, tables and code, or type the syntax yourself. On a phone, switch between Write and Preview.
- 3Press Copy HTML to paste the result into a website or an email, or download the .md or .html file.
- 4Turn on Save on this device if you want to continue later in this browser.
Frequently asked questions
Which Markdown does this editor support?
CommonMark, the standard Markdown specification, plus the GitHub Flavored Markdown extensions for tables, task lists, strikethrough and links that are written as plain web addresses. That covers headings, bold and italic, lists, links, images, quotes, code and horizontal rules. Raw HTML, footnotes and math are not supported.
Why is my HTML shown as text?
For safety, the editor never passes HTML from your text through. A tag like <div> or <script> is shown as written instead of being run, so pasted text cannot run code in the preview or end up in the HTML you copy. Links that start with javascript:, vbscript:, file: or data: are shown as plain text for the same reason.
Is my text uploaded?
No. The Markdown is turned into HTML by code that runs in your browser, and nothing is sent to a server. Images in your text are loaded from their addresses when the preview shows them, like on any web page.
How do I make a table in Markdown?
Write the header cells between pipes, then a line of dashes, then one line per row: | Name | Price |, then | --- | --- |, then | Tea | 3 |. Colons in the dash line align a column: :--- left, :---: center, ---: right. The Table button inserts a starting point.
How do I make a line break without a new paragraph?
End the line with two spaces or with a backslash, then press Enter. A single line break without them is joined into the same paragraph, and an empty line starts a new paragraph.
Can I keep my document for later?
Download it as a .md file, or turn on "Save on this device" to keep it in this browser's local storage until you turn it off. Nothing is saved unless you switch that on.