Html Slides

作者 claude-office-skills9c4c7d5cd281MIT499 个星标收录于 2026年10月8日更新于 2026年10月8日仓库8个月前更新

仅含说明Documents & Office

AI 生成的概览

生成基于 reveal.js 的 HTML 演示文稿，支持主题、切换、片段动画、代码高亮和演讲者备注。

功能: 该技能产出基于 reveal.js 框架的 HTML 幻灯片。它提供幻灯片结构、嵌套纵向幻灯片、Markdown 幻灯片、主题、切换效果、片段动画、代码高亮、演讲者备注和背景选项的标记写法，以及配置项。最终输出是一个自包含的 HTML 演示文件，通过 CDN 加载 reveal.js。
适用场景: 当你需要网页形式的演示文稿而非 PowerPoint 或 PDF 幻灯片时使用，例如技术分享、代码讲解或产品发布。它适合需要动画、语法高亮或演讲者备注的交互式幻灯片需求。
运行要求: 该技能不附带脚本，仅为说明文档。生成的 HTML 从 CDN 加载 reveal.js 及其插件，因此查看幻灯片时需要网络访问。元数据中引用了一个名为 pptx_to_html 的 office-mcp 服务器工具。

HTML Slides Skill

Overview

This skill enables creation of stunning HTML-based presentations using reveal.js - the web's most popular presentation framework. Create interactive, responsive slides with animations, code highlighting, speaker notes, and more.

How to Use

Describe the presentation you want to create
Specify theme, transitions, and features needed
I'll generate a reveal.js presentation

Example prompts:

"Create an interactive presentation about our product"
"Build a code walkthrough presentation with syntax highlighting"
"Make a presentation with speaker notes and timer"
"Create slides with animations and transitions"

Domain Knowledge

reveal.js Basics

html

<!doctype html><html><head>    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@4/dist/reveal.css">    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@4/dist/theme/black.css"></head><body>    <div class="reveal">        <div class="slides">            <section>Slide 1</section>            <section>Slide 2</section>        </div>    </div>    <script src="https://cdn.jsdelivr.net/npm/reveal.js@4/dist/reveal.js"></script>    <script>Reveal.initialize();</script></body></html>

<!doctype html><html><head>    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@4/dist/reveal.css">    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@4/dist/theme/black.css"></head><body>    <div class="reveal">        <div class="slides">            <section>Slide 1</section>            <section>Slide 2</section>        </div>    </div>    <script src="https://cdn.jsdelivr.net/npm/reveal.js@4/dist/reveal.js"></script>    <script>Reveal.initialize();</script></body></html>

Slide Structure

html

<!-- Horizontal slides --><section>Slide 1</section><section>Slide 2</section>
<!-- Vertical slides (nested) --><section>    <section>Vertical 1</section>    <section>Vertical 2</section></section>
<!-- Markdown slides --><section data-markdown>    <textarea data-template>        ## Slide Title        - Point 1        - Point 2    </textarea></section>

<!-- Horizontal slides --><section>Slide 1</section><section>Slide 2</section>
<!-- Vertical slides (nested) --><section>    <section>Vertical 1</section>    <section>Vertical 2</section></section>
<!-- Markdown slides --><section data-markdown>    <textarea data-template>        ## Slide Title        - Point 1        - Point 2    </textarea></section>

Themes

Built-in themes: black, white, league, beige, sky, night, serif, simple, solarized, blood, moon

Transitions

javascript

Reveal.initialize({    transition: 'slide',  // none, fade, slide, convex, concave, zoom    transitionSpeed: 'default',  // default, fast, slow    backgroundTransition: 'fade'});

Reveal.initialize({    transition: 'slide',  // none, fade, slide, convex, concave, zoom    transitionSpeed: 'default',  // default, fast, slow    backgroundTransition: 'fade'});

Fragments (Animations)

html

<section>    <p class="fragment">Appears first</p>    <p class="fragment fade-in">Then this</p>    <p class="fragment fade-up">Then this</p>    <p class="fragment highlight-red">Highlight</p></section>

<section>    <p class="fragment">Appears first</p>    <p class="fragment fade-in">Then this</p>    <p class="fragment fade-up">Then this</p>    <p class="fragment highlight-red">Highlight</p></section>

Fragment styles: fade-in, fade-out, fade-up, fade-down, fade-left, fade-right, highlight-red, highlight-blue, highlight-green, strike

Code Highlighting

html

<section>    <pre><code data-trim data-line-numbers="1|3-4">def hello():    print("Hello")    print("World")    return True    </code></pre></section>

<section>    <pre><code data-trim data-line-numbers="1|3-4">def hello():    print("Hello")    print("World")    return True    </code></pre></section>

Speaker Notes

html

<section>    <h2>Slide Title</h2>    <p>Content</p>    <aside class="notes">        Speaker notes go here. Press 'S' to view.    </aside></section>

<section>    <h2>Slide Title</h2>    <p>Content</p>    <aside class="notes">        Speaker notes go here. Press 'S' to view.    </aside></section>

Backgrounds

html

<!-- Color background --><section data-background-color="#4d7e65">
<!-- Image background --><section data-background-image="image.jpg" data-background-size="cover">
<!-- Video background --><section data-background-video="video.mp4">
<!-- Gradient background --><section data-background-gradient="linear-gradient(to bottom, #283b95, #17b2c3)">

<!-- Color background --><section data-background-color="#4d7e65">
<!-- Image background --><section data-background-image="image.jpg" data-background-size="cover">
<!-- Video background --><section data-background-video="video.mp4">
<!-- Gradient background --><section data-background-gradient="linear-gradient(to bottom, #283b95, #17b2c3)">

Configuration

javascript

Reveal.initialize({    // Display controls    controls: true,    controlsTutorial: true,    progress: true,    slideNumber: true,        // Behavior    hash: true,    respondToHashChanges: true,    history: true,    keyboard: true,    overview: true,    center: true,    touch: true,    loop: false,    rtl: false,    shuffle: false,        // Timing    autoSlide: 0,  // 0 = disabled    autoSlideStoppable: true,        // Appearance    width: 960,    height: 700,    margin: 0.04,    minScale: 0.2,    maxScale: 2.0,        // Plugins    plugins: [RevealMarkdown, RevealHighlight, RevealNotes]});

Reveal.initialize({    // Display controls    controls: true,    controlsTutorial: true,    progress: true,    slideNumber: true,        // Behavior    hash: true,    respondToHashChanges: true,    history: true,    keyboard: true,    overview: true,    center: true,    touch: true,    loop: false,    rtl: false,    shuffle: false,        // Timing    autoSlide: 0,  // 0 = disabled    autoSlideStoppable: true,        // Appearance    width: 960,    height: 700,    margin: 0.04,    minScale: 0.2,    maxScale: 2.0,        // Plugins    plugins: [RevealMarkdown, RevealHighlight, RevealNotes]});

Examples

Example 1: Tech Talk

html

<!doctype html><html><head>    <meta charset="utf-8">    <title>API Design Best Practices</title>    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@4/dist/reveal.css">    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@4/dist/theme/night.css">    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@4/plugin/highlight/monokai.css"></head><body>    <div class="reveal">        <div class="slides">            <section data-background-gradient="linear-gradient(to bottom right, #1a1a2e, #16213e)">                <h1>API Design</h1>                <h3>Best Practices for 2024</h3>                <p><small>Engineering Team</small></p>            </section>                        <section>                <h2>Agenda</h2>                <ol>                    <li class="fragment">RESTful Principles</li>                    <li class="fragment">Authentication</li>                    <li class="fragment">Error Handling</li>                    <li class="fragment">Documentation</li>                </ol>            </section>                        <section>                <section>                    <h2>RESTful Principles</h2>                </section>                <section>                    <h3>Resource Naming</h3>                    <pre><code data-trim class="language-http">GET /users           # CollectionGET /users/123       # Single resourcePOST /users          # CreatePUT /users/123       # UpdateDELETE /users/123    # Delete                    </code></pre>                </section>            </section>                        <section>                <h2>Questions?</h2>                <p>[email protected]</p>            </section>        </div>    </div>        <script src="https://cdn.jsdelivr.net/npm/reveal.js@4/dist/reveal.js"></script>    <script src="https://cdn.jsdelivr.net/npm/reveal.js@4/plugin/highlight/highlight.js"></script>    <script>        Reveal.initialize({            hash: true,            plugins: [RevealHighlight]        });    </script></body></html>

<!doctype html><html><head>    <meta charset="utf-8">    <title>API Design Best Practices</title>    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@4/dist/reveal.css">    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@4/dist/theme/night.css">    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@4/plugin/highlight/monokai.css"></head><body>    <div class="reveal">        <div class="slides">            <section data-background-gradient="linear-gradient(to bottom right, #1a1a2e, #16213e)">                <h1>API Design</h1>                <h3>Best Practices for 2024</h3>                <p><small>Engineering Team</small></p>            </section>                        <section>                <h2>Agenda</h2>                <ol>                    <li class="fragment">RESTful Principles</li>                    <li class="fragment">Authentication</li>                    <li class="fragment">Error Handling</li>                    <li class="fragment">Documentation</li>                </ol>            </section>                        <section>                <section>                    <h2>RESTful Principles</h2>                </section>                <section>                    <h3>Resource Naming</h3>                    <pre><code data-trim class="language-http">GET /users           # CollectionGET /users/123       # Single resourcePOST /users          # CreatePUT /users/123       # UpdateDELETE /users/123    # Delete                    </code></pre>                </section>            </section>                        <section>                <h2>Questions?</h2>                <p>[email protected]</p>            </section>        </div>    </div>        <script src="https://cdn.jsdelivr.net/npm/reveal.js@4/dist/reveal.js"></script>    <script src="https://cdn.jsdelivr.net/npm/reveal.js@4/plugin/highlight/highlight.js"></script>    <script>        Reveal.initialize({            hash: true,            plugins: [RevealHighlight]        });    </script></body></html>

Example 2: Product Launch

html

<!doctype html><html><head>    <title>Product Launch</title>    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@4/dist/reveal.css">    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@4/dist/theme/white.css">    <style>        .reveal h1 { color: #2d3748; }        .metric { font-size: 3em; color: #3182ce; }    </style></head><body>    <div class="reveal">        <div class="slides">            <section data-background-color="#f7fafc">                <h1>Introducing</h1>                <h2 style="color: #3182ce;">ProductX 2.0</h2>            </section>                        <section>                <h2>The Problem</h2>                <p class="fragment">Teams waste <span class="metric">20%</span> of time on manual tasks</p>            </section>                        <section data-auto-animate>                <h2>Our Solution</h2>                <div data-id="box" style="background: #3182ce; padding: 20px;">                    AI-Powered Automation                </div>            </section>                        <section data-auto-animate>                <h2>Our Solution</h2>                <div data-id="box" style="background: #38a169; padding: 40px; width: 400px;">                    <p>AI-Powered Automation</p>                    <p>90% faster</p>                </div>            </section>        </div>    </div>    <script src="https://cdn.jsdelivr.net/npm/reveal.js@4/dist/reveal.js"></script>    <script>Reveal.initialize();</script></body></html>

<!doctype html><html><head>    <title>Product Launch</title>    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@4/dist/reveal.css">    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@4/dist/theme/white.css">    <style>        .reveal h1 { color: #2d3748; }        .metric { font-size: 3em; color: #3182ce; }    </style></head><body>    <div class="reveal">        <div class="slides">            <section data-background-color="#f7fafc">                <h1>Introducing</h1>                <h2 style="color: #3182ce;">ProductX 2.0</h2>            </section>                        <section>                <h2>The Problem</h2>                <p class="fragment">Teams waste <span class="metric">20%</span> of time on manual tasks</p>            </section>                        <section data-auto-animate>                <h2>Our Solution</h2>                <div data-id="box" style="background: #3182ce; padding: 20px;">                    AI-Powered Automation                </div>            </section>                        <section data-auto-animate>                <h2>Our Solution</h2>                <div data-id="box" style="background: #38a169; padding: 40px; width: 400px;">                    <p>AI-Powered Automation</p>                    <p>90% faster</p>                </div>            </section>        </div>    </div>    <script src="https://cdn.jsdelivr.net/npm/reveal.js@4/dist/reveal.js"></script>    <script>Reveal.initialize();</script></body></html>

Resources

来源与署名

来源：claude-office-skills/skills位于html-slides提交9c4c7d5

许可证： MIT

内容归原作者所有。SourceWeft 从公开仓库中收录这些内容。

举报或申请下架

Html Slides

HTML Slides Skill

Overview

How to Use

Domain Knowledge

reveal.js Basics

Slide Structure

Themes

Transitions

Fragments (Animations)

Code Highlighting

Speaker Notes

Backgrounds

Configuration

Examples

Example 1: Tech Talk

Example 2: Product Launch

Resources

来源与署名

更多来自 claude-office-skills/skills 的技能

Whatsapp Automation

Xlsx Manipulation

Web Search

Weekly Report

Tiktok Marketing

Template Engine

更多Documents & Office技能

Pdf

View Pdf

Wiki Ado Convert

Esign Field Placement

Visa Doc Translate

Google Workspace Ops