Plain Markdown
Headings, emphasis, lists, links, tables, and fenced code are normal content. Code fences with a language are syntax highlighted.
| Feature | Supported |
| --- | :---: |
| Lists | ✓ |
| Tables | ✓ |
```js
const slides = parse(markdown);
```
Images
A standalone Markdown image is ordinary content. @img turns the following image into a media block with a ratio and shape:
<!-- @img 16:9 rounded -->
Ratio is WIDTH:HEIGHT; shape is rounded, square, or circle. Both are optional.
Relative paths resolve against the Markdown file's own URL when the deck was opened with ?src=. For decks opened from a local file there is no base address, so use absolute URLs for images.
YouTube, QR codes, and draw.io
Each of these consumes the next Markdown link:
<!-- @youtube autoplay on muted on volume 5 -->
[Demo](https://youtu.be/VIDEO_ID?t=1m30s)
<!-- @qr -->
[Open the deck](https://example.com/deck.md)
<!-- @drawio -->
[Architecture](./diagrams/architecture.drawio)
@youtube supports autoplay, muted, and volume like @sound. A t or start parameter in the URL sets the start time.@qr renders a clickable QR code for the link.@drawio renders a diagrams.net file.
@qr and @drawio can instead take a data fenced block:
<!-- @qr -->
```data
BEGIN:VCARD
VERSION:3.0
FN:Example
END:VCARD
```
Gallery
A gallery consumes the following contiguous Markdown list of images and plays them as a timed slideshow:
<!-- @gallery 4s rows-2 -->
-  6s
- 
-  3s
The first duration is the default (5s if omitted, 60s maximum). Individual images may override it. rows-N requests 1–12 rows; up to 100 images are supported.
Cover, contain, and float
@cover and @contain make a panel's first supported block fill the panel, removing the normal padding. They go at the beginning of the panel next to its background directives.
<!-- @cover -->
# Title stays normal content
@cover fills the panel and crops if needed.@contain fills the panel without cropping, ideal for diagrams and SVG.
Supported targets: images, tables, fenced code blocks, and @img, @youtube, @qr, @gallery, @callout, @space blocks. Only the first @cover or @contain in a panel counts.
@float pushes a block to one side so text flows next to it:
<!-- @float right 40% 3 -->
<!-- @img rounded -->
This text flows beside the image.
Syntax: @float left|right WIDTH [GAP] where WIDTH is a percentage and GAP is in units of 1% of the slide width.
Callouts
The Obsidian-style form:
>[!warning] Attention
>Highlighted content.
The directive form, with an optional heading and at least one quoted line:
<!-- @callout warning -->
# Attention
> Highlighted content.
> It may span several lines.
Built-in types: info, tip, success, warning, danger, error, question, quote, love, like, dislike.
A $$ pair on their own lines renders a KaTeX display formula:
$$
\sum_{i=1}^{n} i = \frac{n(n+1)}{2}
$$
Mermaid diagrams
A fenced block with language mermaid renders as a diagram:
```mermaid
flowchart LR
A[Idea] --> B[Plan] --> C[Launch]
```
Keep diagrams small and labels short; the slide is read from a distance.
Media and blocks
Plain Markdown
Headings, emphasis, lists, links, tables, and fenced code are normal content. Code fences with a language are syntax highlighted.
| Feature | Supported | | --- | :---: | | Lists | ✓ | | Tables | ✓ | ```js const slides = parse(markdown); ```Images
A standalone Markdown image is ordinary content.
@imgturns the following image into a media block with a ratio and shape:<!-- @img 16:9 rounded --> Ratio is
WIDTH:HEIGHT; shape isrounded,square, orcircle. Both are optional.Relative paths resolve against the Markdown file's own URL when the deck was opened with
?src=. For decks opened from a local file there is no base address, so use absolute URLs for images.YouTube, QR codes, and draw.io
Each of these consumes the next Markdown link:
<!-- @youtube autoplay on muted on volume 5 --> [Demo](https://youtu.be/VIDEO_ID?t=1m30s) <!-- @qr --> [Open the deck](https://example.com/deck.md) <!-- @drawio --> [Architecture](./diagrams/architecture.drawio)@youtubesupportsautoplay,muted, andvolumelike@sound. Atorstartparameter in the URL sets the start time.@qrrenders a clickable QR code for the link.@drawiorenders a diagrams.net file.@qrand@drawiocan instead take adatafenced block:<!-- @qr --> ```data BEGIN:VCARD VERSION:3.0 FN:Example END:VCARD ```Gallery
A gallery consumes the following contiguous Markdown list of images and plays them as a timed slideshow:
<!-- @gallery 4s rows-2 --> -  6s -  -  3sThe first duration is the default (
5sif omitted,60smaximum). Individual images may override it.rows-Nrequests 1–12 rows; up to 100 images are supported.Cover, contain, and float
@coverand@containmake a panel's first supported block fill the panel, removing the normal padding. They go at the beginning of the panel next to its background directives.<!-- @cover --> # Title stays normal content @coverfills the panel and crops if needed.@containfills the panel without cropping, ideal for diagrams and SVG.Supported targets: images, tables, fenced code blocks, and
@img,@youtube,@qr,@gallery,@callout,@spaceblocks. Only the first@coveror@containin a panel counts.@floatpushes a block to one side so text flows next to it:<!-- @float right 40% 3 --> <!-- @img rounded -->  This text flows beside the image.Syntax:
@float left|right WIDTH [GAP]whereWIDTHis a percentage andGAPis in units of 1% of the slide width.Callouts
The Obsidian-style form:
The directive form, with an optional heading and at least one quoted line:
<!-- @callout warning --> # Attention > Highlighted content. > It may span several lines.Built-in types:
info,tip,success,warning,danger,error,question,quote,love,like,dislike.Formulas
A
$$pair on their own lines renders a KaTeX display formula:$$ \sum_{i=1}^{n} i = \frac{n(n+1)}{2} $$Mermaid diagrams
A fenced block with language
mermaidrenders as a diagram:```mermaid flowchart LR A[Idea] --> B[Plan] --> C[Launch] ```Keep diagrams small and labels short; the slide is read from a distance.