$ loading▍
$ loading▍
// docs/markdown-live-preview
How the editor works, a complete Markdown cheat sheet, and your options for sharing and exporting.
Open the Markdown Live Preview and start typing: the source is on the left, the rendered page on the right. Switch between Write, Split and Preview in the top bar (phones get Write and Preview), drag the divider to resize the panes, and use full screen when you want nothing else on screen.
[ ] / [x] in the source..md file from your device, or drag it onto the editor.| Action | Shortcut |
|---|---|
| Bold | Ctrl / ⌘ + B |
| Italic | Ctrl / ⌘ + I |
| Link | Ctrl / ⌘ + K |
| Inline code | Ctrl / ⌘ + E |
| Strikethrough | Ctrl / ⌘ + Shift + X |
| Indent / outdent a list item | Tab / Shift + Tab |
| Continue a list | Enter (twice to end it) |
| Leave the editor with Tab | Esc, then Tab |
| Exit full screen | Esc |
The editor speaks GitHub Flavored Markdown plus a few popular extensions. The basics:
| Element | Markdown |
|---|---|
| Headings | # Title, ## Section, ### Subsection |
| Bold | **bold** or __bold__ |
| Italic | *italic* or _italic_ |
| Strikethrough | ~~done~~ |
| Link | [text](https://example.com) |
| Image |  |
| Inline code | wrap it in single backticks, e.g. npm install |
| Blockquote | > quoted text |
| Bulleted list | - item (or * / +) |
| Numbered list | 1. item |
| Task list | - [ ] todo and - [x] done |
| Divider | --- |
| Footnote | text[^1] and later [^1]: the note |
| Line break | end a line with two spaces, or leave a blank line for a new paragraph |
Separate columns with pipes. Colons in the second row align a column left, center or right.
| Left | Center | Right |
| :--- | :----: | ----: |
| a | b | c |
Fence code with three backticks and name the language after the opening fence for syntax highlighting. Around 35 common languages are recognised, including JavaScript, TypeScript, Python, Go, Rust, Java, C#, SQL, Bash, JSON and YAML.
```js
const greeting = "hello";
```
Math is rendered with KaTeX. Wrap inline math in single dollar signs and display math in double dollar signs on their own lines. A price like $5 stays plain text.
The area is $\pi r^2$.
$$
\sum_{i=1}^{n} i = \frac{n(n+1)}{2}
$$
A code block marked mermaid becomes a diagram: flowcharts, sequence diagrams, Gantt charts, class and state diagrams, pie charts and more. The diagram library only loads when a document uses it.
```mermaid
sequenceDiagram
Browser->>Server: GET /page
Server-->>Browser: 200 OK
```
GitHub-style alerts are blockquotes whose first line is [!NOTE], [!TIP], [!IMPORTANT], [!WARNING] or [!CAUTION].
> [!WARNING]
> Back up the database before migrating.
Inline HTML such as <details>, <kbd>, <sub>, <sup>, <mark> and sized <img> tags works. Scripts, forms, event handlers and <style> tags are stripped out.
Your draft is saved automatically in this browser as you type, so closing the tab doesn't lose it. It isn't synced anywhere else: clearing site data or switching browsers starts fresh.
| Option | What you get |
|---|---|
| Share link | The document compressed into a URL. Whoever opens it gets their own copy to read or edit. |
| Markdown (.md) | The source exactly as you wrote it. |
| HTML page (.html) | A standalone page with the same styling, in light or dark mode to match the reader's system. |
| Your browser's print dialog, where you choose Save as PDF. Colors are forced to light for printing. | |
| Formatted text | Rich text on the clipboard that pastes cleanly into Google Docs, Notion, Word or an email. |
| HTML / Markdown | The raw markup on the clipboard. |
A share link contains the whole document, so anyone you send it to (and anywhere it gets pasted) can read it. Don't share links to documents with secrets in them.
Rendering happens entirely in your browser; the document is never sent to pumpkins.dev. The part of a share link after # isn't sent to servers either. Images you reference by URL load from wherever they're hosted, and exported HTML pages load their fonts from Google Fonts (plus KaTeX's stylesheet when the page has math).
Tell me what you're building and where you're stuck. I typically reply within a day.