Markdown Preview

Links in the preview open in a new tab, so a click does not take you away from your text.

What the Renderer Is

The preview uses micromark 4 with micromark-extension-gfm 3. micromark states that it follows CommonMark exactly and passes the spec’s test suite; the GFM extension adds the five features from the GFM spec that GitHub uses: tables, task list items, strikethrough, autolink literals, and footnotes. Code blocks get syntax colors for JavaScript, TypeScript, Python, Go, PHP, Ruby, Java, Bash, JSON, HTML/XML, CSS, and Markdown.

Example: Release Notes

This input:

# Release notes

See https://example.com and `a **b** c`.

- Parent
  - Child
- [X] Done
- [x] done

3. third
4. fourth

| Item | Price |
|:-----|------:|
| Widget | $9.99 |
| a \| b | 1 |

<b>raw</b> and <img src=x alt=y>

produces this HTML (the Copy HTML output):

<h1>Release notes</h1>
<p>See <a href="https://example.com">https://example.com</a> and <code>a **b** c</code>.</p>
<ul>
<li>Parent
<ul>
<li>Child</li>
</ul>
</li>
<li><input type="checkbox" disabled="" checked="" /> Done</li>
<li><input type="checkbox" disabled="" checked="" /> done</li>
</ul>
<ol start="3">
<li>third</li>
<li>fourth</li>
</ol>
<table>
<thead>
<tr>
<th align="left">Item</th>
<th align="right">Price</th>
</tr>
</thead>
<tbody>
<tr>
<td align="left">Widget</td>
<td align="right">$9.99</td>
</tr>
<tr>
<td align="left">a | b</td>
<td align="right">1</td>
</tr>
</tbody>
</table>
<p>&lt;b&gt;raw&lt;/b&gt; and &lt;img src=x alt=y&gt;</p>

Each line of the input shows one rule. The bare URL becomes a link (GFM autolink literal). Asterisks inside backticks stay literal, because a code span is not parsed for emphasis. The indented - Child is a nested list. [X] and [x] are both checked tasks. A list that starts with 3. keeps that number in the start attribute. The colons in the separator row set left and right alignment, and \| puts a pipe inside a cell instead of splitting it. The last line is raw HTML, which comes out as text.

Raw HTML Is Shown as Text

CommonMark lets Markdown contain HTML tags, and GitHub renders a filtered set of them: its markup pipeline removes script tags, inline styles, and class or id attributes. This preview takes the stricter option and escapes all raw HTML, which is micromark’s default. The reason is where the preview runs: on zerotool.dev, in the same origin as other tools that keep inputs in your browser’s storage. If raw HTML were rendered, an <img src=x onerror=…> in pasted text would run as script on this site. With escaping there is no markup from your text that can become a live element, and the copied HTML is safe to paste into another page.

URLs follow the same rule. A link keeps its address only if it is relative or uses http, https, mailto, irc, ircs, or xmpp; an image keeps it only if it is relative or uses http or https. Anything else, such as javascript: or data:, gets an empty href or src and the link text stays. This input:

[docs](javascript:alert(1)) and ![x](data:image/png;base64,AAAA)

gives:

<p><a href="">docs</a> and <img src="" alt="x" /></p>

If you need <details>, <kbd>, or <br> to render, check the document in GitHub’s own preview.

Images Load From the Network

![alt](https://…) creates an <img> that your browser fetches from that address, so the image host sees your IP address and browser details. Text and the rest of the document stay in your browser.

Limits

• Raw HTML is never rendered (see above), so documents that depend on HTML tags look different here than on GitHub.
• Headings get no id anchors; GitHub adds them when it renders a page.
• Emoji shortcodes such as :tada:, @mentions, and issue references like #123 are GitHub features outside the GFM spec and stay as text.
• Math ($…$) and Mermaid diagrams are not rendered.
• Only the languages listed above get syntax colors; other fenced blocks show as plain code.