Markdown Previewer: Syntax Guide and Live Preview

A Markdown previewer shows how Markdown text will look once it is rendered: type ## Heading or **bold** on one side and see the formatted heading or bold text on the other. It is the fastest way to check a README, a documentation page or a forum post before you publish it.

Our free Markdown previewer renders GitHub Flavored Markdown as you type and lets you copy the generated HTML. This guide covers the core syntax, the extras GitHub adds, and the mistakes that make Markdown render differently than you expect.

What is Markdown?

Markdown is a plain-text formatting syntax created by John Gruber, with input from Aaron Swartz, in 2004. Its goal is text that reads naturally as-is and converts cleanly to HTML. A line starting with # becomes a heading, words wrapped in asterisks become emphasis, and a line starting with - becomes a list item.

The original description left many edge cases open, so different apps rendered the same text differently. CommonMark fixed that with a detailed specification and a test suite. GitHub Flavored Markdown (GFM) is a strict superset of CommonMark that adds tables, strikethrough, autolinks and task lists. Our previewer follows GFM, which is also what GitHub uses for README files, issues and pull requests.

Markdown syntax cheat sheet

Element	Markdown	Result
Heading (levels 1 to 6)	# Title, ## Section	Heading elements h1 to h6
Bold	**bold**	bold
Italic	*italic* or _italic_	italic
Strikethrough (GFM)	~~old~~	old
Inline code	`npm install`	npm install
Link	[Example](https://example.com)	The word "Example" as a clickable link
Image		An image with alt text
Bulleted list	- item	Unordered list
Numbered list	1. item	Ordered list
Blockquote	> quoted text	Indented quotation
Horizontal rule	--- on its own line	A dividing line
Code block	Three backticks before and after the code	Preformatted code

GitHub Flavored Markdown features

• Tables: separate columns with pipes and put a row of dashes under the header. A colon on the right of the dashes (---:) right-aligns that column; colons on both sides center it.
• Strikethrough: wrap text in double tildes.
• Autolinks: a bare URL such as https://example.com becomes a clickable link without any brackets.
• Fenced code with a language: write the language after the opening backticks (```php) and it is added to the code block as a class that syntax highlighters on your site can use.
• Unsafe HTML filtered: GFM allows most raw HTML but escapes risky tags such as <script>, <style> and <iframe>, so they show as text instead of running.

GFM also defines task lists: - [ ] todo and - [x] done show as an empty and a ticked checkbox. The boxes are read-only, so change the Markdown to tick one.

Footnotes, which GitHub supports too, also render: put [^1] after a word and [^1]: The note. on a line of its own. The note appears, numbered and linked back to the text, at the end of the preview.

Worked example: Markdown to HTML

Paste this Markdown into the previewer:

## Shopping list

Buy **fresh** bread and ~~old~~ new milk.

| Item   | Qty |
|--------|----:|
| Apples |   3 |

Prices: https://example.com

The preview shows a heading, a paragraph with bold and struck-through text, a two-column table with the quantity right-aligned, and a clickable link. Copy HTML gives you this markup:

<h2>Shopping list</h2>
<p>Buy <strong>fresh</strong> bread and <del>old</del> new milk.</p>
<table>
<thead>
<tr>
<th>Item</th>
<th align="right">Qty</th>
</tr>
</thead>
<tbody>
<tr>
<td>Apples</td>
<td align="right">3</td>
</tr>
</tbody>
</table>
<p>Prices: <a href="https://example.com">https://example.com</a></p>

How to use the Markdown Previewer

1. Open the Markdown Previewer.
2. Type or paste your text into the Markdown pane. It holds up to 50,000 characters; longer text is trimmed and a notice tells you so.
3. Watch the Preview pane. It renders your Markdown a moment after you stop typing.
4. Click Copy HTML to copy the rendered HTML for a CMS, an email template or a static page.
5. Click Clear to empty the editor and start again.

Common Markdown mistakes

• No space after the hash. #Heading stays plain text. CommonMark needs a space: # Heading.
• Expecting a single line break to show. One newline inside a paragraph is treated as a space. End the line with two spaces or a backslash for a line break, or leave a blank line to start a new paragraph.
• Missing blank lines between blocks. Put an empty line before and after headings, lists, tables and code blocks. It removes most surprises.
• Wrong indentation in nested lists. Indent a child item so it lines up with the text of its parent: two spaces under - , three under 1. .
• Unwanted formatting from symbols. To show a literal asterisk, underscore or hash, put a backslash in front: \*not italic\*.
• Tables without a separator row. GFM only builds a table when a row of dashes follows the header row.
• Assuming every platform's extras work everywhere. Emoji shortcodes and diagram blocks are extensions some sites add on top of GFM. This previewer doesn't render them.

If you publish Markdown written by other people on your own site, always sanitize the generated HTML. Our previewer sanitizes its output before showing it, which is why scripts never run in the preview.

Working with Markdown files

Markdown is plain text, so other text tools work well with it. Compare two versions of a README with the text diff viewer, as explained in our guide to comparing two texts line by line. Check the length of a post with the word counter. Before you put JSON in a fenced code block, tidy it with the JSON formatter so it is indented and easy to read.

Frequently asked questions

What is a Markdown previewer?

A Markdown previewer is a tool that renders Markdown text as formatted output while you type. It lets you check headings, lists, links and tables before you publish the text elsewhere.

What is the difference between CommonMark and GitHub Flavored Markdown?

CommonMark is a precise specification of core Markdown syntax. GitHub Flavored Markdown is a strict superset of CommonMark that adds tables, strikethrough, autolinks and task lists.

How do I add a line break in Markdown?

End the line with two spaces or a backslash, then press Enter. A single newline on its own is treated as a space, and a blank line starts a new paragraph.

How do I make a table in Markdown?

Write the header cells separated by pipes, add a row of dashes under them, then add one line per row. Colons in the dash row set the alignment, for example ---: for right-aligned.

Can I convert Markdown to HTML?

Yes. Paste your Markdown into the previewer and click Copy HTML to get the rendered, sanitized HTML for any page or template.

Can I use HTML inside Markdown?

Yes, most Markdown renderers accept inline HTML such as <details> or <b>. GitHub Flavored Markdown escapes risky tags like <script> and <iframe>, so they appear as text instead of running.