Markdown Editor

How the page is laid out

The left pane holds the Markdown source, the right pane shows the preview, and the two scroll together. Buttons above the editor insert headings, emphasis, lists, links and tables. Bold, italic and a link also work from the keyboard: Ctrl+B, Ctrl+I, Ctrl+K.

Under the panes the page counts words, characters, lines and reading time. When there is more than one heading, the headings turn into a table of contents with links to the sections.

Why opening someone else's file is safe here

Markdown by definition allows any HTML inside the text. A file from a contractor or a README from a stranger's repository can carry a script, an event handler, or a link with a javascript: scheme, and a plain preview would run all of it.

Here the preview is built against a whitelist: only known tags, their safe attributes, and URLs with recognized schemes survive. Everything else is stripped, and the notes on markup below list exactly what was removed. The source on the left stays untouched.

Common markup mistakes

Markdown forgives a lot, but several errors repeat from text to text, and the result drifts from what the author meant. We name these:

• a hash with no space after it: "#Heading" stays a plain paragraph;
• an unclosed code block: the rest of the text slides into it;
• a list placed right after a paragraph with no blank line between them, which some parsers won't see;
• mixed bullet characters within one list;
• a table with a different number of cells per row;
• a line break made with two trailing spaces: it is invisible and gets lost on copying;
• headings that skip a level;
• a space between the brackets of a link.

Typography in one click

The Typography button replaces straight quotes with «guillemets» and „German quotes", turns hyphens into dashes, converts three dots into a single ellipsis character, and inserts non-breaking spaces after prepositions and between a number and its unit. Code in backticks and code blocks stays untouched: inside code, quotes and hyphens matter.

The draft is not saved

Close the tab, and the text is gone. You can copy both the markup and the finished HTML.