# Reveal Slides > Create self-contained presentation decks as a single HTML file using reveal.js 6, exported to real vector PDFs (selectable text, embedded fonts, no black bars) via html2realpdf — both loaded from pinned jsDelivr URLs. Use when the agent must build slides, a deck, a slide deck, a keynote-style presentation, speaker slides, a webinar deck, a training support, or a pitch; author slides in HTML or Markdown with syntax-highlighted code, speaker notes, fragments, auto-animate, and a one-click dark/light theme toggle; or export the deck to a clean one-slide-per-page PDF containing only the slides. Déclenche aussi en français pour créer un diaporama, une présentation, des slides, un deck, un support de formation ou de conférence, un pitch ; écrire les slides en HTML ou Markdown avec coloration de code et notes, bascule de thème sombre/clair ; ou exporter un PDF vectoriel propre avec une slide par page, texte sélectionnable, via html2realpdf. - Skill: `krkn-s/reveal-slides` (Agent Skill, multi-file: 5 files) - Install (CLI): `npx skillmds@latest add krkn-s/reveal-slides` - Raw SKILL.md: https://api.skillmd.com/api/skills/krkn-s/reveal-slides/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: krkn-s (https://skillmd.com/u/krkn-s) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/krkn-s/reveal-slides --- # Reveal Slides Build a **single self-contained HTML file** that runs a reveal.js presentation in the browser and exports a **real vector PDF** (one slide per page, selectable text) via html2realpdf. Both libraries are loaded from pinned jsDelivr URLs so the file has no build step and no local dependencies — only an internet connection. ## Pinned Versions (single source of truth) Pin to these exact versions. When the skill is updated, update both the version here, the CDN URLs, and the references in lockstep. ``` REVEAL_JS = 6.0.1 # https://github.com/hakimel/reveal.js HTML2REALPDF = 0.1.13 # https://github.com/imggion/html2realpdf ``` **jsDelivr base URLs:** - `https://cdn.jsdelivr.net/npm/reveal.js@6.0.1/` - `https://cdn.jsdelivr.net/npm/@imggion/html2realpdf@0.1.13/` Always emit the `@` segment. Never use `@latest` or omit it — the skill is documented against these specific releases. ## Architecture - **reveal.js** renders the live deck (keyboard nav, transitions, speaker view). CSS from `dist/reveal.css` + a theme; JS from `dist/reveal.mjs` + plugins. - **html2realpdf** renders the deck DOM to a real PDF in the browser (Zig → WebAssembly). It does its **own** snapshot + layout (cssProfile `web`), so we feed it a clean stacked export container, not the live transformed `.reveal`. - **One slide per page** is achieved with `pageBreak: { after: ".slide" }` + a 16:9 custom page. No browser print dialog, no screenshots, no black bars. ## Core Workflow 1. **Single file.** Emit one `.html` file. Put all CSS in ``, all JS in one ` ``` ## Export: why a stacked container (not the live `.reveal`) reveal.js applies 3D transforms and shows one slide at a time; html2realpdf would capture those transforms. So `exportDeckToPdf()` clones each slide's **innerHTML** into a clean `#deck-export` container (off-screen), strips speaker notes, and lets html2realpdf lay it out fresh with the `web` profile. The export `.slide` rules mirror the `--r-*` theme so the PDF matches the live look. - **Page = 16:9** (`[297, 167.0625] mm`, margin 0) → no letterboxing, each slide fills a page. - **One slide per page** via `pageBreak: { after: ".slide" }` + `break-after: page`. - **Selectable text** — html2realpdf keeps text as text, fonts as subsets, links as annotations. - **`cssProfile: "web"` is mandatory** for slides (the default `document` profile rejects positioned/floated/transformed layout). Limitations to tell the user about: reveal `data-background` slide backgrounds are **not** cloned (they live outside `

`); add an explicit background to the export `.slide` if needed. Fragments appear **fully revealed** in the PDF (there is no animation). Speaker notes are stripped from the export. For the full option matrix and edge cases, load `references/export-pdf.md` and `references/html2realpdf.md`. ## Theme **Always load a built-in reveal theme.** Without one, `reveal.css` applies no background or typography defaults → the deck renders with a white background and unstyled text. The skeleton loads `black.css` (dark, polished, the reveal reference look): ```html ``` Available themes: `black`, `white`, `beige`, `league`, `sky`, `night`, `serif`, `simple`, `solarized`, `blood`, `moon`, `dracula`, `black-contrast`, `white-contrast`. **Customize via `--r-*` overrides** in a `:root` block loaded *after* the theme (keep the theme; just retune). The themes define these variables, which reveal.css consumes — so layout stays correct while you restyle: `--r-background-color`, `--r-main-color`, `--r-heading-color`, `--r-link-color` (+ `-hover`), `--r-main-font`, `--r-heading-font`, `--r-main-font-size`, `--r-block-margin`, `--r-heading-line-height`, `--r-code-font`. The export container mirrors these too, so the PDF matches the live look. If you switch themes, do a quick PDF export check and port that theme's `--r-*` values into the export `