This online markdown renderer shows what your markdown turns into, element by element. It follows CommonMark through markdown-it, adds tables, task lists, footnotes, Mermaid diagrams and KaTeX math, and makes clear what it does not render, so you can check a document before you rely on it.
Markdown has several dialects, and the same file can look different on two sites. A renderer is useful when you need to answer a narrow question: does this table break, does this footnote resolve, does this diagram parse. The example loaded above exercises each supported feature, including one code block in a language that is not highlighted, so you can compare it with your own text.
How to test a markdown document
- Replace the example with your markdown, or add your lines below it.
- Switch to Split view to see the source and the rendered result side by side, or to Preview to see only the result. Split needs a screen at least 768px wide.
- Look for anything that shows as literal characters: unclosed backticks, a table missing its separator row, a Mermaid block with a syntax error.
- Fix the source and watch the render update.
- When the result is right, press Share. The link opens the same rendering in a read view.
Rendering rules
Rendered:
- CommonMark: headings, emphasis, lists, block quotes, links, images, code.
- Tables with column alignment, strikethrough with
~~, and URLs turned into links automatically. - Smart typography for quotes and dashes.
- Task lists with
- [ ]and- [x], and footnotes with[^name]. - Anchors on every heading, and a table of contents when a document has three or more headings.
- Syntax highlighting for JavaScript, TypeScript, Python, HTML/XML, CSS, JSON, SQL, Bash/shell, YAML, Go, Rust, Java and C++.
- Mermaid diagrams in
```mermaidblocks. - KaTeX math, inline with
$...$and as a block with$...$. - A frontmatter block at the top is hidden, and its
titleis used as the document title.
Not rendered:
- Raw HTML. Tags such as
<details>,<br>or<img>written as HTML appear as text. - Highlighting for languages outside the list above. Those blocks still appear in a monospaced font, without colors.
Why the rendering matters for sharing
What you see in the preview is what the recipient sees when they open the read link, because both use the same renderer. That is the point of checking first: a document that renders cleanly here will render the same way for the person you send it to. If the problem you are solving is markdown that arrives as raw symbols in a chat tool, the guide on markdown not rendering in Slack explains the options. To simply read a file you already have, the markdown viewer is the shorter route.
Frequently asked questions
Which markdown flavor does this renderer use?
CommonMark, implemented with markdown-it, with extensions for tables, strikethrough, automatic links, task lists, footnotes, heading anchors, Mermaid and KaTeX.
Why is my code block not colored?
Highlighting covers 13 languages. A block tagged with another language, or with no language, appears as plain monospaced code. Check that the language name after the backticks is one of the supported ones.
Does it render HTML inside markdown?
No. Raw HTML is shown as text rather than interpreted. Use markdown syntax for the same result where one exists, for example a table instead of an HTML table.
Does the shared link look the same as the preview?
Yes. The read view uses the same rendering, including diagrams and math.