About Markdown Preview
CommonMark is the strict, standardized Markdown spec — a precise grammar everyone agrees on (headings, emphasis, links, lists, code, blockquotes). GFM (GitHub Flavored Markdown) extends CommonMark with: tables, task lists, strikethrough, autolinks (bare URLs become clickable), and disallowed raw HTML.
By the ToolFluency team · Updated July 2026
Write markdown and see the rendered output live. Toolbar for formatting, copy as HTML. Free, no sign-up required.
How to use
- Type or paste Markdown into the editor pane. The preview pane to the right (or below on narrow screens) updates live as you type — every keystroke re-renders, so syntax errors and missing closing tokens become obvious immediately.
- Use the toolbar buttons (B for bold, I for italic, H for heading, link, image, code, list, quote) to insert syntax around the current selection or at the cursor. Selecting 'foo' and clicking B wraps it as **foo**; clicking H without a selection inserts ## at line start.
- For inline code, wrap text in single backticks: `const x = 1`. For code blocks, fence with triple backticks and a language tag for syntax highlighting: ```js then code then ```. The preview honors common languages (js, ts, py, html, css, bash, json).
- Build tables with pipe-and-dash syntax: header pipes on the first row, dash separators on the second, then data rows. Cell alignment is set in the separator: :--- left, :---: center, ---: right. The preview renders tables in standard HTML form.
- Click Copy HTML to grab the rendered output as raw HTML — paste into a CMS, an email signature builder, a static site generator, or anywhere that takes HTML but not Markdown. The HTML is sanitized of <script> tags but preserves links and images.
- Use task lists (- [ ] todo, - [x] done), strikethrough (~~struck~~), and footnotes ([^1] reference, [^1]: note) for GitHub-flavored extensions. The preview supports CommonMark plus the most-used GFM additions, matching what GitHub renders in README files.
Examples
Heading hierarchy
Input: # Title\n## Section\n### Subsection. Output: nested h1, h2, h3 elements with default styles. Use exactly one h1 per document for SEO and screen-reader navigation; deeper levels can repeat. Closing #s are optional in CommonMark (## Section ##) but ignored.
Link with title attribute
Input: [docs](https://example.com 'Open the manual'). Output:
docs. The title shows on hover. Reference-style alternative: [docs][1] then [1]: https://example.com 'Open the manual' — useful when the same URL appears many times.
Fenced code with syntax
Input: triple-backtick js, then a function declaration, then triple-backtick. Output: a styled <pre> block. Some renderers (Prism, highlight.js) color the syntax; bare CommonMark just preserves whitespace. The preview tries to colorize common languages.
Frequently asked questions
What is the difference between CommonMark and GFM?
CommonMark is the strict, standardized Markdown spec — a precise grammar everyone agrees on (headings, emphasis, links, lists, code, blockquotes). GFM (GitHub Flavored Markdown) extends CommonMark with: tables, task lists, strikethrough, autolinks (bare URLs become clickable), and disallowed raw HTML. Most real-world Markdown is GFM, including this preview. Tools like Slack, Discord, and Reddit each have their own non-standard flavors that diverge further.
Why does my Markdown render differently on GitHub versus other tools?
Because there is no universal rendering. CommonMark is the closest thing to a standard, but GitHub adds GFM, GitLab adds its own flavor, Slack uses simplified mrkdwn (no headings, single asterisks for bold), Discord uses yet another variant, and static site generators like Hugo/Jekyll layer their own preprocessing. The same source can produce wildly different output. For maximum portability, stick to plain CommonMark and avoid HTML embedding.
Can I embed raw HTML inside Markdown?
CommonMark allows inline HTML in most contexts — <kbd>Ctrl</kbd>, <details>, <sub>/<sup> all work. But many renderers sanitize for security: GitHub strips <script>, <iframe>, and most attributes. The preview does the same. For static-site builds where you control the output, you can embed anything; for user-submitted Markdown (forums, comments), assume sanitization will mangle anything beyond the basics.
How do I include code with backticks in inline code?
Wrap with two or more backticks: ``a `b` c`` renders as a `b` c. The opening and closing fences just need to differ in length from any backticks in the content. For code blocks containing triple-backticks, fence with four-or-more backticks: ````js then ```nested``` then ````. This is rarely needed but real.
What does the autolink syntax do?
GFM autolinks turn bare URLs (https://example.com) and email addresses into clickable links automatically — no need for explicit [text](url) syntax. CommonMark does NOT autolink; it requires angle brackets: <https://example.com>. If you want URLs to remain literal text in CommonMark, you do not need to escape; in GFM, surround them in code spans: `https://example.com`.
How do I add footnotes?
GFM footnote syntax: place [^1] in the body, then later add [^1]: This is the footnote text. Multiple footnotes use [^2], [^foo] (any token works as a label, but they render numbered). Footnotes appear at the bottom of the document with a back-link arrow. Not every renderer supports footnotes — Discord and Slack do not, GitHub and the preview here do.
Can I write LaTeX or math in Markdown?
Not in CommonMark or basic GFM — math is not part of the spec. GitHub recently (2022) added LaTeX support: $inline$ and $display$ math via MathJax. Pandoc, Hugo, and most static site generators support it via plugins. The preview here does not currently render math; for math-heavy docs use a renderer with explicit MathJax or KaTeX integration, or paste the rendered images instead.
Part of ToolFluency’s library of free online tools for Developer Tools. No account needed, no data leaves your device.