How to use Markdown Preview
The Markdown Preview tool renders Markdown source text into formatted HTML in real time, supporting the CommonMark specification plus popular extensions: tables (GitHub Flavored Markdown), fenced code blocks with syntax highlighting, task lists, footnotes and strikethrough. Writers, developers and documentation authors use it to check how Markdown will render before committing to GitHub, a CMS or a static site generator.
- Type or paste Markdown source text into the editor panel on the left.
- The rendered HTML preview updates live in the right panel as you type.
- Toggle GFM (GitHub Flavored Markdown) extensions to enable tables, task lists and strikethrough syntax.
- Click "Copy HTML" to get the rendered HTML source for use in a CMS or email template.
- Click "Export PDF" or "Print" to produce a formatted document from your Markdown.
- Use the word count badge at the top to monitor document length while writing.
Your data never leaves your device — 100% private processing.
CommonMark and Markdown flavour differences
Markdown was created by John Gruber in 2004 but never had a formal specification, leading to dozens of incompatible implementations. CommonMark (commonmark.org, 2014) is a comprehensive, unambiguous specification that resolves the most common inconsistencies. GitHub Flavored Markdown (GFM) extends CommonMark with tables, task lists, strikethrough, autolinks and fenced code blocks. Most documentation platforms (GitHub, GitLab, npm README, Notion, Obsidian) support GFM or a close superset. When writing for portability, stick to CommonMark syntax.
| Element | Markdown syntax | Notes |
|---|---|---|
| Heading 1 | # Heading | Or underline with === |
| Heading 2 | ## Heading | Or underline with --- |
| Bold | **text** or __text__ | Both are equivalent |
| Italic | *text* or _text_ | Both are equivalent |
| Inline code | `code` | Single backtick |
| Code block | ```language\ncode\n``` | Fenced; language enables highlighting |
| Link | [label](url) | Or [label][ref] with ref definition |
| Image |  | Same as link but with ! prefix |
| Table (GFM) | | col | col | | Pipes + dashes for separator row |
| Task list (GFM) | - [x] Done | [ ] for unchecked, [x] for checked |
Using Markdown for documentation and README files
Markdown is the universal language for developer documentation. GitHub automatically renders any file named README.md in a repository, making it the default front page for open-source projects. Writing effective README files requires understanding Markdown for headings, code blocks, badges, tables and blockquotes. For larger documentation sites, tools like MkDocs, Docusaurus and Jekyll compile directories of Markdown files into searchable static websites. When writing API documentation, fenced code blocks with language identifiers (```json, ```bash) enable syntax highlighting that dramatically improves readability.
Worked examples
Heading and bold
Inputs: # Title then **bold**
Result: <h1>Title</h1> and <strong>bold</strong>
GFM table
Inputs: | a | b | with separator row
Result: rendered HTML <table>
Task list
Inputs: - [x] done
Result: a checked checkbox list item
Glossary
- Markdown
- A lightweight markup language created by John Gruber in 2004, converting plain text to formatted HTML.
- CommonMark
- A standardised, unambiguous specification for Markdown syntax, ensuring consistent rendering across implementations.
- GFM
- GitHub Flavored Markdown — a CommonMark superset adding tables, task lists, strikethrough and autolinks.
- Front matter
- YAML metadata at the top of a Markdown file (between --- delimiters) used by static site generators.
- Fenced code block
- A Markdown block delimited by triple backticks (```) that preserves formatting and enables syntax highlighting.
Related reading
Frequently Asked Questions
Why use Markdown Preview?
- Renders CommonMark and GFM extensions — tables, task lists, strikethrough — live as you type
- Syntax-highlighted fenced code blocks make technical documentation previews accurate to the final output
- Copy HTML button delivers the rendered markup ready to paste into a CMS or email template immediately
- Word count badge lets you track document length while writing without switching to another tool
Common use cases
- Preview how a README.md will render on GitHub before committing it to the repository
- Check that a GFM table renders correctly and all columns align as expected
- Draft and review a changelog entry in Markdown before pasting it onto a release page
- Verify that heading hierarchy in a Markdown blog post renders as intended before publishing
- Convert a Markdown draft to HTML to paste into an email newsletter template
Get weekly tool tips & updates
New tools, power-user tips, and productivity hacks — delivered free every Friday.
No spam, ever. Unsubscribe with one click.
Related Text Tools
CSV to Markdown Table
Convert CSV data into a Markdown table online. Handles quoted fields, custom delimiters and optional headers. Paste CSV, get GitHub-ready Markdown in your browser.
Markdown Table Generator
Generate aligned Markdown tables from plain data. Set column alignment (left, center, right) and delimiter, and get padded, GitHub-ready Markdown in your browser.
Markdown to PDF Converter
Convert Markdown to a clean, styled PDF in your browser. Write or paste Markdown, preview the formatted result, and download a PDF — free, private, no uploads.
HTML ↔ Markdown
Convert HTML to clean Markdown and Markdown to HTML. Paste content and switch formats with a live preview. Free, private, in-browser.
HTML to PDF Converter
Convert HTML and CSS to a downloadable PDF in your browser. Paste markup, preview the rendered page, and export a PDF — free, private, with no uploads.
Word Counter
Count words, characters, sentences, and paragraphs, and estimate reading time. Free, instant, and private — ideal for essays, articles, and posts.
Explore all Text Tools.