majiayu000 HTML/reveal.js Content Generation Guide
Create professionally designed HTML presentations and preview them via frago view.
Quick Start
Basic Structure
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Presentation Title</title>
</head>
<body>
<div class="reveal">
<div class="slides">
<section>Slide 1</section>
<section>Slide 2</section>
</div>
</div>
</body>
</html>
Note: frago view automatically injects reveal.js library, no manual inclusion needed.
Trigger Condition
HTML file automatically enters presentation mode when it contains class="reveal" or class="slides".
Preview Commands
frago view slides.html # Default theme
frago view slides.html --theme dracula # Specify theme
frago view slides.html --fullscreen # Fullscreen mode
Available Themes
| Theme | Style | Use Case |
|---|---|---|
black |
Dark background (default) | Technical presentations |
white |
Light background | Formal reports |
dracula |
Dracula color scheme | Developer presentations |
moon |
Dark blue | Night mode |
night |
Dark blue gradient | Tech style |
serif |
Serif font | Academic presentations |
solarized |
Solarized color scheme | Soft style |
blood |
Dark red | Emphasis style |
beige |
Beige | Warm style |
sky |
Blue | Fresh style |
league |
Gray gradient | Business style |
simple |
Simple white | Minimalist style |
Slide Organization
Horizontal Navigation
Each <section> is one slide:
<section>Slide 1</section>
<section>Slide 2</section>
<section>Slide 3</section>
Vertical Navigation (Nested)
Nested <section> creates sub-slides within a section:
<section>
<section>Topic A - Overview</section>
<section>Topic A - Detail 1</section>
<section>Topic A - Detail 2</section>
</section>
<section>
<section>Topic B - Overview</section>
</section>
Common Elements
Headings and Text
<section>
<h1>Main Heading</h1>
<h2>Subtitle</h2>
<p>Body paragraph</p>
</section>
Lists
<section>
<h2>Key Points</h2>
<ul>
<li>Point 1</li>
<li>Point 2</li>
<li>Point 3</li>
</ul>
</section>
Code Blocks
<section>
<h2>Code Example</h2>
<pre><code class="language-python">
def hello():
print("Hello, World!")
</code></pre>
</section>
Images
<section>
<h2>Architecture Diagram</h2>
<img src="./images/architecture.png" alt="Architecture diagram">
</section>
Fragment Animations
class="fragment" makes elements appear progressively:
<p class="fragment">First step appears</p>
<p class="fragment">Second step appears</p>
<p class="fragment fade-up">Slide up and fade in</p>
<p class="fragment highlight-red">Highlight in red</p>
Animation Types:
| Type | Effect |
|---|---|
fade-in |
Fade in |
fade-out |
Fade out |
fade-up |
Slide up and fade in |
fade-down |
Slide down and fade in |
fade-left |
Slide left and fade in |
fade-right |
Slide right and fade in |
highlight-red |
Highlight in red |
highlight-green |
Highlight in green |
highlight-blue |
Highlight in blue |
grow |
Grow |
shrink |
Shrink |
Keyboard Shortcuts
| Shortcut | Function |
|---|---|
→ / Space |
Next slide |
← |
Previous slide |
↑ / ↓ |
Vertical navigation |
F |
Fullscreen |
Esc |
Exit fullscreen / Overview |
O |
Slide overview |
S |
Speaker notes |
Multi-Page PPT Collaboration Workflow
Phase 1: Planning
Confirm with user:
- Presentation theme and target audience
- Section outline
- Type and core information for each slide
Phase 2: Skeleton Generation
Create basic structure and output directory:
outputs/presentation/
├── slides.html # Main file
└── images/ # Images directory
Phase 3: Slide-by-Slide Design
Iterative workflow:
- User provides core content for current slide
- Agent generates HTML + CSS
- User previews:
frago view slides.html - User provides feedback for adjustments
- Move to next slide when satisfied
Phase 4: Overall Optimization
- Check slide transitions
- Unify visual style
- Add fragment animations
- Final preview confirmation
Template Library
| Template | Purpose | Path |
|---|---|---|
| Basic skeleton | Quick start | templates/basic-structure.html |
| Cover slide | Opening | templates/cover-slide.html |
| Content slide | Body content | templates/content-slide.html |
| Comparison slide | Comparison | templates/comparison-slide.html |
| Timeline slide | Timeline | templates/timeline-slide.html |
| Closing slide | Ending | templates/closing-slide.html |
Design Pitfalls
| Pitfall | Reason | Alternative |
|---|---|---|
| Too much text | Slides are not documents | Extract keywords |
| External CDN | Not available offline | Local resources |
| iframe embedding | Security restrictions | Screenshots |
| Complex JavaScript | pywebview limitations | CSS implementation |
References
- REFERENCE.md - Advanced CSS techniques + pywebview limitations
- reveal.js Official Documentation