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.
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
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.
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.