Markdown Preview — Free Online Tool

What is Markdown Preview & Live Editor (GitHub Flavored)?

Markdown preview renders Markdown syntax (.md files) as formatted HTML in real-time. Write Markdown in left pane (headings, lists, links, images, code blocks), see live preview in right pane (styled HTML output). Supports GitHub Flavored Markdown (GFM): tables (| Header | Header |), task lists (- [ ] Task), fenced code blocks (```javascript), strikethrough (~~text~~), autolinks (https://example.com). Syntax highlighting for 100+ languages (JavaScript, Python, SQL, etc.). Features: split-pane editor (edit + preview side-by-side), auto-scroll sync (preview scrolls with editor), export HTML/PDF, dark mode, print-friendly formatting. Useful for: writing README files (GitHub, GitLab), documentation (technical docs, wikis), blog posts (convert Markdown to HTML), note-taking (structured notes with headers, lists), learning Markdown (see results instantly).

• GitHub Flavored Markdown (GFM): Supports GFM extensions: tables, task lists (- [ ] Done), fenced code blocks (```language), strikethrough (~~text~~), autolinks (URLs become clickable), username @mentions, issue #references (in GitHub context).
• Syntax highlighting: Code blocks with language: ```javascript, ```python, ```sql. Highlights keywords, strings, comments. Supports 100+ languages (Prism.js or highlight.js). Detects language automatically if not specified.
• Live preview: Type Markdown → see HTML instantly (no save/reload). Split-pane (editor + preview). Auto-scroll sync (scroll editor → preview scrolls, vice versa). Real-time rendering.
• Export options: Export as HTML (styled with CSS), PDF (print-friendly), raw Markdown (copy to clipboard). HTML includes syntax highlighting, CSS styles. PDF preserves formatting (headings, lists, code blocks).
• Markdown cheatsheet: Built-in help: # Heading, **bold**, *italic*, [link](url), , ```code```, > quote, - list, 1. numbered. Click examples to insert in editor.

Why use markdown preview?

Writing Markdown without preview is error-prone (syntax mistakes, broken links, formatting issues). Live preview shows exactly how Markdown will render.

• Instant feedback: Type # Heading → see <h1> immediately. No save/reload. Catch syntax errors instantly (missing ], wrong link format). Faster than edit → save → preview → repeat.
• GitHub README preview: Write README.md, see how it looks on GitHub. Test tables, task lists, code blocks. Ensure formatting works before pushing to repo. Avoid embarrassing typos in public repos.
• Learn Markdown syntax: Interactive learning: try **bold**, see result. Experiment with tables, lists, code blocks. Built-in cheatsheet (click to insert syntax). Faster than reading docs.
• Cross-platform consistency: Markdown renderers vary (GitHub, GitLab, Reddit, Stack Overflow). This tool shows standard GFM rendering. Preview how Markdown looks on different platforms.
• Export to HTML/PDF: Convert Markdown to HTML (publish on website), PDF (share document). Includes CSS styles (typography, code highlighting). No manual HTML writing.
• Works offline: No internet required. All parsing, rendering client-side (JavaScript). Fast, private, always available. Edit sensitive docs without uploading to server.

When to use markdown preview

Use whenever you write or edit Markdown files.

• Writing README.md for GitHub/GitLab projects (preview before pushing).
• Documentation (technical docs, API references, wikis: Docusaurus, VuePress).
• Blog posts (write in Markdown, export HTML, publish with Jekyll, Hugo, Gatsby).
• Note-taking (structured notes with headers, lists, code snippets).
• Learning Markdown syntax (interactive examples, see results immediately).
• Editing existing .md files (preview while editing, catch formatting issues).
• Creating tables (Markdown table syntax is tricky, preview shows alignment).
• Code documentation (inline code, fenced blocks, syntax highlighting).

How to use markdown preview

Write Markdown in editor, see live preview, export if needed.

1. Write Markdown: Type in left pane: # Heading (h1), ## Subheading (h2), **bold**, *italic*, [link](https://example.com), , ```code```. Use cheatsheet for syntax help.
2. See live preview: Right pane shows rendered HTML. Updates instantly as you type. Auto-scroll sync (scroll editor → preview follows). Switch preview/source tabs (mobile).
3. Add code blocks: Fenced blocks: ```javascript\ncode here\n```. Specify language for syntax highlighting (javascript, python, sql, etc.). Inline code: `code` (backticks).
4. Create tables: Markdown table: | Header 1 | Header 2 |\n|----------|----------|\n| Cell 1 | Cell 2 |. Preview shows formatted table. Check alignment (left, center, right).
5. Add task lists: GitHub task list: - [ ] Task 1 (unchecked), - [x] Task 2 (checked). Preview shows checkboxes. Useful for TODO lists in README.
6. Export HTML/PDF: Click Export → HTML (styled with CSS, syntax highlighting), PDF (print-friendly), or Copy Markdown. Use HTML in website, PDF for sharing.
7. Toggle dark mode (optional): Dark mode for editor and preview (reduces eye strain). Syntax highlighting adapts to theme. Print mode = light (PDF export).

Key features

• Live preview: Real-time HTML rendering (no save/reload). Split-pane editor + preview. Auto-scroll sync (scroll one pane → other follows).
• GitHub Flavored Markdown: Tables, task lists, fenced code blocks, strikethrough, autolinks. Full GFM support (same rendering as GitHub README).
• Syntax highlighting: 100+ languages: JavaScript, Python, Java, C++, SQL, Bash, Markdown, JSON, YAML. Auto-detection or specify language (```python).
• Export options: HTML (styled, syntax highlighting), PDF (print-friendly, page breaks), Markdown (copy to clipboard). Includes CSS styles.
• Markdown cheatsheet: Built-in help: headings, bold, italic, links, images, code, quotes, lists. Click example to insert in editor. Learn syntax interactively.
• Dark mode: Dark theme for editor and preview. Reduces eye strain (long editing sessions). Syntax highlighting adapts to theme (light/dark).
• Offline support: No internet required. Client-side rendering (JavaScript). Fast, private, always available. Edit sensitive docs locally.

Common use cases

• GitHub README.md: Write README with project description, installation, usage, examples. Preview tables (dependencies), task lists (TODO), code blocks (installation commands). Export HTML for website version.
• API documentation: Write API docs: endpoints, parameters, examples. Code blocks: ```bash\ncurl -X POST https://api.example.com\n```. Tables: list parameters (name, type, required). Preview before publishing.
• Blog post: Write blog post in Markdown: headings (structure), links (references), images (screenshots), code blocks (tutorials). Export HTML, publish with Jekyll/Hugo. Or copy Markdown to Medium, Dev.to (support Markdown).
• Technical notes: Structured notes: ## Meeting Notes, - Action items, ```sql\nSELECT * FROM users\n``` (code snippets). Export PDF for sharing. Or save as .md file (version control with git).
• Changelog: Write CHANGELOG.md: ## [1.2.0] - 2024-01-15, ### Added (new features), ### Fixed (bug fixes). Preview formatting. GitHub renders in repo.
• Tutorial with code examples: Write tutorial: headings (steps), code blocks (examples with syntax highlighting), lists (prerequisites), links (resources). Preview readability, export HTML.

Examples

Markdown syntax examples.

# Main Title\n## Subtitle\n**Bold text** and *italic text*.\n***Bold and italic***.

<h1>Main Title</h1>\n<h2>Subtitle</h2>\n<p><strong>Bold text</strong> and <em>italic text</em>. <strong><em>Bold and italic</em></strong>.</p>

- Item 1\n- Item 2\n - Nested\n\n1. First\n2. Second\n\n- [ ] Task\n- [x] Done

<ul>\n<li>Item 1</li>\n<li>Item 2\n<ul><li>Nested</li></ul>\n</li>\n</ul>\n<ol>\n<li>First</li>\n<li>Second</li>\n</ol>\n<ul>\n<li><input type='checkbox'> Task</li>\n<li><input type='checkbox' checked> Done</li>\n</ul>

[GitHub](https://github.com)\n![Logo](https://example.com/logo.png)\nhttps://auto-link.com

<p><a href='https://github.com'>GitHub</a><br>\n<img src='https://example.com/logo.png' alt='Logo'><br>\n<a href='https://auto-link.com'>https://auto-link.com</a></p>

Inline `code` example.\n\n```javascript\nconst greeting = 'Hello World';\nconsole.log(greeting);\n```

<p>Inline <code>code</code> example.</p>\n<pre><code class='language-javascript'>const greeting = 'Hello World';\nconsole.log(greeting);</code></pre>

| Name | Age | City |\n|------|-----|------|\n| Alice | 30 | NYC |\n| Bob | 25 | LA |

<table>\n<thead><tr><th>Name</th><th>Age</th><th>City</th></tr></thead>\n<tbody>\n<tr><td>Alice</td><td>30</td><td>NYC</td></tr>\n<tr><td>Bob</td><td>25</td><td>LA</td></tr>\n</tbody>\n</table>

Technical reference

Markdown and GFM syntax reference:

Headings

# H1, ## H2, ### H3, #### H4, ##### H5, ###### H6. Alternative: H1\n==, H2\n-- (underline style). Use # for consistency.

Emphasis

**bold** or __bold__, *italic* or _italic_, ***bold italic***. Underscores in words: snake_case doesn't trigger italic (GFM feature).

Lists

Unordered: - item or * item or + item. Ordered: 1. item, 2. item. Nested: indent 2 spaces. Task list: - [ ] unchecked, - [x] checked (GFM).

Links

Inline: [text](url), [text](url 'title'). Reference: [text][id], [id]: url. Autolink: <https://example.com> or https://example.com (GFM). Email: <email@example.com>.

Images

, . Reference: ![alt][id], [id]: url. Width/height: HTML <img src='url' width='200'> (Markdown doesn't support sizing).

Code

Inline: `code` (backticks). Fenced block: ```language\ncode\n``` (GFM). Indented block: 4 spaces (legacy). Use fenced for syntax highlighting.

Tables (GFM)

| Header 1 | Header 2 |\n|----------|----------|\n| Cell 1 | Cell 2 |. Alignment: |:---|, |:---:|, |---:|. Requires header row + separator.

Blockquotes

> Quote. Multi-line: > Line 1\n> Line 2. Nested: > Outer\n>> Inner. Useful for callouts, notes, warnings.

Horizontal rule

--- or *** or ___ (3+ chars). Creates <hr> (horizontal line). Use for section breaks.

Strikethrough (GFM)

~~strikethrough~~ (double tilde). Renders as <del>text</del>. Not in standard Markdown, GFM only.

Common mistakes to avoid

Missing blank line before/after lists, code blocks, blockquotes (doesn't render)

Why it happens: Markdown requires blank line before block elements (lists, code, quotes). Without blank line, parser treats as paragraph. Common mistake: text\n- list (no blank line → list doesn't render).

How to avoid it: Add blank line before lists, code blocks, blockquotes. Example: Paragraph\n\n- List (blank line between). Or use fenced code blocks (```), which don't require blank line.

Using wrong number of backticks for code blocks (` vs ``` vs ````)

Why it happens: Inline code: `code` (single backtick). Fenced block: ```code``` (triple backtick). If code contains ```, need ```` (quad backtick) to escape. Wrong count = broken rendering.

How to avoid it: Inline: `code`. Block: ```\ncode\n```. Code with ```: use ```` (one more than code contains). Or indent 4 spaces (legacy block style).

Incorrect table syntax (missing pipe, wrong separator)

Why it happens: Tables require: header row, separator row (|---|), data rows. Missing pipe (|), wrong separator (===), no header = table doesn't render. Pipes must align (though not required, improves readability).

How to avoid it: Format: | Header |\n|--------|\n| Data |. Separator: at least 3 dashes (---). Pipes at start/end optional (|Header| or Header). Use tool to preview (catch mistakes).

Using HTML <br> for line breaks instead of Markdown (two spaces or backslash)

Why it happens: Markdown line breaks: two spaces at end of line (text \n) or backslash (text\\n). Single \n doesn't break (joins into paragraph). HTML <br> works but not idiomatic Markdown.

How to avoid it: Markdown way: text \n (two spaces + newline) or text\\n (backslash + newline). Or blank line (new paragraph). Avoid HTML unless necessary (tables, styling).

Forgetting language in fenced code blocks (no syntax highlighting)

Why it happens: ```\ncode\n``` (no language) = no syntax highlighting (renders as plain text). ```javascript\ncode\n``` = syntax highlighting (keywords, strings, comments). Missing language = less readable.

How to avoid it: Specify language: ```javascript, ```python, ```sql, ```bash, etc. If unknown language, use ```text or omit (plain text). Highlighter supports 100+ languages.

Frequently asked questions

What is GitHub Flavored Markdown (GFM)?

GFM = Markdown variant used by GitHub. Adds: tables, task lists, strikethrough, autolinks, @mentions, issue #references. Superset of standard Markdown (all standard syntax works). Used by GitHub, GitLab, Discord, Reddit.

Why doesn't my list render (stays as plain text with dashes)?

Missing blank line before list. Markdown requires blank line before block elements. Fix: Paragraph\n\n- List (blank line between). Or indent list (4 spaces for nested list).

How do I add line breaks in Markdown (without starting new paragraph)?

Two spaces at end of line (text \n) or backslash (text\\n). Single \n doesn't break (joins into paragraph). Blank line = new paragraph (\n\n).

Can I use HTML in Markdown?

Yes, most Markdown parsers allow HTML (e.g., <img width='200'>, <br>, <details>, <table>). Useful for features Markdown doesn't support (image sizing, custom styling). But less portable (some parsers strip HTML).

What is the difference between fenced code blocks and indented code blocks?

Fenced: ```language\ncode\n``` (triple backticks, specify language). Indented: 4 spaces (legacy). Fenced = syntax highlighting, language specification. Indented = plain text. Use fenced (modern, better support).

How do I create a table of contents (TOC) in Markdown?

Manually: [Heading](#heading-id). Heading IDs generated from text (lowercase, dashes). Or use tool (mdtoc) to auto-generate TOC. GitHub auto-generates TOC (click heading icon in README).

Why do some Markdown renderers show different results?

Markdown spec has variations (CommonMark, GFM, MultiMarkdown). Each adds features (tables, task lists, footnotes). Test with target platform (GitHub, GitLab, Reddit) to ensure compatibility.

References

• GitHub Flavored Markdown Spec
• Markdown Guide
• CommonMark Spec
• Markdown Cheatsheet