Markdown Editor

How the Markdown Editor works

Markdown editor: what it does and why

Markdown is the closest thing writing has to a universal format. It is plain text, so it survives email, version control and copy-paste intact, and it reads perfectly well before anything renders it. But every place that accepts markdown renders it slightly differently, and the gap between what you typed and what a reader sees is where the mistakes live — a list that never became a list, a table that lost a column, a link with a stray bracket, a code block that swallowed the rest of the page.

This viewer covers the parts of the syntax people actually use day to day. Headings with one to six leading hashes. Bold with double asterisks or underscores, italic with single, strikethrough with double tildes. Inline code with backticks, and fenced blocks with three backticks or three tildes, with an optional language name on the fence line. Links and images in the [text](url) form, plus bare autolinks in angle brackets. Blockquotes with a leading angle bracket, which can contain other blocks. Horizontal rules from three or more dashes, asterisks or underscores. Nested ordered and unordered lists, including GitHub-style task lists where - [ ] and - [x] become checkboxes. And GitHub-style pipe tables, with the :---, :---: and ---: markers setting column alignment.

Two details catch people out often enough to be worth stating. A single newline inside a paragraph is not a line break — markdown joins those lines into one flowing paragraph, which is what lets you hard-wrap your source at 80 columns without wrecking the output. To force a break inside a paragraph, end the line with two or more spaces. And a fenced code block must have its opening fence on its own line; putting the first line of code on the fence line makes the parser read it as a language name instead.

The editor works on files as well as pasted text. Open .md loads a markdown file from your device, and Save .md downloads the current text as a markdown file — under the name of the file you opened, or named from the first heading if you started from scratch. While you type, the draft is autosaved to this browser's local storage and restored the next time you open the page, so a closed tab or a crash does not cost you the document. Reset clears both the editor and the saved draft.

Rendering happens in your browser as you type, with no request to any server, and the autosaved draft lives only in this browser's storage. That matters more for markdown than for most formats, because the markdown people most want to preview is unpublished: a draft post, an internal runbook, release notes for something not announced yet, notes with client names in them. Nothing here leaves the tab, and closing it disposes of everything except the draft, which Reset removes. Links in the preview are rendered inert against script-bearing URLs — anything that is not a normal web or mail address is neutralised rather than followed.

Related tools