Markdown Preview
Write and preview Markdown with frontmatter support and export
| title | Hello, ToolNinja! |
| author | Developer |
| date | 2025-01-01 |
Hello, ToolNinja!
This is a live Markdown preview with frontmatter support.
Features
- Real-time rendering
- GFM support (tables, strikethrough, etc.)
- Frontmatter metadata detection
- Word count & reading time
Code Example
const greet = (name: string) => `Hello, ${name}!`;
console.log(greet("World"));
Table
| Tool | Category | Description |
|---|---|---|
| JSON Formatter | Format | Format JSON |
| Base64 | Encode | Encode/Decode |
| Regex Tester | Test | Test patterns |
Your data never leaves the browser 🔒
About this tool
The Markdown Preview renders GitHub-Flavored Markdown (GFM) in real time. It supports headings, bold and italic text, code blocks, inline code, tables, blockquotes, task lists, strikethrough, and horizontal rules — the full GFM specification used by GitHub, GitLab, Notion, and most documentation platforms. A Contents panel automatically extracts every heading into a clickable table of contents, using the same lowercase-hyphenated anchor scheme GitHub itself generates — so the structure you see here matches how the headings will actually link once the document is on GitHub. Click any entry to jump straight to that section in the preview.
When to use it
- →Writing and previewing README files before pushing to GitHub
- →Drafting pull request descriptions with formatted tables and code blocks
- →Checking table alignment before committing to a documentation site
- →Writing blog posts in Markdown format before converting or publishing
- →Exporting a finished document as a PDF via the browser's print dialog, or as standalone HTML
- →Navigating a long document's structure via the auto-generated table of contents while editing
Tips
- ◆Three backticks followed by a language name (```javascript) enables syntax-highlighted code blocks.
- ◆Use | pipes to create tables — the preview renders them as proper HTML tables.
- ◆- [ ] creates an unchecked task list item, - [x] creates a checked one.
- ◆Export PDF opens a clean, print-formatted version in a new tab and triggers your browser's print dialog — choose 'Save as PDF' as the destination.
- ◆The Contents button only appears once your document has at least one heading — it's hidden for short documents where a table of contents wouldn't help.
Frequently asked questions
What is GitHub Flavored Markdown (GFM)?
GFM is a superset of standard CommonMark Markdown that adds tables, strikethrough (~~text~~), task lists (- [ ]), fenced code blocks with language identifiers, and autolinks. It is the spec used by GitHub, GitLab, and most developer documentation platforms. This tool renders GFM spec.
How do I add syntax highlighting to code blocks?
Open a fenced code block with three backticks followed immediately by the language name: ```javascript, ```python, ```sql, etc. The renderer uses the language identifier to apply syntax coloring. Without a language name, the block is rendered as plain monospace text.
Why doesn't my Markdown table render correctly?
Tables require a header row, a separator row of dashes (---), and content rows — all separated by pipe characters (|). Every row must have the same number of columns. The separator row controls alignment: --- for left, :---: for center, ---: for right.
What is the difference between Markdown and MDX?
Markdown is a plain-text format converted to HTML. MDX (Markdown + JSX) is an extension that lets you import and use React components inside Markdown files — primarily used in Next.js, Gatsby, and Astro documentation sites. Standard Markdown processors don't understand JSX syntax.