# md2slides Markdown — llms-full.txt > md2slides turns one Markdown file into a slide deck. This file teaches an LLM the complete syntax. Output ONLY the Markdown file — no prose, no code fences around the whole deck. ## File structure 1. Optional front-matter at the very top, between two `---` lines, `key: value` per line. 2. Slides separated by a line containing only `---`. 3. Inside a slide: optional directive comment, kicker, title, then blocks. ``` --- title: Deck title theme: zinc # zinc | slate | stone | night mode: dark # dark | light (slides only) accent: #60a5fa # any hex bg: mesh # solid | gradient | mesh | grid | dots | spotlight font: geist # geist | grotesk | plex | editorial | mono glass: true # frosted cards radius: 12 # 0–30 density: normal # compact | normal | roomy aspect: 16:9 # 16:9 | 4:3 | 1:1 titleScale: 1 # 0.6–1.8 bodyScale: 1 # 0.7–1.6 transition: fade # see Motion animate: fade-up # see Motion stagger: 90 # ms between block animations footer: Acme · Confidential nums: true # slide numbers bar: false # accent bar on top version: 4.2 # any other key becomes a variable → ${version} --- ``` ## Slide text - `^ Kicker` — small uppercase eyebrow above the title. - `# Title` — the slide title (first `#` or `##` in the slide). - `### Heading` — sub-heading block inside the slide. - A plain line right after the title becomes the subtitle/body; later plain lines are paragraphs. - `${name}` — inserts a front-matter variable. - `Note: …` — speaker notes; everything after it until the next `---` is notes. - `|||` on its own line — column break. Blocks after it go in the next column (max 3). ## Slide directives One HTML comment line at the top of a slide, `key: value` pairs separated by `;`: ``` ``` - layout: left | center | statement - bg: hex, CSS gradient, or image URL (darkened automatically) - color / titleColor / accent: hex - align: left | center | right - pad: "vertical horizontal" in cqw (e.g. `4 6`) - titleSize: number in cqw (2–10) ## Blocks ### Lists ``` - Bullet - [x] Done item (checklist) - [ ] Todo item 1. Numbered ``` Style a list with a fence: `:::list style=dot|check|number|boxed` … `:::` ### Cards ``` :::cards style=grid cols=3 - icon | Title | Description ::: ``` style: grid | glass | outline | numbered | iconLeft | accent. cols: 1–4. icon: any Phosphor icon name without `ph-` (lightning, rocket, lock, users, chart-line-up, git-branch, database, globe, shield-check, code, sparkle, bug, check, warning, clock, target, heart, paint-brush…). ### Stats ``` :::stats style=boxed - 42% | Label | +5% ::: ``` style: boxed | plain | bar | big. Third cell (delta) is optional. ### Diagrams ``` :::flow style=pipeline - icon | Step | detail ::: ``` style: pipeline (left→right boxes with arrows) | steps (numbered) | stack (layers). ### Timeline ``` :::timeline style=h - Q1 | Shipped thing - Q3 | Planned thing? ::: ``` style: h | v. A trailing `?` marks a future/unfinished item. ### Code ```` ```ts file.ts {2,4-5} const a = 1 ``` ```` Language, optional filename, optional highlighted lines in `{}`. Add `nochrome` after the filename to hide the header. ### Terminal ``` :::terminal zsh $ command output line ::: ``` ### Table ``` | Col | Col | |---|---| | a | **bold** | ``` ### Callout `> [!NOTE] text` — NOTE | TIP | WARNING | DANGER | SUCCESS ### Quote ``` > The quote text. — Author ``` ### Image `![alt](url){w=60 h=30 fit=contain r=0 pos=top filter=grayscale ar=4:3}` — empty url shows a placeholder. All attributes optional. ### Chart ``` :::chart style=column 2.8M - Label | 42 ::: ``` style: column | bar | line | donut | pie | rings. Text after the style (e.g. `2.8M`) is the donut centre label. Rings read values as percent. ### Gallery ``` :::gallery style=grid - https://…/a.jpg | Caption - | Placeholder caption ::: ``` style: grid | strip | circles | mosaic. ### More diagrams `:::flow` also accepts style=hub (first row is the centre), cycle, funnel, pyramid. ### Mermaid A ```mermaid fence is rendered as a real Mermaid diagram, themed to the deck (colours, font, dark/light). Every Mermaid diagram type works: flowchart, sequenceDiagram, classDiagram, stateDiagram-v2, erDiagram, gantt, pie, mindmap, timeline, gitGraph, journey, quadrantChart, xychart-beta, sankey-beta. Keep one diagram per slide with at most ~12 nodes; a diagram is never split across continuation slides. ### Code walkthroughs - Click steps: ```ts file.ts {2|3-4|all} — each `|` group is one click while presenting; other lines dim. - Magic move: add `magic` after the filename on consecutive slides — lines that are new vs the previous slide animate in. - Import from repo: `<<< @/src/file.ts#L3-12 {2|4} magic` pulls lines from the connected repository. ### Inline formatting `**bold**`, `*italic*`, `` `code` ``, `==highlight==`, `~~strike~~`, `[link](url)`, `:icon-name:` (Phosphor) work in titles, bullets, cards, paragraphs and callouts. ## Developer blocks (Wasm-powered) ### Math — LaTeX formulas via KaTeX ``` :::math E = mc^2 ::: ``` Block display by default. `style=inline` for inline sizing. LaTeX is never variable-substituted — write raw LaTeX. Use standard LaTeX syntax: `\frac{a}{b}`, `\sum_{i=0}^{n}`, `\int_0^\infty`, `\alpha \beta \gamma`, `\begin{pmatrix}...\end{pmatrix}` etc. ``` :::math style=block \hat{\sigma}^2 = \frac{1}{n-1}\sum_{i=1}^{n}(x_i - \bar{x})^2 ::: ``` ### CSV — structured data tables and charts First row is the header. Columns separated by commas. Quoted fields with embedded commas are supported. ``` :::csv style=table Name,Latency,P99 API Gateway,12ms,45ms Worker (Wasm),3ms,8ms Lambda@Edge,28ms,110ms ::: ``` style: `table` (default) | `bar` (horizontal bars) | `column` (vertical bars) | `line` (line chart). Multi-series: add extra numeric columns — each gets its own colour. ``` :::csv style=column Quarter,Revenue,Costs Q1,1.2M,0.8M Q2,1.8M,0.9M Q3,2.4M,1.1M Q4,3.1M,1.3M ::: ``` ### Counter — animated counting numbers Rows: `value | Label | Sublabel`. Value supports prefix (`$`, `€`) and suffix (`%`, `ms`, `K`, `M`). ``` :::counter 99.99% | Uptime | Last 12 months 3ms | P99 Latency | Global median 2.4M | Requests/day | Peak load ::: ``` style: `up` (default — smooth count-up) | `flip` (digit-flip animation). ``` :::counter style=flip $4.2M | ARR | Annual run rate ::: ``` ### Anim — built-in animations with Tailwind CSS customization Dynamic interactive animations for text, cards, and hero elements. ``` :::anim style=typewriter speed=fast loop=true Build hyper-speed presentations with Rust and Tailwind CSS. ::: ``` Styles: - `typewriter`: Character-by-character typewriter with blinking cursor. - `shimmer` / `glow`: Radiant moving metallic / aurora light beam across glass cards. - `stagger` / `cascade`: Cards/items animate in sequentially with smooth slide + fade. - `gradient` / `aurora`: Moving multi-color aurora gradient text and backgrounds. - `float` / `levitate`: Continuous smooth floating bobbing wave. - `pulse` / `radar`: Expanding pulse aura for live status / beacons. - `wave`: Kinetic wave motion across words/letters. - `bounce` / `pop`: Springy pop-in entrance. - `flip`: 3D perspective card flip. Customization & Tailwind CSS: - `template=...`: `hero`, `neon`, `glass`, `badge`, `minimal`, `gradient-card` - `class="..."` or `className="..."`: Full Tailwind CSS utility classes (e.g. `class="p-6 rounded-2xl bg-indigo-950 border border-indigo-500 text-white font-bold"`) - `speed=...`: `fast`, `normal`, `slow` or number in ms - `cols=...`: number of columns for grid cards - `loop=true|false`: repeat animation Example with Tailwind CSS and Stagger: ``` :::anim style=stagger cols=3 class="gap-4" - rocket | Extreme Speed | 0.2ms compile time - shield-check | Type-Safe | Memory safe WebAssembly - paint-brush | Styled | Tailwind CSS presets ::: ``` Use `` to render a slide with a community/code template. The slide Markdown fills its slots: title, kicker, body, image (from `image:` directive or first image), code (first code block) and items (rows of the first block: icon | title | text). Built-in ids: hero-split, bento, metric-wall. ## Media layouts `` — image-left | image-right | image-full | image-top | diagonal | circle | arch. Empty image = placeholder. ## Presenting - `clicks: true` (front-matter or slide directive) reveals blocks one per → press. - `` scales dense slides. - `` imports another file's slides (relative to this file). - `logo: ACME` front-matter adds a brand mark top-right. - Presenter keys: → next/reveal, O overview grid, D pen, C clear, L laser, B blackout, F fullscreen, Z zoom, T strip. - Export: toolbar PDF button prints one slide per page. ## Motion transition (between slides): none, fade, slide, slide-right, slide-up, slide-down, push, zoom, zoom-out, flip, flip-x, cube, swing, rotate, skew, drop, blur, wipe, wipe-up, iris, glitch. animate (blocks entering): none, fade, fade-up, fade-down, zoom-in, slide-left, blur-in, pop. ## Writing rules for good decks - One idea per slide. Titles are short claims (≤ 8 words), not topics. - Max ~3 blocks per slide; prefer one strong block. - 3–4 cards or stats per row; bullets ≤ 5, each ≤ 10 words. - Open with a title slide (kicker + title + one-line subtitle, ``), close with a quote or statement slide. - Use variables for repeated facts (product name, version). - Add `Note:` speaker notes on content slides. - Never invent block types or styles not listed here. ## Example ``` --- title: Launch product: Relay bg: mesh transition: zoom --- ^ Introducing # ${product} Presentations as code. --- # Why teams switch :::cards style=accent - git-diff | Reviewable | Every change is a PR - code | Developer-first | Markdown and variables - paint-brush | Themeable | One file, any brand ::: Note: Pause after the first card. --- > Make the change easy, then make the easy change. — Kent Beck ```