About the Markdown Preview
Markdown Preview turns your Markdown into formatted text next to the editor and updates it as you type. It follows GitHub Flavored Markdown, so tables, task lists, footnotes and code blocks look close to how GitHub will show them before you commit the README.
Developers use it for README files, docs and release notes, and to check a long pull request description before pasting it into GitHub. Technical writers and students use it to learn the syntax with the result in view. Raw HTML is allowed but cleaned with GitHub-style rules, so a pasted <script> tag or onerror handler is removed. Everything runs in your browser and nothing is stored, so download the file if you want to keep it.
- Write or paste into the Markdown box. To read a file, click Open File or drop a
.mdfile onto the editor (up to 5 MB). New to the syntax? Load Example fills the editor with a page that uses every supported feature, ready to edit. - Format with the toolbar: Heading 1 to 3, Bold, Italic, Bulleted list, Numbered list, Link, Image, Blockquote, Code and Table. Select text first to wrap it, and click the same button again to undo a heading, list, quote or bold. Code makes inline code from a one-line selection and a fenced block from several lines.
- Ctrl+B, Ctrl+I and Ctrl+K (Cmd on a Mac) add bold, italic and a link. In the editor, Tab indents by two spaces and Shift+Tab removes them. Press Escape, then Tab, to move focus out.
- The Preview catches up about 0.3 seconds after you stop typing. Full Screen shows the rendered document over the whole screen for reading. Press Esc or click Exit Full Screen to go back to the editor.
- Copy HTML puts the sanitized HTML on your clipboard for a CMS or an email template. Download .md saves your text as
document.md.
Input# my-cli
Formats JSON files. ~~Beta~~ Stable.
## Install
```bash
npm install -g my-cli
```
- [x] Format files
- [ ] Watch modeOutput<h1>my-cli</h1>
<p>Formats JSON files. <del>Beta</del> Stable.</p>
<h2>Install</h2>
<pre><code class="language-bash">npm install -g my-cli
</code></pre>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" checked disabled> Format files</li>
<li class="task-list-item"><input type="checkbox" disabled> Watch mode</li>
</ul>That's exactly what Copy HTML gives you. The language-bash class lets a syntax highlighter on your own site color the block, and the checkboxes are disabled, as they are on GitHub.
Input| Command | What it does |
| :------ | -----------: |
| `npm test` | Runs the tests |
| `npm run build` | Builds the app |Output<table><thead><tr><th align="left">Command</th><th align="right">What it does</th></tr></thead><tbody><tr><td align="left"><code>npm test</code></td><td align="right">Runs the tests</td></tr><tr><td align="left"><code>npm run build</code></td><td align="right">Builds the app</td></tr></tbody></table>A colon at the left end of the dashes aligns the column left, at the right end aligns it right, and at both ends centers it. The cells don't have to line up in the source.
Input<img src="cat.png" onerror="alert(1)">
<script>alert(1)</script>
[Click me](javascript:alert(1))
<p style="color:red">Red?</p>
<details><summary>More</summary>Hidden text</details>Output<img src="cat.png">
<p><a>Click me</a></p>
<p>Red?</p>
<details><summary>More</summary>Hidden text</details>The onerror handler, the <script> element, the javascript: URL and the style attribute are gone. Harmless tags like <details> and <summary> stay.
Markdown syntax cheat sheet
Each item shows what you type and what the preview makes of it.
- One to six
#signs plus a space make a heading:## Installbecomes<h2>Install</h2>. **bold**,*italic*and~~deleted~~become<strong>,<em>and<del>.[toolo](https://toolo.dev)is a link, andis an image with the alt text Logo. A bare URL likehttps://toolo.devturns into a link by itself.- Itemstarts a bulleted list and1. Itema numbered one. Indent a nested item so it lines up with the text of the item above it.> Notemakes a blockquote.- [x] Doneand- [ ] To domake task list items with checkboxes.- Single backticks make inline code. For a code block, put three backticks on the line before and after it, with a language such as
bashafter the first three. Text[^1]plus a line[^1]: Source.adds a numbered footnote, listed at the end with a link back to where it was used.- End a line with
\or two spaces to get a<br>line break. A plain line break inside a paragraph shows as a space. ---after a blank line draws a horizontal rule. Directly under a line of text, it makes that line an<h2>instead.- A backslash keeps a symbol literal:
\_not italic\_shows_not italic_, underscores included.
What renders like GitHub, and what doesn't
CommonMark is the standard Markdown spec. GitHub Flavored Markdown (GFM, spec version 0.29-gfm) adds five extensions on top of it: tables, task list items, strikethrough, extended autolinks and a filter for unsafe raw HTML. Footnotes aren't in either spec, but GitHub and this preview both render them.
GitHub also shows a few extras that the preview leaves alone:
- Alerts such as
> [!NOTE]appear as an ordinary blockquote that starts with[!NOTE]. - Emoji shortcodes like
:tada:stay as text. - Math between
$signs and Mermaid diagrams aren't drawn. - Headings get no
id, so a link like[Install](#install)doesn't jump anywhere. - Code blocks have no syntax colors.
- In issue and pull request comments, GitHub turns every line break into a new line. In
.mdfiles it doesn't, and neither does the preview.
Previewing Markdown in your editor or terminal
In VS Code, open a .md file and press Ctrl+Shift+V (Cmd+Shift+V on a Mac) for a preview tab, or Ctrl+K then V to open it beside the editor. On GitHub, a Preview tab appears when you edit a file or write an issue or comment.
For files on disk, pandoc -f gfm README.md -s -o README.html reads GitHub Flavored Markdown and writes a complete HTML page. For PDF output, Pandoc also needs a PDF engine such as LaTeX. If a release note has to fit a length limit, the Word Counter gives the character count.
Why raw HTML is sanitized
Markdown allows raw HTML, and a plain parser copies it into the output untouched. If your site renders Markdown that other people write, such as comments or support tickets, that HTML can carry a <script> tag, an onerror handler or a javascript: link: a cross-site scripting (XSS) hole. Sanitize the HTML every time you convert Markdown from users.
The preview uses the default schema of rehype-sanitize, which follows GitHub's rules for user content, and also allows data: image URLs. Ids get a user-content- prefix so they can't clash with ids on the page. Here's the same pipeline in JavaScript:
// npm install unified remark-parse remark-gfm remark-rehype rehype-raw rehype-sanitize rehype-stringify
import { unified } from "unified";
import remarkParse from "remark-parse";
import remarkGfm from "remark-gfm";
import remarkRehype from "remark-rehype";
import rehypeRaw from "rehype-raw";
import rehypeSanitize from "rehype-sanitize";
import rehypeStringify from "rehype-stringify";
const html = String(
await unified()
.use(remarkParse)
.use(remarkGfm)
// Keep raw HTML for now. rehype-sanitize cleans it and adds "user-content-" to ids.
.use(remarkRehype, { allowDangerousHtml: true, clobberPrefix: "" })
.use(rehypeRaw)
.use(rehypeSanitize)
.use(rehypeStringify)
.process(markdown)
);
// Footnote links still point to "#fn-1" while the id is now "user-content-fn-1".
// toolo adds a small plugin that rewrites those links.What's the difference between Markdown and GitHub Flavored Markdown?
GitHub Flavored Markdown is CommonMark plus five extensions: tables, task lists, strikethrough, extended autolinks and a filter for unsafe HTML. Footnotes work on GitHub too, even though neither spec includes them.
How do I open a .md file online?
Click Open File and pick the file, or drag it onto the editor. The formatted version appears in the Preview, and Full Screen makes it easier to read. The file is read in your browser and isn't uploaded anywhere.
How do I preview Markdown in VS Code?
Open the .md file and press Ctrl+Shift+V (Cmd+Shift+V on a Mac). Ctrl+K followed by V opens the preview in a split next to the editor.
How do I make a table in Markdown?
Write a header row with cells separated by |, then a row of dashes such as | --- | --- |, then one line per row. The Table button inserts a starter table, and colons in the dash row set the alignment: :--- left, ---: right, :---: centered.
Can I use HTML inside Markdown?
Yes. Tags like <details> for a collapsible section or <kbd> for keys work. Scripts, iframes, style attributes, event handlers and javascript: links are stripped out.
How do I convert Markdown to HTML or PDF?
Click Copy HTML for clean HTML you can paste into a CMS, and run it through the HTML Minifier if size matters. There's no PDF export here; Pandoc or a VS Code extension can make one from the .md file.
Is my text saved if I close the tab?
No. The editor doesn't store your text, in the browser or on a server, so a refresh starts with an empty box. Click Download .md before you leave if you want to keep the file.