# Playground

An editor with a live preview: Markdown on the left, the output of mdlib-pure
on the right, rendered in the browser as you type.

- **Samples**: Welcome, CommonMark basics, GitHub Flavored Markdown, Math with KaTeX, Definition lists, Containers, Highlighted text, Front matter, Syntax highlighting hook.
- **Plugins** to toggle: GFM (tables, task lists, footnotes, strikethrough, autolinks, alerts); Headings (heading ids and permalinks); Math ($…$ and $$…$$, typeset with KaTeX); Containers (::: kind Title … :::); Definition lists (Term / : Definition); Mark (==highlight==); Front matter (YAML --- or TOML +++); plus the `highlight` option.
- **Views**: Preview (`renderTo()`), HTML (`render()`), AST (`parse()`).
- **Theme**: system, light or dark.
- **Share**: the source and the settings are compressed into the URL hash (`#v1=…`); `#sample=<id>` opens a sample.
- **Offline**: a service worker keeps the playground available without a network.

The playground opens with this text:

````markdown
# mdlib-pure

A **zero-dependency** Markdown renderer with *semantic tokens*.
Visit www.commonmark.org or [the spec](https://spec.commonmark.org).

> [!TIP]
> Neutral colors derive from `currentColor`: switch the theme above.

## Lists

- [x] CommonMark 0.31.2 (652/652)
- [x] GFM: tables, ~~strikethrough~~, autolinks, task lists
- [ ] Your plugin here

1. Ordered
2. Lists

## Code

```js
const md = createMarkdown({ plugins: gfm() })
md.renderTo(element, source)
```

| Feature | Size (gzip) |
|:--|--:|
| core | ~11 KB |
| gfm | ~4 KB |

Footnotes work too.[^1]

---

[^1]: Rendered at the end, with back references.
````