Markdown Preview Guide: Write and Preview Markdown

Published April 2026 · 9 min read

📋 Table of Contents

What Is Markdown?

Markdown is a lightweight markup language created by John Gruber in 2004. It lets you format text using plain-text syntax that's easy to read and write, then converts it to structurally valid HTML. Instead of writing <h1>Title</h1>, you simply write # Title. Instead of <strong>bold</strong>, you write **bold**.

The philosophy behind Markdown is readability. A Markdown-formatted document should be publishable as-is, as plain text, without looking like it's been marked up with tags or formatting instructions. This makes it perfect for note-taking, documentation, README files, blog posts, and any content where you want to focus on writing rather than formatting.

Today, Markdown is used everywhere: GitHub READMEs, Jira tickets, Slack messages, Notion pages, technical documentation, and even some email clients. If you work with text on a computer, you'll encounter Markdown.

Why Use Markdown?

There are several compelling reasons to choose Markdown over rich-text editors like Word or Google Docs:

Basic Markdown Syntax

Here's a comprehensive overview of the core Markdown syntax you'll use every day:

Headings

Use hash symbols to create headings. One hash for H1, two for H2, and so on up to H6:

# Heading 1
## Heading 2
### Heading 3
#### Heading 4

Text Formatting

StyleSyntaxResult
Bold**bold**bold
Italic*italic*italic
Bold + Italic***both***both
Strikethrough~~strikethrough~~strikethrough
Inline code`code`code

Lists

Unordered lists use dashes, asterisks, or plus signs. Ordered lists use numbers:

- Item one
- Item two
- Item three

1. First step
2. Second step
3. Third step

Links and Images

[Link text](https://example.com)
![Alt text](image-url.jpg)

Blockquotes

This is normal text.

> This is a blockquote.
> It can span multiple lines.

Code Blocks

For multi-line code, wrap with triple backticks and optionally specify the language for syntax highlighting:

```javascript
function greet(name) {
    return `Hello, ${name}!`;
}
```

Tables

| Header 1 | Header 2 |
|----------|----------|
| Cell 1   | Cell 2   |
| Cell 3   | Cell 4   |

Extended Markdown Features

Many Markdown processors support additional features through extensions. These aren't part of the original specification but are widely supported:

How Markdown Preview Works

A Markdown preview tool converts your plain-text Markdown into formatted HTML and displays it alongside (or instead of) the raw source. The process works in three steps:

  1. Parse. The Markdown parser reads your text and identifies structural elements — headings, paragraphs, lists, code blocks, and so on.
  2. Convert. Each Markdown element is mapped to its HTML equivalent. # Title becomes <h1>Title</h1>, and so on.
  3. Render. The HTML is displayed in the preview panel with appropriate styling. CSS handles the visual presentation — fonts, spacing, code highlighting, and more.

Online Markdown preview tools handle all three steps in your browser using JavaScript. No server processing is needed. Your content stays private because nothing is sent over the network.

Real-Time Preview Benefits

The biggest advantage of a live Markdown preview is immediate visual feedback. You type Markdown on the left and instantly see the formatted result on the right. This eliminates the guesswork of "will this look right?" and catches formatting mistakes as you make them.

Key benefits include:

Best Practices for Markdown Writing

  1. Leave blank lines between elements. Markdown needs blank lines to separate paragraphs, lists, and other block elements. Two adjacent lines without a blank line get merged into one paragraph.
  2. Be consistent with list markers. Pick one style (dashes, asterisks, or plus signs) for unordered lists and stick with it throughout the document.
  3. Use fenced code blocks. Always use triple backticks with a language identifier for code. It enables syntax highlighting and prevents indentation issues.
  4. Don't rely on HTML in Markdown. While most renderers support inline HTML, it defeats the purpose of using Markdown. Stick to Markdown syntax whenever possible.
  5. Keep lines under 80 characters. Long lines are hard to read in plain-text editors. Break at natural points for better readability.
  6. Use relative paths for images. When writing documentation, reference images with relative paths (./images/screenshot.png) so they work when the project is moved.
  7. Add alt text to images. Always write descriptive alt text: ![Dashboard showing user metrics](dashboard.png) instead of ![](dashboard.png).

Pro tip: Use a Markdown preview tool to validate your README files before pushing to GitHub. Broken formatting in your project's README is a common first impression killer.

Markdown Flavors Explained

There is no single "Markdown standard." Over the years, different implementations have added their own features, leading to several "flavors":

FlavorUsed ByNotable Features
CommonMarkGitHub, GitLab, DiscourseStrict spec, unambiguous parsing
GitHub Flavored (GFM)GitHubTables, task lists, strikethrough, alerts
MultiMarkdownAcademic writing, booksFootnotes, citations, metadata
PHP Markdown ExtraWordPress, PHP appsDefinition lists, fenced code blocks
RST/MDXReact docs, DocusaurusJSX components inside Markdown

For most users, GitHub Flavored Markdown (GFM) is the de facto standard. It's well-documented, widely supported, and covers the vast majority of use cases. When in doubt, write for GFM compatibility.

Frequently Asked Questions

Is Markdown hard to learn?

Not at all. The basic syntax (headings, bold, italic, lists, links) can be learned in under 10 minutes. Most people are productive with Markdown after a single afternoon of use. The extended features (tables, footnotes, math) come naturally as you need them.

Can I convert Markdown to PDF?

Yes. Tools like Pandoc, md-to-pdf, and browser print functions can convert Markdown to PDF. Many Markdown editors also have built-in PDF export. For best results, use a CSS stylesheet to control the PDF layout.

What's the difference between Markdown and HTML?

Markdown is a shorthand for writing formatted text. It's designed for humans to write and read. HTML is a markup language designed for browsers to render. Markdown gets converted to HTML behind the scenes. You can embed HTML inside Markdown, but not the other way around.

Does Markdown support comments?

Standard Markdown doesn't have a comment syntax. However, some flavors support HTML comments (<!-- comment -->), which are ignored by the renderer. This is useful for leaving notes in collaborative documents.

Is my content safe in an online Markdown preview tool?

Reputable tools process everything client-side in your browser. No data is sent to any server. Your content never leaves your device, making it safe for drafting sensitive documents like API keys (though we still recommend using environment variables for actual secrets).

Try Markdown Preview →

Found this guide helpful? Check out our other free tools and guides.