Markdown Editor & Preview

How to use the Markdown editor

1. Type or paste Markdown into the editor on the left.
2. Watch the live preview update as you write, rendered with GitHub-flavoured Markdown (GFM).
3. Click Copy HTML to copy the generated HTML for a website, CMS or email.
4. Or copy the Markdown itself for a README, issue, pull request or documentation page.

Rendering happens in your browser, and your text is not uploaded or stored. The rendered HTML is sanitised, so scripts and dangerous attributes in pasted content are stripped before the preview is shown.

What is Markdown?

Markdown is a lightweight markup language created by John Gruber in 2004. It uses plain-text punctuation for formatting: # for headings, * or _ for emphasis, - for lists. The source stays readable as plain text, and a renderer turns it into HTML.

The original description left many edge cases undefined, so implementations disagreed. CommonMark is a detailed specification that resolves those ambiguities, and GitHub-flavoured Markdown is a superset of CommonMark that adds features developers use daily:

Markdown quick reference

# Heading 1
## Heading 2

**bold**, *italic*, `inline code`

- Bullet item
  - Nested item (indent two spaces)
1. Numbered item

[Link text](https://example.com)
![Alt text](image.png)

> A blockquote

```python
print("fenced code with a language")
```

Common Markdown problems and how to fix them

Heading not rendering. CommonMark requires a space after the hashes. #Title is plain text; # Title is a heading.

Lines joined into one paragraph. A single line break inside a paragraph is treated as a space. Leave a blank line to start a new paragraph, or end a line with two spaces or a backslash for a hard line break. (GitHub comments treat single line breaks differently from README files, which is a common source of confusion.)

List or code block breaking out early. Content that belongs to a list item must be indented to line up with the item's text. For code inside a list, indent the whole fenced block:

1. Install the package:

   ```bash
   npm install example
   ```

2. Run it.

Table not rendering. A GFM table needs a header row, a separator row with at least three dashes per column, and usually a blank line before it. Use colons in the separator (:---, :---:, ---:) to align columns.

Unintended formatting. Characters like *, _ and # can trigger formatting. Escape them with a backslash, for example \*not italic\*, or wrap them in backticks.

Tips and best practices

• Always add a language after the opening backticks so code blocks get syntax highlighting where supported.
• Write meaningful alt text for images; it is used by screen readers and shown when the image fails to load.
• Use one sentence per line in long documents; Markdown joins them into paragraphs, and diffs become much cleaner.
• Paste JSON or YAML examples into the JSON formatter or YAML formatter first, so the code blocks in your docs are valid and tidy.
• If you paste the generated HTML into a web page, run it through the HTML formatter to indent it neatly.

Frequently asked questions

What is the difference between Markdown and GitHub-flavoured Markdown?

GFM is a superset of CommonMark Markdown defined by GitHub. It adds tables, task lists, strikethrough, extended autolinks and some restrictions on raw HTML. Most READMEs written for GitHub render the same way here.

Can I use HTML inside Markdown?

Yes, Markdown allows inline HTML. For safety the preview sanitises the output, so tags like <script>, event handler attributes such as onclick and javascript: links are removed.

Why does my Markdown look different on another site?

Platforms use different Markdown flavours and their own stylesheets. Core syntax (headings, emphasis, lists, links, code) is consistent, but tables, line breaks and extensions such as footnotes or math vary between renderers.

How do I convert Markdown to HTML?

Write or paste your Markdown, check the preview, then click Copy HTML. The output is plain semantic HTML (headings, paragraphs, lists, tables) without styling, so it picks up the CSS of the page you paste it into.