Markdown Preview

Write Markdown and see it rendered live, then copy the HTML.

Write Markdown on one side and watch it render as you type. It covers headings, bold and italic, links, images, ordered and nested lists, block quotes, fenced code, tables and rules. If you want the HTML behind it, press Copy HTML. Raw HTML inside your text is escaped and link addresses are checked, so previewing something you were sent is safe.

How to use it

  1. Type or paste Markdown into the editor.
  2. Watch the preview update below.
  3. Fix anything that doesn't look right.
  4. Press Copy HTML if you want the markup.

When it helps

  • Drafting README files and documentation.
  • Checking a blog post before you publish it.
  • Learning Markdown by experimenting.
  • Converting notes into HTML.

Good to know

  • Leave a blank line before a list, or it may be read as part of the paragraph above.
  • A table needs a header row followed by a row of dashes.
  • Links with unusual schemes such as javascript: are replaced by a harmless placeholder.

Markdown basics

Headings use hash signs: one for a main title, two for sections. Bold uses double asterisks, italics single ones. Lists start with a hyphen or a number, links look like [text](address), and images add an exclamation mark in front. Code goes between backticks, and blocks of code between rows of three backticks.

Blank lines separate paragraphs, and two spaces at the end of a line force a line break.

Worked example: a README

A project README typically has a title, a short description, an installation section with a code block, a usage example, and a list of features. Paste your draft and the preview shows how it will look on a code hosting site, including tables and nested lists.

Check links and headings in the preview before you publish.

Safety of the preview

Markdown renderers can be a security risk if they allow raw HTML or dangerous links. This one escapes HTML and only allows http, https, mailto and relative links. A link such as javascript:alert(1) is replaced with a harmless placeholder.

That means you can paste Markdown from other people without worrying that the preview will run anything.

Markdown flavours

There are many dialects: CommonMark is the standard specification, GitHub Flavored Markdown adds tables, task lists and strikethrough, and others add footnotes or math. Your destination decides which features work, so preview with the dialect you'll use.

This preview covers the common features most platforms share.

Keyboard-friendly writing

Markdown lets you write without taking your hands off the keyboard, which is why developers and writers like it. Stick to a few habits: one sentence per line makes diffs cleaner in version control, and a blank line after headings keeps things tidy.

Preview regularly, since small syntax slips, like a missing blank line before a list, change the output.

Questions

Does it support GitHub-style Markdown?

It covers the common parts, including tables, task lists and fenced code blocks.

Can I include raw HTML?

It's shown as text, not run.