Can I use HTML inside Markdown?

Yes, in most flavors. CommonMark allows raw HTML — you can write , , / , and even tags directly in Markdown, and they will be passed through to the HTML output. However, some platforms restrict raw HTML for security: GitHub strips most HTML tags except a safe allowlist (div, span, details, summary, a, img, and a few others). Our formatter warns when it detects HTML tags that may be stripped by common platforms.

How do I create nested lists in Markdown?

Indent the nested list items by 2 or 4 spaces relative to the parent item. For unordered nested lists, use consistent indentation — mixing 2-space and 4-space indentation in the same document is technically valid per CommonMark but visually inconsistent. For ordered nested lists, the numbering of the parent list does not affect the numbering of the nested list. Our formatter normalizes nested list indentation to a consistent 2 spaces per level.

How do I add images to Markdown?

Use the syntax ![alt text](image-url "optional title"). The alt text is critical for accessibility — it describes the image to screen reader users. For local images in a repository, use relative paths: ![screenshot](./images/screenshot.png). For images you need to control the size of, use raw HTML: . The formatter validates image paths and warns when a referenced local file does not exist at the expected path.

What is MDX and how is it different from regular Markdown?

MDX extends Markdown with JSX — you can import and embed React/Vue/Svelte components directly inside Markdown files. For example, `import Chart from './Chart'` followed by ` ` embeds an interactive chart in your documentation. MDX is used by Next.js, Docusaurus, Astro, and Storybook. Unlike regular Markdown, MDX content must be compiled (not just rendered) and requires a build step. Our formatter preserves MDX imports and JSX components during formatting.

How do I format Markdown for maximum compatibility?

Write to the CommonMark specification — avoid GFM-only extensions unless you know your target platform supports them. Always put a blank line before and after headings, lists, and code blocks. Use ATX headings (#) rather than setext headings (===, ---) — they are clearer and support all six levels. Use reference-style links for documents with many links. Always specify a language tag on code fences. Avoid raw HTML where possible. Use our "Compatibility check" feature to validate your Markdown against multiple platforms.

Developer Tools2026-05-10

Markdown Formatter: Format, Preview, and Beautify Markdown Online

Markdown is the lingua franca of developer documentation — every README, GitHub issue, Stack Overflow answer, and static site blog post is written in it. John Gruber created Markdown in 2004 with a simple goal: a plain-text format that is readable as-is but can be converted to structurally valid HTML. Two decades later, Markdown has splintered into multiple flavors (CommonMark, GitHub Flavored Markdown, MDX, R Markdown) with different extensions, and writing complex Markdown with nested lists, code blocks inside lists, and tables is surprisingly fiddly. Our Markdown formatter solves this: a split-pane editor with raw Markdown on the left and a live-rendered preview on the right. The formatter normalizes your Markdown to consistent formatting — standardizing heading styles, list indentation, code fence markers, and link reference definitions. It supports the CommonMark specification (the formal standard that resolved ambiguities in the original Markdown syntax) plus GitHub Flavored Markdown extensions (tables, task lists, strikethrough, autolinks, and footnotes). It also renders Mermaid diagrams (flowcharts, sequence diagrams, class diagrams, Gantt charts) embedded in code fences — turning your documentation into rich, visual content. For static site generator users (Jekyll, Hugo, Next.js with MDX, Astro, Docusaurus), the formatter includes frontmatter (YAML/TOML) validation and preserves it untouched during formatting.

article

Markdown Editor

Free · No registration

Try this tool for free →open_in_new

Step-by-Step Guide

Write or Paste Markdown in the Editor

The left pane is a full-featured Markdown editor with syntax highlighting for headings, bold, italic, links, code, and lists. Paste existing Markdown from a README, GitHub issue, or CMS export — the formatter auto-detects the Markdown flavor and preserves extensions. The editor includes a toolbar for inserting common elements (table, image, link, code block) if you prefer not to remember the exact syntax.

Preview and Format in Real Time

The right pane renders a live preview as you type — the preview updates within 50ms of your last keystroke. Use the preview to visually verify formatting, check link destinations, and ensure code blocks have the correct language tags for syntax highlighting. Click "Format" to standardize the raw Markdown: normalize heading styles, fix inconsistent list indentation, align table columns, and convert inline HTML to Markdown where possible.

Copy, Download, or Export to HTML

Copy the formatted Markdown, download as a .md file, or export the rendered output as a standalone HTML file with embedded CSS (matching GitHub's rendering style). The HTML export includes the full rendered document, ready to paste into a CMS or email. For static site setups, export as MDX-compatible Markdown with frontmatter preserved.

Tips & Best Practices

check_circle

CommonMark (2014) is the formal Markdown specification that resolved 15+ years of ambiguity. Key clarifications: a blank line is required before a list; indented code blocks are 4 spaces (not 4 characters); setext headings (underlined with === or ---) require a blank line before them; and a backslash-escaped line break is a hard break. Every major Markdown processor (GitHub, Reddit, Stack Overflow, Discord) aligns with CommonMark.

check_circle

GitHub Flavored Markdown (GFM) extends CommonMark with: (1) tables — created with pipes and hyphens, with optional colon alignment; (2) task lists — checkboxes using - [ ] (unchecked) and - [x] (checked); (3) strikethrough — using ~~double tildes~~; (4) autolinks — raw URLs are automatically converted to clickable links without angle brackets; (5) footnotes — reference-style notes using [^1] syntax; (6) the "disallowed raw HTML" filter that strips dangerous tags and attributes for security.

check_circle

Code blocks should always include a language identifier for syntax highlighting: ```javascript, ```python, ```bash, ```yaml. Without a language tag, the code renders without highlighting and is harder to read. Over 200 languages are supported by most syntax highlighters (Prism, highlight.js, Shiki). Triple-backtick fences (```) are preferred over indented code blocks because they support language tags and are visually clearer.

check_circle

Tables in Markdown are defined with pipes and hyphens. The header row is separated from the body by a row of hyphens, with optional colons for alignment: left (:---), center (:---:), right (---:). Cell content can include inline Markdown (bold, italic, links, code), but not block elements (headings, code blocks, lists). For complex tables, consider using an HTML <table> element, which is valid in most Markdown flavors.

check_circle

For README.md files, follow the standard structure: (1) project title and one-line description; (2) badges (build status, npm version, license); (3) table of contents (auto-generated with tools like doctoc or markdown-toc); (4) installation (copy-pasteable commands); (5) usage (code examples with realistic scenarios); (6) API reference; (7) contributing guide link; (8) license. A well-structured README increases project adoption by 40% according to GitHub's 2023 Open Source Survey.

check_circle

Mermaid diagrams in Markdown code fences let you create flowcharts, sequence diagrams, class diagrams, state diagrams, Gantt charts, pie charts, and Git graphs directly in your documentation — without exporting images from an external drawing tool. Use ```mermaid as the language tag. Our formatter renders Mermaid diagrams live in the preview pane, turning abstract diagram definitions into visual output.

check_circle

When writing Markdown for static site generators (Jekyll, Hugo, Next.js, Astro, Docusaurus), the file begins with frontmatter — YAML between --- delimiters (or TOML between +++ delimiters) containing metadata like title, date, tags, and slug. Our formatter validates that the frontmatter is well-formed YAML/TOML, preserves it untouched during formatting, and warns if required fields (vary by SSG) are missing.

check_circle

Markdown link reference style — defining URLs separately from the inline text — improves readability in long documents: `[link text][ref]` in the text and `[ref]: https://example.com` at the bottom. The formatter can convert inline links to reference style (or vice versa) with one click, and automatically re-numbers reference definitions to match their order of appearance.

Frequently Asked Questions

CommonMark is the formal specification that defines the core Markdown syntax unambiguously — paragraphs, headings, lists, code blocks, emphasis, links, images, and blockquotes. GitHub Flavored Markdown (GFM) is a superset of CommonMark that adds tables, task lists, strikethrough, autolinks, and footnotes. GFM also applies stricter rules to raw HTML (filtering dangerous tags like <script>) and modifies how line breaks are handled within certain block elements. When in doubt, write CommonMark-compatible Markdown — it renders correctly everywhere.

Markdown turns plain text into beautifully structured documents — but only when it is formatted correctly. Our live-preview editor shows you exactly how your Markdown will render, while the formatter keeps your syntax clean and consistent. Write, preview, and format your Markdown right now — no signup, all in your browser.

Try this tool for free →open_in_new