Skip to main content
ToolMaple

Markdown Preview

Type Markdown on the left and see the rendered result live, including GFM tables and task lists.

Last updated:

Hello, Markdown

This is bold, italic, strikethrough and inline code. Unicode passes through untouched: café, naïve, 🍁.

Lists

  • First item
  • Second item
    • Nested item
  • Third item

Numbered

  1. Step one
  2. Step two
  3. Step three

Code Block

function hello(name: string) {
  console.log(`Hello, ${name}!`)
}

def greet(name: str) -> None:
    print(f"Hello, {name}!")

Table

ToolCategory
BMIHealth
QR CodeLifestyle

Quote

This is a blockquote and it can run over several lines

Links and images

ToolMaple

Checkbox

  • Done
  • To do

What Markdown is, and why the preview matters

Markdown is the lightweight markup language John Gruber and Aaron Swartz designed in 2004. It marks up the formats writers actually use, bold, italics, headings, lists, code, with the fewest possible symbols, so the source file stays readable plain text instead of filling up with <tag> pairs. The stated goal was prose that reads well as written and converts to HTML as a bonus, not a replacement for HTML.

In 2014 the CommonMark specification formalised the syntax and settled the ambiguities that had made early implementations disagree with each other. GitHub extended it into GFM (GitHub Flavored Markdown), adding tables, strikethrough, task list checkboxes and autolinks. That combination is now the dialect most people meet online, and it is what this page renders.

Because the language grew this way, the same .md file does not look the same everywhere. A table that seemed correct in your editor loses a row once it is pushed. A syntax you are sure works turns into a line of raw symbols on a different platform. Guessing from memory is the slow way round. Paste the text in the left pane and read the right one: that is GFM rendering, in your browser, as you type.

Which Markdown dialect are you writing for?

  • CommonMark: the strict base specification. Stack Overflow, Reddit and Discord build on it.
  • GFM: CommonMark plus tables, task lists, strikethrough and autolinks. GitHub, GitLab, this tool and most modern platforms.
  • MDX: Markdown with JSX, so React components can be embedded in the document. Common in Next.js and Docusaurus documentation.
  • Obsidian and Notion: each extends GFM in its own direction with backlinks, callouts and embedded blocks. Those parts do not travel to other tools.

Write to the smallest common set your destination understands. If that destination is GitHub or a typical blog engine, what you see on this page is close to what you will get. If it is an app-specific syntax, this page will not render that part, and you will have to check it in the app itself.

Syntax this preview supports

  • Headings, levels one to six (# ## ### and so on)
  • Bold, *italic*, ~~strikethrough~~, `inline code`
  • Bulleted and numbered lists, including nesting
  • GFM tables, with per-column alignment
  • Fenced code blocks, with syntax highlighting and automatic language detection
  • Blockquotes (>)
  • Links [text](url) and images ![alt](src)
  • Horizontal rules (---)
  • Task list checkboxes (- [x] and - [ ])
  • Bare URLs turned into links (GFM autolink)

The sample that loads by default demonstrates every item on that list once. If you want to see how one of them is written, find that line in the left pane and edit it. That is faster than typing a test document from scratch.

Draft a README and check it before you commit

  1. Select the sample in the left pane, delete it, and paste your draft or start typing. The preview updates as you go, so there is no button to press.
  2. Check the heading levels first. Keep one level-one heading for the whole document and go down from there. Headings in the preview carry a rule underneath, so a skipped level is easy to spot.
  3. Check your line breaks. A break that did not appear almost always means a missing blank line. That is the single most common surprise in Markdown, and the first item under the cautions below.
  4. Make sure every fenced code block declares its language. Only then does it get syntax colouring, here and on GitHub.
  5. When it looks right, select the left pane, copy, and paste that into README.md. The source is what your repository needs, not the rendered HTML on the right.

Lay out a table and a task list

  1. A table needs three lines at minimum: a header row, a delimiter row (|---|---|), and at least one body row. Without the delimiter row the whole table collapses into a single paragraph.
  2. Control alignment with colons on the delimiter row: :--- for left, :---: for centre, and ---: for right.
  3. Escape any literal pipe inside a cell as \|. Otherwise that cell is split in two and the row goes out of alignment.
  4. Write task lists as - [ ] item and - [x] item. The space between the brackets is required. The preview draws real checkboxes.
  5. If a table renders crookedly, count the pipes row by row. It is nearly always one row whose pipe count differs from the header.

Source or HTML: which one to take with you

  • Going back to GitHub, a blog editor, or anywhere else that eats Markdown: take the left pane. Select all and copy. Pasting the HTML there would show a pile of tags instead.
  • Going into an HTML template, a CMS source view or an email template: press Copy HTML at the top right. It puts the markup the preview is currently rendering on your clipboard as plain text.
  • That markup carries this site’s styling classes: it will not look the same somewhere else on its own. Either attach your own CSS or keep the tag structure and strip the classes.
  • Going into Word or Google Docs with formatting intact: select the rendered content in the preview pane itself and copy that. It lands closer to what you see. The first FAQ below covers the details.
  • Keeping a copy: there is no download button here. Paste the left pane into your editor and save it as .md. Close the tab and the text is gone.

The same Markdown, pasted into different places

  • GitHub and GitLab: the closest match to this page. Tables, checkboxes and autolinks all behave the same. They additionally render Mermaid diagrams and math, which this page leaves as plain code.
  • Slack: not standard Markdown at all. Bold is a single asterisk on each side, italic uses underscores and strikethrough uses tildes. Paste standard Markdown into a Slack message and you will mostly see the symbols.
  • Discord and Reddit: a CommonMark-style subset with their own additions such as spoiler tags. Tables are not part of the deal in either place at the time of writing.
  • WhatsApp, Telegram and most chat apps: a handful of inline styles at best, no headings or tables. To send something laid out, send a link, an image or a PDF instead.
  • Notion and Obsidian: pasted Markdown is usually converted into their own block model, and text copied out of them can carry syntax only they understand. Paste it through this page first to see what survives as portable Markdown.
  • Static site generators and documentation systems: each picks its own Markdown library, and extras such as tables of contents, admonitions and footnotes usually come from plugins. Swap the toolchain and those need retesting. Trust your project’s actual configuration over any general claim.

Common traps, and what happens to your text

  • A single newline is not a line break. CommonMark counts it as whitespace. You need two trailing spaces before the newline or a blank line to break the line. This tool and GitHub both follow that rule, so if the preview disagrees with your expectation, look for the missing blank line.
  • Underscores inside identifiers. some_var_name can have its middle underscores read as emphasis in some dialects, mangling the text. Wrap it in backticks as inline code.
  • Pipes inside table cells break the column they sit in. Escape them as \|.
  • Inline HTML is not rendered here. The Markdown specification permits embedded HTML and every implementation handles it differently. This preview follows the react-markdown default and shows a tag such as <div> as plain text, which is both stricter and safer. GitHub sanitises and keeps a subset, so expect a difference there.

Rendering runs on react-markdown with remark-gfm and rehype-highlight, entirely inside your browser, with automatic language detection and colouring for code blocks. Nothing is sent to a server, so an internal document or an unpublished draft is safe to paste here.

  • There is no autosave. The text lives in this tab only. Reload or close it and the editor returns to the default sample, so keep your own copy of anything long.
  • Images in the preview are really fetched from wherever they are hosted, so those hosts learn that you viewed them. Remove the image syntax before pasting if you want no outbound requests at all.
  • The right pane wears this site’s styles, not your destination’s. Line height, type size and table borders will all change. Use it to confirm the structure is right, not to predict the final appearance.

Frequently asked questions

What is the difference between Markdown and GFM?

Markdown is the original 2004 syntax. CommonMark is the strict specification that pinned down the ambiguous parts. GFM (GitHub Flavored Markdown) is CommonMark plus four popular extensions: tables, strikethrough, task list checkboxes and autolinks. This preview runs GFM, so what you see here is close to what GitHub will show you.

Why does my single line break disappear in the preview?

CommonMark treats a single newline as ordinary whitespace, so two consecutive lines join into one paragraph. To force a break, end the line with two spaces before the newline, or leave a blank line to start a new paragraph. GitHub follows the same rule in files, which is why a README that looked fine in your editor can render as one long block.

What exactly does the Copy HTML button copy?

It copies the HTML that the preview pane is rendering at that moment, as plain text on your clipboard. Paste it into a code editor, a CMS source view or an email template and you get markup. Paste it into a rich text editor and you will see the tags themselves. The markup also carries the styling classes this page uses, so it will not look the same on another site until you attach your own CSS or strip the classes.

Is my text uploaded anywhere?

No. Parsing and rendering both run in your browser with JavaScript, and this page has no backend API that could receive the text. You can safely paste an internal document or an unpublished draft. The one exception is an image you reference by URL: your browser fetches that file directly from whichever host serves it.

Does the preview render LaTeX or math formulas?

No. Neither CommonMark nor the GFM specification includes math. GitHub added its own dollar sign syntax on top, and Obsidian and Notion each have their own, so a formula that works in one place may not work in another. This page leaves math as plain text. Your source is unaffected, so you can still paste it into a platform that supports math.

Can I draw Mermaid diagrams here?

Not in the preview. A fenced block tagged mermaid is treated as an ordinary code block and shown as code with syntax colouring. GitHub renders Mermaid in issues, pull requests and Markdown files, so the source you write here will come to life once you paste it there.

Why is my table showing up as one line of plain text?

A GFM table needs at least three lines: a header row, a delimiter row made of pipes and hyphens, and one or more body rows. Miss the delimiter row and the whole thing degrades to a paragraph. The other common cause is a row whose pipe count does not match the header. Add a colon to one or both ends of a delimiter cell to control alignment, and escape any literal pipe inside a cell.

Does the editor save my draft?

No. What you type lives only in this browser tab. There is no autosave and no draft storage, so reloading the page or closing the tab returns the editor to the built-in sample. For anything longer than a few paragraphs, keep the real copy in a .md file on your machine and paste it here when you want to check the rendering.

How do I get the formatting into Word or Google Docs?

Select the rendered content in the preview pane and copy that, rather than copying the Markdown source or the HTML. Pasting a rendered selection keeps headings, lists and bold text as formatting that the word processor understands. Each office suite reinterprets the incoming styles, so expect fonts and spacing to shift and plan to restyle afterwards.

Does it render raw HTML written inside the Markdown?

No. A tag such as a div or a span is shown as literal text rather than being turned into an element. That is stricter than GitHub, which sanitises and keeps a subset of HTML. The stricter behaviour is deliberate: it means nothing you paste in can inject markup into this page. If your destination supports inline HTML, the source still carries it through untouched.

Sources

  • CommonMark Spec (the source for the line break, emphasis and list rules quoted on this page, including the rule that a single newline is whitespace).
  • GitHub Flavored Markdown Spec (the definitions of tables, strikethrough, task lists and autolinks).
  • Rendering is done by the react-markdown, remark-gfm and rehype-highlight packages. Their own documentation is authoritative for their behaviour. This page renders neither raw HTML, nor math, nor Mermaid.
  • Platform support for Markdown changes over time. For what a given service accepts today, check that service’s own current documentation.

More writing and developer tools

To check the length of a draft before it goes out, the word and character counter gives counts by word, character and line. For placeholder copy while you build a layout, use the lorem ipsum generator. If the document you are writing about carries data, the JSON formatter tidies it first, and the regex tester is there for the find-and-replace pass over your source.

Related tools

Privacy: your Markdown is parsed and rendered entirely in your browser. It is never uploaded and never stored, and this site has no backend API that could receive it. The one exception is an external image URL you write yourself, which your browser fetches directly from that host.