micky@garden:~/markdown-preview$cd ..

local markdown workbench

Markdown live preview

A local place to write Markdown, see exactly what it renders into, and look up the syntax without bouncing to another utility site.

editor / renderer

Draft here, preview beside it.

untitled.mdsaved

local draft ready

markdown
699 chars
preview
gfm

Markdown live preview

Write Markdown on the left. The preview updates as you type.

Why this exists

  • Keep drafts local in the browser
  • Preview GitHub-flavored Markdown
  • Print the rendered pane when you need a PDF
  • Sync scroll while editing longer notes

A tiny checklist

  • Tables
  • Task lists
  • Links
  • The draft you actually came here to write
ShortcutUse
ResetRestore the sample document
CopyPut Markdown on the clipboard
PDFOpen the browser print dialog
type GardenTool = {
  local: true;
  useful: boolean;
};

Raw HTML is treated as text here. The preview is for writing, not injecting scripts.

markdown syntax reference

Complete Markdown syntax reference.

This guide covers the CommonMark basics plus GitHub-flavored Markdown that this preview supports: tables, task lists, strikethroughs, autolinks, and footnotes.

Text

Headings

Use one to six # marks before a heading.

# Heading 1
## Heading 2
### Heading 3
###### Heading 6

Paragraphs

Separate paragraphs with a blank line.

First paragraph with a complete thought.

Second paragraph after a blank line.

Line Breaks

End a line with two spaces, or use a blank line for a new paragraph.

First line with two spaces  
second line after a hard break.

Emphasis

Italic, bold, bold italic, and strikethrough.

*italic*

**bold**

***bold italic***

~~strikethrough~~

Blockquotes

Prefix quoted lines with >.

> A useful note.
>
> - Quotes can contain other Markdown.

Horizontal Rules

Use three or more dashes, asterisks, or underscores.

Before

---

After

Escaped Characters

Use a backslash before Markdown punctuation to show it literally.

\*not italic\*
\# not a heading
\[not a link\]

Lists

Unordered Lists

Use -, *, or + for bullet lists.

- Apples
- Bananas
  - Nested item
- Cherries

Ordered Lists

Use numbers followed by periods.

1. Plan
2. Draft
3. Preview
4. Ship

Task Lists

GitHub-flavored checklists render as checkboxes.

- [x] Write the draft
- [ ] Review the preview
- [ ] Publish

Inline Links

Wrap link text in brackets and the URL in parentheses.

[Garden](https://garden.micky.sh)

Reference Links

Define URLs once and reuse them by label.

Open the [Garden][garden].

[garden]: https://garden.micky.sh

Autolinks

Plain URLs and email addresses can become links.

https://garden.micky.sh

<hello@example.com>

Images

Images use link syntax with a leading exclamation mark.

![Alt text for the image](https://micky.sh/favicon.svg)

Code

Inline Code

Wrap short code fragments with backticks.

Run `pnpm run dev` from the project root.

Fenced Code Blocks

Use triple backticks, optionally with a language label.

```ts
type Note = {
  title: string;
  done: boolean;
};
```

Indented Code Blocks

Indent every line with four spaces.

    pnpm run typecheck
    pnpm run build

Tables And Notes

Tables

Separate columns with pipes and add a dashed divider row.

| Feature | Status |
| --- | --- |
| Preview | live |
| Syntax guide | live |

Aligned Tables

Use colons in the divider row for alignment.

| Left | Center | Right |
| :--- | :---: | ---: |
| A | B | C |

Footnotes

Use a marker in the text and define it later.

Markdown can stay compact.[^1]

[^1]: Footnotes are part of GFM.

Raw HTML

CommonMark allows HTML, but this preview keeps it inert.

<mark>This displays as text here for safety.</mark>

This app intentionally does not render raw HTML.