Slides and panels
Directives
A directive is an HTML comment on its own line:
<!-- @directive arguments -->
Rules:
- Write spaces just inside the delimiters (
<!-- @note -->). The compact form <!--@note--> is still accepted.
- A directive is only recognised on its own line and never inside a fenced code block.
- An invalid directive is left alone as a hidden HTML comment; it does not break the deck.
Slides
A line containing only --- starts a new slide. A line containing only *** starts a new panel on the current slide. Both are ignored inside fenced code blocks, so you can show a --- in a code sample safely.
# First panel
***
# Second panel
---
# A new slide
A slide can have up to 26 panels (A–Z).
Slide-level directives go at the beginning of the slide, before any panel content. Metadata parsing stops at the first non-empty line that is not a directive.
<!-- @slide Introduction -->
<!-- @layout AB -->
<!-- @slide-theme stone blue gray -->
# Content starts here
@slide TITLE sets the slide's title. The title appears in the editor's slide list and in the phone remote's slide list; the player does not display it. Without @slide, the first heading is used, and failing that Slide N.
Frontmatter
An optional flat block at the very start of the file:
---
title: "Product update"
text-scale: 120%
h1-scale: 150%
h2-scale: 110%
table-scale: 80%
---
title names the presentation in the Recent presentations list. It does not change any slide heading.- Scale keys multiply the built-in typography for every slide:
text-scale, h1-scale–h6-scale, table-scale, code-scale, quote-scale, math-scale.
- Only flat
key: value lines are supported: no nesting, lists, or multiline values.
Grids: @layout and @grid
Panels are placed on a grid described by a string of letters:
<!-- @layout AB/AC -->
AB/AC
+---+---+
| A | B |
+---+---+
| A | C |
+---+---+
- Each letter is one panel, in order of first appearance: the first
***-separated panel is A, the next is B, and so on.
- Repeating a letter merges cells into a rectangle (
A above spans two rows).
/ starts a new row; all rows must have the same length.. is an empty cell.- Every letter must form one contiguous rectangle. Invalid layouts fall back to an automatic grid.
- Maximum 26 rows, columns, and panels.
@layout hides the dividers; @grid shows dashed dividers. Add collapse to reduce the outer and panel padding:
<!-- @layout AA/BC collapse -->
Without any layout, the player picks an automatic grid for the number of panels.
Slides and panels
Directives
A directive is an HTML comment on its own line:
Rules:
<!-- @note -->). The compact form<!--@note-->is still accepted.Slides
A line containing only
---starts a new slide. A line containing only***starts a new panel on the current slide. Both are ignored inside fenced code blocks, so you can show a---in a code sample safely.# First panel *** # Second panel --- # A new slideA slide can have up to 26 panels (
A–Z).Slide metadata
Slide-level directives go at the beginning of the slide, before any panel content. Metadata parsing stops at the first non-empty line that is not a directive.
<!-- @slide Introduction --> <!-- @layout AB --> <!-- @slide-theme stone blue gray --> # Content starts here@slide TITLEsets the slide's title. The title appears in the editor's slide list and in the phone remote's slide list; the player does not display it. Without@slide, the first heading is used, and failing thatSlide N.Frontmatter
An optional flat block at the very start of the file:
--- title: "Product update" text-scale: 120% h1-scale: 150% h2-scale: 110% table-scale: 80% ---titlenames the presentation in the Recent presentations list. It does not change any slide heading.text-scale,h1-scale–h6-scale,table-scale,code-scale,quote-scale,math-scale.key: valuelines are supported: no nesting, lists, or multiline values.Grids:
@layoutand@gridPanels are placed on a grid described by a string of letters:
***-separated panel isA, the next isB, and so on.Aabove spans two rows)./starts a new row; all rows must have the same length..is an empty cell.@layouthides the dividers;@gridshows dashed dividers. Addcollapseto reduce the outer and panel padding:Without any layout, the player picks an automatic grid for the number of panels.