Markdown Preview

Write and preview Markdown in real time. Supports GFM tables, code blocks, and lists. Free online editor.

About Markdown Preview

Write Markdown on the left and see a live preview on the right. Supports GitHub Flavored Markdown including tables, task lists, and fenced code blocks.

Video Tutorial

2:50

Video coming soon — full transcript available below

Chapters

Full transcript searchable
0:00

What Markdown is and where it's used

Welcome to this Markdown Preview tutorial. Markdown is a lightweight markup language that converts plain text to formatted HTML. It uses simple syntax: pound signs for headings, asterisks for bold and italic, dashes for lists, backticks for code. Markdown was created by John Gruber in 2004 and is now standard for GitHub READMEs, documentation sites (Docusaurus, MkDocs), blog posts (Jekyll, Hugo), note-taking apps (Obsidian, Notion), and developer chats (Slack, Discord).

0:30

Real-time split-pane preview

Open the Markdown Preview on ToolPilot.dev. You see two panels: the raw Markdown input on the left and the rendered HTML preview on the right. As you type Markdown in the left panel, the right panel updates in real time. There's no submit button — conversion is live and instant. This lets you see the formatted output as you write, catching formatting mistakes immediately rather than after saving.

1:00

Headings, bold, italic, lists

Core Markdown syntax: headings use hash signs — one hash for H1, two for H2, three for H3. Bold text is wrapped in double asterisks: **bold text**. Italic uses single asterisks: *italic*. Unordered lists use dashes or asterisks at the start of each line. Ordered lists use numbers followed by dots. Nested lists indent with two or four spaces. Horizontal rules use three dashes on their own line. All of these render correctly in the live preview.

1:35

Code blocks and syntax highlighting

Inline code uses single backticks. Fenced code blocks use triple backticks and support language identifiers for syntax highlighting. Adding 'javascript' after the opening backticks creates a JavaScript code block with appropriate syntax colors in the preview. This is essential for README files and technical documentation where code samples must be readable.

2:05

Tables and links

Markdown tables use pipe characters and dashes for the header row, a separator row, then data rows. The preview renders a properly formatted HTML table. Links use square brackets for text and parentheses for the URL. Images use the same syntax with an exclamation mark prefix. These features cover the vast majority of documentation and README needs.

2:30

Use case: writing a GitHub README

GitHub READMEs are the most common Markdown use case. Draft your README in the Markdown Preview tool — title, description, installation instructions, usage examples with code blocks, and a contribution section. Preview it in real time to check formatting before committing to your repository. The preview closely matches GitHub's Markdown rendering. When ready, copy the Markdown source and paste it into your README.md file.

2:42

Wrap-up

The Markdown Preview tool on ToolPilot.dev renders Markdown instantly in your browser using the marked.js library. No installation, no account, supports full GitHub Flavored Markdown including tables, task lists, and strikethrough. Visit ToolPilot.dev for this and 19 other free developer tools.

Transcript covers all 7 chapters (2:50 total).

Frequently Asked Questions

What is Markdown?
Markdown is a lightweight markup language with plain-text formatting syntax. It converts to HTML, making it easy to write structured documents using simple characters like # for headings, ** for bold, and - for lists.
What Markdown syntax does this previewer support?
The Markdown Preview supports GitHub Flavored Markdown (GFM): headings (#, ##, ###), bold (**text**), italic (*text*), code blocks (```), inline code (`code`), tables, task lists (- [ ] and - [x]), blockquotes (>), and horizontal rules (---).
How do I create a table in Markdown?
Use pipe | characters and hyphens: | Header 1 | Header 2 | on line 1, then | --- | --- | as a separator line, then | Cell 1 | Cell 2 | for data rows. The Markdown Preview renders it as an HTML table.
How do I add a code block in Markdown?
For a fenced code block, use three backticks followed by the language name: ```javascript, then your code, then closing ```. For inline code, wrap it in single backticks: `const x = 1;`.
What is the difference between Markdown and HTML?
Markdown is a simpler syntax that converts to HTML. HTML requires explicit tags (<h1>, <p>, <a>). Markdown uses shorter conventions (# for h1, plain text for paragraphs). Most Markdown parsers also allow raw HTML within Markdown.
How do I export Markdown to HTML?
The Markdown Preview shows the HTML rendering of your Markdown in real time. You can inspect the HTML output and copy it. For production use, use a Markdown library (marked.js in JavaScript, python-markdown in Python).
Can I use Markdown in GitHub README files?
Yes. GitHub renders Markdown in README.md files, pull request descriptions, issues, and wiki pages. GitHub Flavored Markdown (GFM) adds extras like task lists, tables, and @mentions.
How do I add images in Markdown?
Use the syntax: ![Alt text](https://example.com/image.png). For embedding images as Base64, first convert your image at toolpilot.dev/tools/image-to-base64/ then use: ![Alt](data:image/png;base64,...).
What are Markdown front matter and metadata?
Front matter is YAML or TOML metadata at the top of a Markdown file, delimited by ---. It is used by static site generators (Jekyll, Hugo, Astro) to define page title, date, tags, and layout. The Markdown Preview shows front matter as-is.

Code Examples

Ready-to-use implementations in popular programming languages. Copy, paste, and run.

Parse Markdown in JavaScript 
// Simple Markdown to HTML (basic patterns)
function markdownToHtml(md) {
  return md
    .replace(/^### (.+)$/gm, '<h3>$1</h3>')
    .replace(/^## (.+)$/gm, '<h2>$1</h2>')
    .replace(/^# (.+)$/gm, '<h1>$1</h1>')
    .replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
    .replace(/\*(.+?)\*/g, '<em>$1</em>')
    .replace(/`(.+?)`/g, '<code>$1</code>');
}

// For production, use a library like marked.js:
// import { marked } from 'marked';
// const html = marked.parse('# Hello **World**');

Related Workflow Guides

📝 Write Docs: Markdown Preview → Word Count → Diff Versions →

Compare with alternatives

Toolpilot vs Dillinger.io Toolpilot vs StackEdit.io