告别传统PPT！用代码做演示文稿，69.6k+星标神器Reveal.js全攻略

还在为制作精美的演示文稿而烦恼吗？今天给大家介绍一个神器——Reveal.js，让你用代码就能做出炫酷的 PPT！让我们来一起打开演示文稿的潘多拉宝盒吧！

GitHub 数据说话：

• 69.6k+ 星标
• 16.8k+ Fork
• 300+ 贡献者

什么是 Reveal.js？

Reveal.js 是一个基于 HTML、CSS 和 JavaScript 的演示文稿框架。简单来说，就是让你用写网页的方式来做 PPT！

为什么选择 Reveal.js？

• 免费开源 – 完全免费，想怎么用就怎么用
• 跨平台 – 只要有浏览器就能运行
• 响应式设计 – 手机、平板、电脑都能完美显示
• 动画效果丰富 – 各种炫酷的过渡动画
• 易于维护 – 代码管理，版本控制 so easy
• 可定制性强 – 想怎么改就怎么改

快速开始

安装

npm install reveal.js
# or
yarn add reveal.js

创建你的第一个演示文稿

<template>
  <div class="reveal">
    <div class="slides">
      <section>
        <h2>什么是 Reveal.js？</h2>
        <p>
          Reveal.js 是一个用于轻松创建精美演示文稿的框架，
          使用HTML构建。您甚至可以嵌入 Markdown。
        </p>
      </section>
      <section>
        <h2>前端开发技术前沿</h2>
        <p>来自：<a href="https://code.ifrontend.net">免费源码下载</a></p>
      </section>
    </div>
  </div>
</template>

<script setup>
  import { onMounted, onUnmounted } from "vue";
  import Reveal from "reveal.js";
  import "reveal.js/dist/reveal.css";
  import "reveal.js/dist/theme/night.css";

  onMounted(() => {
    // 确保 DOM 渲染完成后再初始化 Reveal.js
    Reveal.initialize({
      hash: true, // 启用幻灯片导航的 URL 哈希
      transition: "slide", // 幻灯片过渡效果
    });
  });

  onUnmounted(() => {
    // 组件卸载时销毁 Reveal.js 实例
    Reveal.destroy();
  });
</script>

<style scoped>
  /* 确保 Reveal.js 容器占满全屏 */
  .reveal {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
  }

  /* 重置一些可能干扰的样式 */
  .reveal * {
    box-sizing: border-box;
  }
</style>

就这么简单！这们就有了一个可以翻页的演示文稿。

主题和样式

内置主题

Reveal.js 提供了多种内置主题：

• white.css – 白色主题（默认）
• black.css – 黑色主题
• league.css – 深色主题
• beige.css – 米色主题
• sky.css – 天空蓝主题
• night.css – 夜间主题
• serif.css – 衬线字体主题
• simple.css – 简洁主题
• solarized.css – Solarized 主题

自定义主题

想要自己的风格？没问题！

/* 自定义主题 */
.reveal {
  font-family: "Microsoft YaHei", sans-serif;
}

.reveal h1,
.reveal h2,
.reveal h3 {
  color: #e74c3c;
  text-transform: none;
}

.reveal .slides section {
  text-align: left;
}

垂直幻灯片

<section>
  <section>
    <h1>前端技术热点</h1>
    <p>AI 驱动的代码生成工具</p>
  </section>
  <section>
    <h2>Web3 与区块链前端</h2>
    <p>去中心化应用开发趋势</p>
  </section>
  <section>
    <h2>微前端架构</h2>
    <p>大型应用模块化解决方案</p>
  </section>
</section>

动画效果

<section>
  <h2>动画效果演示</h2>
  <p class="fragment fade-in">淡入效果</p>
  <p class="fragment fade-in-then-semi-out">滑入效果</p>
  <p class="fragment zoom-in">缩放效果</p>
  <p class="fragment fade-up">向上淡入</p>
  <p class="fragment fade-down">向下淡入</p>
</section>

实用技巧

1. 代码高亮

<section>
  <h2>代码演示</h2>
  <pre><code data-trim data-noescape>
function hello() {
    console.log("Hello, Reveal.js!");
}
    </code></pre>
</section>

2. 数学公式

<section>
  <h2>数学公式</h2>
  <p>$$E = mc^2$$</p>
</section>

3. 背景图片

<section data-background="image.jpg">
  <h2>带背景的幻灯片</h2>
</section>

4. 视频嵌入

<section>
  <h2>视频演示</h2>
  <video data-autoplay src="video.mp4"></video>
</section>

高级配置

键盘快捷键

Reveal.initialize({
  keyboard: {
    13: "next", // 回车键
    32: "next", // 空格键
    37: "left", // 左箭头
    39: "right", // 右箭头
    38: "up", // 上箭头
    40: "down", // 下箭头
  },
});

插件系统

Reveal.js 支持丰富的插件：

• Notes – 演讲者备注
• Zoom – 缩放功能
• Search – 搜索功能
• Menu – 菜单导航
• Chalkboard – 黑板功能
  …

Reveal.initialize({
  plugins: [RevealNotes, RevealZoom, RevealSearch],
});

移动端优化

Reveal.initialize({
  touch: true, // 支持触摸
  mobileViewDistance: 3, // 移动端视图距离
  previewLinks: true, // 预览链接
});

总结

Reveal.js 让制作演示文稿变得简单而有趣：

• 简单易学 – 只需要 HTML、CSS、JavaScript 基础
• 功能强大 – 支持各种动画和交互效果
• 完全免费 – 开源项目，无任何限制
• 跨平台 – 任何设备都能完美运行

还在等什么？赶紧试试 Reveal.js，让你的演示文稿与众不同！