菜单
Use when creating or updating presentation decks with reveal.js, including setup, slide authoring, plugins, animation, navigation, and export.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
| name | slides-revealjs |
| description | Use when creating or updating presentation decks with reveal.js, including setup, slide authoring, plugins, animation, navigation, and export. |
This skill guides AI to create and update reveal.js slides quickly and reliably. Prefer documented reveal.js capabilities over guessed APIs, config keys, or plugin behavior.
.reveal > .slides > section.hash, slideNumber, autoSlide, view: 'scroll'.<html>
<head>ex
<link rel="stylesheet" href="dist/reveal.css" />
<link rel="stylesheet" href="dist/theme/solarized.css" />
<link rel="stylesheet" href="plugin/highlight/zenburn.css" />
</head>
<body>
<div class="reveal">
<div class="slides">
<section>Slide 1</section>
<section>
<section>Vertical 1</section>
<section>Vertical 2</section>
</section>
</div>
</div>
<script src="dist/reveal.js"></script>
<script src="plugin/markdown/markdown.js"></script>
<script src="plugin/highlight/highlight.js"></script>
<script src="plugin/notes/notes.js"></script>
<script>
Reveal.initialize({
hash: true,
slideNumber: 'c/t',
plugins: [RevealMarkdown, RevealHighlight, RevealNotes],
});
</script>
</body>
</html>
import Reveal from 'reveal.js';
import Markdown from 'reveal.js/plugin/markdown/markdown.esm.js';
import Highlight from 'reveal.js/plugin/highlight/highlight.esm.js';
import Notes from 'reveal.js/plugin/notes/notes.esm.js';
import 'reveal.js/dist/reveal.css';
import 'reveal.js/dist/theme/white.css';
const deck = new Reveal({
hash: true,
slideNumber: 'c/t',
plugins: [Markdown, Highlight, Notes],
});
await deck.initialize();
<section data-markdown>
<textarea data-template>
## Slide 1
---
## Slide 2
</textarea>
</section>
data-line-numbers plus step highlights via |.RevealMath.KaTeX by default (or MathJax when required).S for presenter view.<section data-auto-animate> and data-id for precise matching.data-background-* (color/image/video/iframe).view: 'scroll' with optional scrollSnap and scrollLayout.?print-pdf then browser print to PDF.The items below should be preferred in this skill.
Before creating any presentation, analyze the content and choose design elements intentionally:
Required behavior:
Arial, Helvetica, Georgia, Verdana, etc.) or Google Fonts via @import.pt units for font sizes in slide CSS/inline styles. Never use em, rem, or px for font-size values.Choose colors creatively based on the actual content:
Palette references (adapt freely or create your own):
#1C2833, slate gray #2E4053, silver #AAB7B8, off-white #F4F6F6#5EA8A7, deep teal #277884, coral #FE4447, white #FFFFFF#C0392B, bright red #E74C3C, orange #F39C12, yellow #F1C40F, green #2ECC71#A49393, blush #EED6D3, rose #E8B4B8, cream #FAF7F2#5D1D2E, crimson #951233, rust #C15937, gold #997929#B165FB, dark blue #181B24, emerald #40695B, white #FFFFFF#FFE1C7, forest green #40695B, white #FCFCFC#F8275B, coral #FF574A, rose #FF737D, purple #3D2F68#C5DE82, plum #7C3A5F, coral #FD8C6E, blue-gray #98ACB5#BF9A4A, black #000000, cream #F4F6F6#87A96B, terracotta #E07A5F, cream #F4F1DE, charcoal #2C2C2C#292929, red #E33737, light gray #CCCBCB#F96D00, light gray #F2F2F2, charcoal #222831#191A19, green #4E9F3D, dark green #1E5128, white #FFFFFF#722880, pink #D72D51, orange #EB5C18, amber #F08800, gold #DEB600#E3B448, sage #CBD18F, forest green #3A6B35, cream #F4F1DE#AD7670, beaver #B49886, eggshell #F3ECDC, ash gray #BFD5BE#FC993E, grayish turquoise #667C6F, white #FCFCFCEven when slides share similar content types, avoid repeating the same visual pattern.
<strong>, color emphasis, type scale, spacing rhythm).Run this before considering a deck "done":
solarized theme).Use an explicit first <section> as a title slide and style it with reveal data attributes.
<section
id="title-slide"
data-background-image="./img/background.jpg"
data-background-size="cover"
data-background-opacity="0.9"
>
<h1>My Slide Show</h1>
</section>
Use CSS classes plus the slidechanged event.
Add a persistent logo element in your HTML, e.g. <img class="slide-logo" src="./images/my-logo.svg" alt="Logo" />.
.reveal .slide-logo {
position: fixed;
display: block;
max-width: none !important;
}
.reveal .slide-logo-bottom-right {
right: 12px !important;
bottom: 0 !important;
left: auto !important;
max-height: 2.2rem !important;
}
.slide-logo-max-size {
top: 5px;
left: 12px;
right: auto !important;
bottom: auto !important;
height: 100px !important;
max-height: none !important;
}
function syncLogoForSlide(currentSlide) {
const logos = document.querySelectorAll('.slide-logo');
const onTitle = currentSlide && currentSlide.id === 'title-slide';
logos.forEach((el) => {
el.classList.toggle('slide-logo-max-size', onTitle);
el.classList.toggle('slide-logo-bottom-right', !onTitle);
});
}
Reveal.on('ready', (event) => syncLogoForSlide(event.currentSlide));
Reveal.on('slidechanged', (event) => syncLogoForSlide(event.currentSlide));
cover vs contain)cover fills the slide and may crop. contain preserves the entire image.
<section data-background-image="images/2024.jpg" data-background-size="cover"></section>
<section data-background-image="images/2024.jpg" data-background-size="contain"></section>
slide-level)Pure reveal.js does not use Pandoc slide-level. Control structure explicitly:
<section> per slide, nested <section> for vertical slides.---, --) to split slides.Quarto's from: markdown+emoji is not a reveal.js feature. In reveal.js:
r-fit-text and r-stretch are reveal classes and work directly.
<section>
<div class="r-fit-text">Big Text</div>
</section>
<section>
<p>Here is an image:</p>
<img class="r-stretch" src="image.webp" alt="Demo image" />
<p>Some text after the image.</p>
</section>
<section>
<h2>It's a candy dog</h2>
<p style="font-size: 44pt; color: #75aadb;">Would you like to see a candy dog?</p>
<img class="fragment fade-up" src="./images/dog.webp" alt="Candy dog" />
</section>
Quarto ::: columns is not native reveal syntax. Use HTML/CSS layout wrappers.
<section>
<div class="cols">
<div class="col col-70"><img src="./images/image_1.webp" alt="Left" /></div>
<div class="col col-30">
<img src="./images/image_2.webp" alt="Right top" />
<img src="./images/image_3.webp" alt="Right bottom" />
</div>
</div>
</section>
.reveal .cols {
display: flex;
gap: 1.5rem;
align-items: flex-start;
}
.reveal .col-70 { flex: 0 0 70%; }
.reveal .col-30 { flex: 0 0 30%; }
For 4 quadrants, use a 2x2 CSS grid and reveal each cell with fragment classes (fade-in-then-semi-out or similar).
==text== -> <mark>text</mark>)function convertMarkedTextInSlide(slide) {
if (!slide) return;
slide.innerHTML = slide.innerHTML.replace(/==([^=]+)==/g, '<mark>$1</mark>');
}
Reveal.on('ready', (event) => convertMarkedTextInSlide(event.currentSlide));
Reveal.on('slidechanged', (event) => convertMarkedTextInSlide(event.currentSlide));
In reveal markdown, use inline HTML for precise text styling:
<p>
Make this <span style="color: red;">red</span> and this
<span style="background: yellow;">highlighted</span>.
</p>
Load custom CSS in static HTML:
<link rel="stylesheet" href="./assets/custom.css" />
Or import it in ESM:
import './assets/custom.css';
Reveal core does not auto-generate Quarto callouts/captions, but many pipelines output similar markup:
.reveal p.caption,
.reveal figcaption {
display: none;
}
.reveal .callout-title {
display: none;
}
<section><section>Child</section></section>).navigationMode: 'default' | 'linear' | 'grid'.id and enable hash: true.data-menu-title.slideNumber: 'c/t'.<aside class="notes">...</aside> and press S.Esc.<section id="intro" data-menu-title="Introduction">
<h2>Intro</h2>
<aside class="notes">Presenter-only notes</aside>
</section>
Reveal.initialize({
hash: true,
slideNumber: 'c/t',
navigationMode: 'default',
plugins: [RevealNotes],
});
Do not start from random colors and utility classes. Define a single visual direction (for example: editorial, brutalist, retro-futuristic, luxury minimal, playful) and keep every design decision aligned with it.
Practical rule:
Create a token layer first, then style components/slides with those tokens.
:root {
--deck-bg: #f6f3ea;
--deck-surface: rgba(255, 255, 255, 0.72);
--deck-text: #1b1a18;
--deck-accent: #c0392b;
--deck-muted: #6f6a61;
--deck-shadow: 0 20px 50px rgba(20, 16, 10, 0.18);
--deck-radius: 18px;
--deck-gap: 1.2rem;
}
.reveal {
color: var(--deck-text);
background:
radial-gradient(circle at 12% 18%, rgba(192, 57, 43, 0.12), transparent 45%),
radial-gradient(circle at 88% 82%, rgba(27, 26, 24, 0.1), transparent 42%),
var(--deck-bg);
}
Use a distinctive display face for headings and a separate body face for text-heavy slides. Define consistent scale and line length.
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:opsz@9..40&family=Manrope:wght@400;500;700;800&display=swap');
.reveal {
font-family: 'Manrope', 'Helvetica Neue', Arial, sans-serif;
}
.reveal h1,
.reveal h2,
.reveal h3 {
font-family: 'DM Serif Display', Georgia, 'Times New Roman', serif;
letter-spacing: 0.01em;
line-height: 1.05;
}
.reveal p,
.reveal li {
line-height: 1.45;
max-width: 58ch;
}
A strong deck usually has:
.reveal a,
.reveal strong,
.reveal mark {
color: var(--deck-accent);
}
.reveal mark {
background: transparent;
border-bottom: 0.2em solid color-mix(in srgb, var(--deck-accent) 35%, transparent);
padding: 0 0.08em;
}
Avoid plain single-color canvases by default. Add depth with subtle gradients, textures, overlays, or layered shadows that match the chosen aesthetic.
.reveal .panel {
background: var(--deck-surface);
border: 1px solid rgba(255, 255, 255, 0.5);
border-radius: var(--deck-radius);
box-shadow: var(--deck-shadow);
backdrop-filter: blur(6px);
padding: calc(var(--deck-gap) * 1.2);
}
In reveal.js, prioritize:
fade-up, fade-in, zoom-in fragments with stagger).Reveal.initialize({
transition: 'slide',
backgroundTransition: 'fade',
autoAnimateEasing: 'ease-out',
autoAnimateDuration: 0.6,
});
<section>
<h2 class="fragment fade-in">Problem</h2>
<p class="fragment fade-up">Constraint</p>
<p class="fragment fade-up">Decision</p>
<p class="fragment fade-up">Outcome</p>
</section>
Avoid centering everything. Mix alignment, width, overlap, and whitespace intentionally.
.reveal .asym {
display: grid;
grid-template-columns: 1.2fr 0.8fr;
gap: 2rem;
align-items: end;
}
.reveal .asym .media {
transform: translateY(1rem);
}
Before shipping, quickly verify:
For system overviews, sequence explanations, data flow, and decision logic, use Mermaid slides first. This usually communicates structure faster than dense bullet lists.
<section>
<h2>Architecture</h2>
<pre class="mermaid">
flowchart LR
Client["Client"] -->|HTTPS| API["API Gateway"]
API --> Service["Application Service"]
Service --> DB["PostgreSQL"]
Service --> Queue["Background Queue"]
Queue --> Worker["Worker"]
</pre>
</section>
If Mermaid plugin setup is needed:
Reveal.initialize({
hash: true,
plugins: [RevealMermaid],
});
Use this decision rule:
A -> B -> C -> D), prefer HTML/CSS step cards because they fill slide space better and are easier to style at presentation scale.When turning a plan/spec/review into slides:
If one source section has high density, split into multiple slides instead of compressing into unreadable bullets.
Build deck rhythm with explicit slide roles, not repeated generic content slides:
Title for opening tone.Divider between major topics.Content for explanation.Split for comparison (before/after, text+diagram, problem/solution).Diagram for structure/flow.Dashboard for metrics/KPIs.Table for compact factual comparison.Code for implementation detail.Quote for emphasis.Full-bleed for key visual moments.Avoid long runs of the same archetype.
Alternate spatial compositions through the sequence:
Rule of thumb: do not use 3 consecutive slides with the same composition pattern.
Use these limits by default:
If limits are exceeded, split into additional slides instead of shrinking text.
Slides are not documents; scale text for screen-share/projector readability:
48-120px28-48px16-24px10-14pxAlways prioritize readability from distance over document-like density.
new Reveal(rootEl, config) with embedded: true.destroy() on unmount.::: columns, ::: notes, slide-level, markdown+emoji, callout blocks).solarized theme for default/light-tone decks unless user requirements explicitly call for another theme..reveal or a slide-level class and verify impact scope (what selectors will match, which slides/components are affected).section, fragments, built-in navigation) instead of copying unrelated runtime architecture.hash, slideNumber, autoSlide, touch).solarized unless requirements explicitly override it.| Topic | Description | Reference |
|---|---|---|
| Home | Entry page for reveal.js docs, covering core concepts and navigation to all major guides. | Home |
| Course | A structured tutorial path that teaches reveal.js basics step by step. | Course |
| Installation | Explains how to install reveal.js in different environments and project setups. | Installation |
| Topic | Description | Reference |
|---|---|---|
| Markup | Shows the core HTML slide structure and how nested sections define navigation. | Markup |
| Markdown | Describes writing slides in Markdown and configuring the Markdown plugin. | Markdown |
| Backgrounds | Documents slide background options such as color, image, video, and iframe. | Backgrounds |
| Media | Covers embedding and controlling media content inside slides. | Media |
| Lightbox | Explains how to present media in an enlarged lightbox-style experience. | Lightbox |
| Code | Introduces code block rendering and syntax highlighting patterns for slides. | Code |
| Math | Shows how to render mathematical formulas with KaTeX or MathJax integrations. | Math |
| Fragments | Describes progressive reveal effects to show slide elements in sequence. | Fragments |
| Links | Explains internal and external linking behavior in reveal.js presentations. | Links |
| Layout | Covers layout techniques to organize content cleanly within each slide. | Layout |
| Slide Visibility | Describes controls for showing, hiding, or excluding specific slides. | Slide Visibility |
| Topic | Description | Reference |
|---|---|---|
| Themes | Explains built-in themes and how to style presentations with custom theming. | Themes |
| Transitions | Documents slide and element transition effects and their configuration. | Transitions |
| Config Options | Full reference for initialization and runtime configuration settings. | Config Options |
| Presentation Size | Shows how to control deck dimensions, scaling behavior, and responsive sizing. | Presentation Size |
| Topic | Description | Reference |
|---|---|---|
| Vertical Slides | Explains vertical stacks for subtopics under a horizontal slide flow. | Vertical Slides |
| Auto Animate | Describes automatic tweening between similar elements across adjacent slides. | Auto Animate |
| Auto Slide | Covers timed autoplay behavior and controls for automatic slide progression. | Auto Slide |
| Speaker View | Shows presenter tools, notes view, and speaker-screen workflow. | Speaker View |
| Scroll View | Explains continuous scroll-based presentation mode and related settings. | Scroll View |
| Slide Numbers | Documents numbering formats and display options for slide counters. | Slide Numbers |
| Jump to Slide | Shows how to quickly navigate to a specific slide during presentation. | Jump to Slide |
| Touch Navigation | Describes gesture and touch interactions on mobile and touch devices. | Touch Navigation |
| PDF Export | Explains the print-to-PDF workflow and export-specific adjustments. | PDF Export |
| Overview Mode | Documents the zoomed overview interface for fast deck navigation. | Overview Mode |
| Fullscreen Mode | Covers fullscreen presentation behavior and toggling options. | Fullscreen Mode |
| Topic | Description | Reference |
|---|---|---|
| Initialization | Explains deck bootstrapping, config injection, and startup lifecycle. | Initialization |
| API Methods | Reference for imperative methods used to control reveal.js programmatically. | API Methods |
| Events | Lists emitted events and shows how to listen for deck state changes. | Events |
| Keyboard | Documents keyboard shortcuts and custom key-binding configuration. | Keyboard |
| Presentation State | Explains capturing, restoring, and sharing presentation state data. | Presentation State |
| PostMessage | Describes cross-window communication using the postMessage interface. | PostMessage |
| Topic | Description | Reference |
|---|---|---|
| Using Plugins | Shows how to register and configure official or third-party plugins. | Using Plugins |
| Creating Plugins | Guide to authoring custom reveal.js plugins and integrating them safely. | Creating Plugins |
| Multiplex | Explains synchronized multi-client presentations for remote audiences. | Multiplex |
| Topic | Description | Reference |
|---|---|---|
| Animate | Adds SVG.js-based slide animations that can be coordinated with reveal.js flow. | Animate |
| Chart | Integrates Chart.js so presentations can render configurable data charts. | Chart |
| Fullscreen | Provides fullscreen layout behavior to maximize available slide space. | Fullscreen |
| D3 (reveald3) | Embeds JavaScript visualizations (including D3-based content) with fragment-aware transitions. | Reveal.js-d3 (reveald3) |
| Mermaid | Adds Mermaid diagram rendering support directly inside reveal.js slides. | reveal.js-mermaid-plugin |
| Topic | Description | Reference |
|---|---|---|
| React Framework | Covers integration patterns and usage details for reveal.js in React apps. | React Framework |
| Upgrading Instructions | Migration notes for updating reveal.js versions without breaking decks. | Upgrading Instructions |