Back

Markdown Preview

Markdown is a lightweight markup language for creating formatted text using plain text syntax. Popular for documentation, README files, and note-taking, it renders to HTML for display. This tool previews Markdown with live rendering, extracts document structure (headings, links, images), and can convert to HTML.

Specifications

Common Use Cases

  • Preview README.md files before committing
  • Review documentation formatting
  • Extract all links from a document for validation
  • Convert Markdown to HTML for embedding
  • Analyze document structure and navigation

Features

  • Live preview with HTML rendering
  • Extract document structure (headings as table of contents)
  • List all links and images in the document
  • Detect and display code blocks with language hints
  • Parse frontmatter (YAML metadata)
  • Convert to clean HTML output
  • Word and character count statistics

Examples

README with Features

Try it →

A typical project README with headings, lists, and code.

# My Project

A brief description of what this project does.

## Installation

```bash
npm install my-project
```

## Features

- **Fast** - Optimized for speed
- **Simple** - Easy to use API
- **Flexible** - Works with any framework

## Links

- [Documentation](https://docs.example.com)
- [GitHub](https://github.com/example/project)

Tips

  • Use # for headings (# H1, ## H2, ### H3, etc.).
  • Code blocks use triple backticks with an optional language identifier.
  • Links use [text](url) syntax; images use ![alt](url).
  • Frontmatter between --- lines can contain YAML metadata.

Understanding Markdown Preview

Markdown is a lightweight markup language created by John Gruber in 2004, designed to be readable as plain text while converting cleanly to HTML. Its syntax uses punctuation characters that visually suggest their formatting: # for headings, * for emphasis, - for lists, and backticks for code. Markdown files remain useful even without rendering, which is why the format dominates for documentation, README files, and technical writing.

The CommonMark specification (2014) addressed the original Markdown's many ambiguities. CommonMark precisely defines how edge cases are handled, and most modern parsers implement it. GitHub Flavored Markdown (GFM) extends CommonMark with tables, task lists, strikethrough, autolinked URLs, and fenced code blocks with syntax highlighting.

GFM is the de facto standard for README files, pull request descriptions, issue comments, and documentation sites. Most documentation platforms (Notion, Docusaurus, MkDocs, GitBook) support GFM or a superset of it.

Frontmatter is a common convention for adding structured metadata to Markdown files. A YAML block delimited by --- lines at the top of the file can contain title, date, author, and tags used by static site generators (Astro, Hugo, Jekyll, Next.js) to build navigation and page layouts.

In practice, "Markdown" almost always refers to either CommonMark or GFM. The original Markdown specification left many edge cases undefined, and CommonMark resolved those ambiguities with a strict specification. GFM extends CommonMark with tables, task lists, strikethrough, and autolinked URLs. When evaluating a Markdown parser or renderer, checking its CommonMark compliance is a reliable indicator of how well it handles edge cases.

Tables in GFM use pipes (|) to separate columns and hyphens (-) for the header divider row. Column alignment is controlled with colons in the divider: :--- for left-aligned, :---: for centered, and ---: for right-aligned. Tables are a GFM extension and are not part of the original Markdown syntax. Frontmatter, delimited by --- lines at the very beginning of the file, is a YAML metadata block used by static site generators for page metadata like title, date, layout, and tags. GitHub renders frontmatter as a table at the top of the file, though not all renderers process it.

Fenced code blocks use triple backticks with an optional language identifier after the opening backticks — for example, a line with three backticks followed by "javascript" starts a JavaScript block with syntax highlighting. The available language identifiers depend on the rendering platform. Indenting code by four spaces also creates a code block, but without the ability to specify a language for highlighting.

← Back to all tools