/marp-slides

name: marp-slides
description: Create beautiful MARP presentation decks with SVG charts, interactive elements, dashboard components, animations, dark/light themes. Triggers on 'marp', 'slides', 'presentation', 'deck'.
version: 2.0
updated: 2026-04-08

MARP Slides v2

Prerequisites

• VS Code extension "Marp for VS Code"
• Settings: `markdown.marp.enableHtml: true` + `markdown.marp.allowLocalFiles: true`
• Export: `npx @marp-team/marp-cli slides.md --pdf --allow-local-files`

Example Decks (CRITICAL — read before generating)

The `examples/` folder contains 22 curated reference decks. **Before generating any deck, read 2-3 examples that match the requested style.** These are the quality bar — match their composition, spacing, and visual density. Key examples by category:

| Category | Examples to read | |---|---| | Data / dashboard | `marp_facebook-ads.md`, `marp_fitness.md`, `marp_comparison.md` | | Lifestyle / editorial | `marp_coffee.md`, `marp_wine-tasting.md`, `marp_cocktail.md` | | Guide / how-to | `marp_garden.md`, `marp_houseplant.md`, `marp_home-gym.md` | | Fun / creative | `marp_kids-party.md`, `marp_board-game.md`, `marp_film-director.md` | | Travel / location | `marp_travel.md`, `marp_walking-tour.md`, `marp_road-trip.md` | | Showcase / hero | `marp_hero.md`, `marp_apartment.md`, `marp_wardrobe.md` | | Reference / sampler | `marp_sample.md` (component showcase) |

Core Rules

• Slides separated by `---`
• YAML frontmatter controls theme/pagination/styles
• `enableHtml` unlocks SVG, cards, charts, animations, interactive elements
• Default 16:9 (1280x720)

Dark Starter Template

The dark template uses Outfit 800 for headings and Raleway 100-200 for body text. CSS variables:

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;600;700;800&family=Raleway:wght@100;200;300&display=swap');

:root {
  --accent: #ff6b1a; --accent-hover: #ff8c4a;
  --dark: #000; --card: #080808; --border: #111;
  --body: #999; --label: #666; --muted: #555; --light: #fff;
  --green: #22c55e; --red: #ef4444; --yellow: #f5a623;
}
section { background: var(--dark); color: var(--light); font-family: 'Raleway', sans-serif; font-weight: 200; padding: 56px 72px; }
h1 { font-family: 'Outfit'; font-weight: 800; font-size: 3em; color: var(--light); }
h2 { font-family: 'Raleway'; font-weight: 100; font-size: 1.3em; color: #888; }
h3 { font-family: 'Outfit'; font-weight: 600; font-size: 0.6em; color: var(--muted); text-transform: uppercase; letter-spacing: 0.2em; }
strong { color: var(--accent); font-weight: 300; }
section.lead { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
header { text-align: right; } header img { margin: 0; }
.row:hover { background: #0c0c0c; } .row { transition: background 0.2s; border-radius: 6px; }
details { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 14px 18px; margin-top: 8px; }
details summary { color: var(--accent); font-family: 'Outfit'; font-weight: 600; font-size: 0.8em; cursor: pointer; }
details p { color: var(--body); font-size: 0.78em; margin-top: 8px; }
.tag { font-family: 'Outfit'; font-weight: 600; font-size: 0.55em; letter-spacing: 0.12em; text-transform: uppercase; padding: 3px 10px; border-radius: 4px; }
abbr { text-decoration: none; border-bottom: 1px dotted #333; cursor: help; }

Frontmatter includes: `header: ''`

Light Theme

Swap vars: `--accent: #2563eb; --dark: #fafafa; --card: #fff; --border: #eee; --body: #666; --label: #bbb; --light: #1a1a1a;` Use Space Grotesk + IBM Plex Mono or Plus Jakarta Sans.

Heading Hierarchy

• h1 = title slides (white, extra large)
• h2 = subtitle (grey, thin)
• h3 = section label (muted, uppercase, small)

Font Pairings (Tested)

| Heading | Body | Use | |---|---|---| | Outfit 800 | Raleway 100 | Dashboard, data (default) | | DM Serif Display | DM Sans 300 | Recipes, editorial | | Space Grotesk 700 | IBM Plex Mono 300 | Travel, light themes | | Sora 700 | Sora 200 | Product comparisons | | Urbanist 800 | Urbanist 100 | Music, Spotify-style | | Plus Jakarta Sans 800 | Plus Jakarta Sans 200 | Retros, team decks |

Images

CRITICAL: Relative paths only. `./image.png` works. Absolute paths break in preview.

• Logo header: `header: ''` — hide per slide: `<!-- _header: '' -->`
• Photo bg: ``
• Split: `` or ``
• CDN logos: `<img src="https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/png/name.png" style="width:200px;" />`
• Centered inline: wrap img in `<div style="display:flex; justify-content:center;">` with border-radius and border

Dashboard Components

Metric Card (gradient top border)

Card with `position:relative; overflow:hidden;` and absolute div at top with `background:linear-gradient(90deg, var(--accent), transparent); height:2px;`. Icon + label + big number + trend arrow.

Status Dots

Inline SVG circles: green (#22c55e) = active, yellow (#f5a623) = learning, red (#ef4444) = paused. `<svg width="8" height="8" viewBox="0 0 8 8"><circle cx="4" cy="4" r="4" fill="#22c55e"/></svg>`

Verdict Tags

`<span class="tag" style="background:#22c55e12; color:var(--green); border:1px solid #22c55e22;">Scale</span>` Swap colors for red (kill) and yellow (review).

Hover Rows

Wrap content in `<div class="row">` for hover highlight effect.

SVG Charts

Line / Area Chart

SVG polyline for the line + polygon with linearGradient fill for area under the line. Add grid lines, dashed target line, circle data points. Use viewBox="0 0 900 240" with preserveAspectRatio="none".

Pie / Donut Chart

Each segment = separate circle with stroke-dasharray and stroke-dashoffset. Math: circumference = 2*pi*r. For r=110: ~691. Segment = (pct/100)*691. Offsets accumulate negatively. stroke-width controls ring thickness