Markdown Preview — Complete Guide
What Is Markdown?
Markdown is a lightweight markup language created by John Gruber in 2004 with help from Aaron Swartz. It lets you write formatted text using plain, readable characters — # for headers, * for emphasis, [text](url) for links — so the source file is just as readable as the rendered result.
That philosophy is why Markdown took over the world. README files, documentation, forum posts, chat messages, notes apps, and even entire books are written in it. You're probably reading this guide rendered from Markdown-style HTML right now. The idea is simple: write in plain text, render to HTML.
Common Markdown Syntax
Here's a cheat sheet covering the syntax you'll use 95% of the time:
# Heading 1
## Heading 2
### Heading 3
**bold text** and *italic text*
- first item in an unordered list
- second item
1. first item in an ordered list
2. second item
[link text](https://example.com)
`inline code` and fenced code blocks:
```js
console.log("hello");
```That's the core of it. A header is a # plus a space, lists are - or numbers, and links are square brackets wrapped around parentheses. Everything else — tables, blockquotes, task lists — builds on these same building blocks.
Why Live Preview Matters
Markdown is easy to read in source form, but easy to get wrong. A missing space after # silently turns a heading into a paragraph. An unclosed backtick makes the rest of your document one giant code span. A link with a stray parenthesis renders broken. These mistakes are invisible until you render the document — which is exactly why preview matters.
A good live preview updates as you type, showing the rendered HTML on one side and your source on the other. It catches mistakes instantly instead of at publish time. For documentation writers, bloggers, and anyone generating HTML from Markdown, previewing is the difference between shipping clean output and shipping a page full of accidental formatting glitches.
Preview also helps you think in structure. Seeing your headings render as a real outline makes it obvious when a document is missing hierarchy or when a list is nested incorrectly. What reads fine as raw # symbols often looks wrong as a rendered document — preview surfaces that gap immediately.
How Markdown Preview Works Under the Hood
When you type Markdown into a live preview, a small pipeline runs on every keystroke. First, the source text is split into blocks — paragraphs, headings, lists, code fences. Then a parser (browser tools typically use libraries like marked or markdown-it) turns those blocks into an abstract syntax tree. Finally, the tree is serialized into HTML and injected into the preview pane.
Because the whole pipeline runs in JavaScript on your own device, live preview is instant and private — there's no round-trip to a server, and your content is never stored anywhere. That's also why preview tools feel so different from building a site: you get real-time feedback with zero build step, which makes them perfect for drafting documentation, README files, forum posts, and notes before you paste them anywhere else.
CommonMark vs GitHub Flavored Markdown
For years, every Markdown implementation behaved slightly differently, which was frustrating. CommonMark (launched 2014) fixed that by creating a rigorous spec and a test suite that any implementation can be validated against. It's the closest thing Markdown has to a standard.
GitHub Flavored Markdown (GFM) builds on CommonMark and adds the extras GitHub users rely on: tables, strikethrough, task lists, autolinks, and fenced code blocks with language highlighting. When a Markdown tool claims "GFM support," it means CommonMark plus those GitHub extensions.
In practice, the differences that bite you are small but real: GFM allows tables and task lists, CommonMark doesn't define them. Code fences (```) work everywhere, but indented code blocks render differently in edge cases. If you're writing for GitHub or a GFM-compatible platform, test with a GFM-aware preview; for everything else, CommonMark is the safe baseline.
Try It Live
No setup required — open our Markdown Preview Tool, paste your Markdown on the left, and watch the rendered HTML update on the right in real time. It runs entirely in your browser, so your text never leaves your device.
FAQ
Is Markdown the same as HTML?
No. Markdown is a plain-text format designed to be converted into HTML. You can even mix raw HTML into Markdown, but most of the time the Markdown syntax alone is enough.
What's the difference between CommonMark and GFM?
CommonMark is the standardized core spec. GitHub Flavored Markdown extends it with tables, strikethrough, task lists, autolinks, and syntax-highlighted code fences.
Can I convert Markdown to HTML without a server?
Yes. Many tools, including our Markdown Preview, use a JavaScript library (like marked or markdown-it) to render Markdown to HTML entirely in the browser — no upload, no server needed.