Markdown

Preview

Markdown Syntax Guide

Headings

# H1

H1

## H2

H2

### H3

H3

Emphasis

**bold** or __bold__

Bold

*italic* or _italic_

Italic

~~strikethrough~~

Strike

**_bold italic_**

Both

Lists

- Unordered list
  • Item
1. Ordered list
  1. Item

Links

[Link text](URL)
<https://auto.link>

Images

![Alt text](image URL)
![alt](URL "title")

Code

`inline code`

code

```lang ... ```

Blockquote

> Blockquote

Quote

>> Nested quote

Nested

Horizontal Rule

---
***
___

Escape

\* Escape special chars

*text*

\# \[ \]

GitHub Flavored Markdown (GFM)

Table

| Header1 | Header2 |
|---|---|
| Cell1 | Cell2 |

Task List

- [x] Completed item
  • Done
- [ ] Incomplete item
  • Todo

Autolink

https://example.com
user@email.com

Tips

Real-time Preview

Enter Markdown on the left and instantly see the rendered result on the right.

GFM Support

Fully supports GitHub Flavored Markdown. Use tables, task lists, and autolinks.

Export

Download your Markdown as a .md file or copy the rendered HTML.

What is Markdown Preview?

Markdown Preview is a real-time rendering tool that converts Markdown syntax into beautifully formatted HTML output. It supports GitHub Flavored Markdown (GFM), including tables, task lists, strikethrough text, code blocks with syntax highlighting, and autolinks. Writers, developers, and content creators use it to compose and preview documentation, README files, blog posts, and technical articles without switching between editing and viewing modes.

  • Real-time side-by-side preview as you type
  • Full GitHub Flavored Markdown (GFM) support
  • Code block rendering with syntax highlighting
  • Table, task list, and blockquote rendering
  • Export to HTML or download as .md file
  • Comprehensive Markdown syntax reference guide

How to Use

  1. 1

    Enter Markdown

    Type or paste your Markdown content into the editor on the left side of the screen.

  2. 2

    Preview in real time

    The right panel instantly renders your Markdown into formatted HTML as you type, giving you immediate visual feedback.

  3. 3

    Use the syntax guide

    Click the syntax guide button for a quick reference of all supported Markdown elements including headings, links, images, and more.

  4. 4

    Load from file

    Use the 'Open File' button to load an existing .md file from your computer for quick previewing.

  5. 5

    Export your work

    Copy the rendered HTML output or download your content as a Markdown file for use in other applications.

Frequently Asked Questions

Tips & Best Practices

  • Use heading levels hierarchically (H1 for title, H2 for sections, H3 for subsections) to create a clear document structure.
  • Add blank lines between different Markdown elements like paragraphs, lists, and code blocks to ensure proper rendering.
  • Use fenced code blocks with language identifiers (```js) instead of indented code blocks for better readability and syntax highlighting.
  • Leverage task lists (- [ ] and - [x]) for project tracking and to-do lists within your documentation.
  • Preview your README files here before committing to avoid formatting surprises on GitHub or GitLab.