Reveal.js 插件全攻略：让你的PPT演示更专业！代码高亮、数学公式、搜索功能一网打尽

Reveal.js 插件系统为演示文稿提供了强大的扩展功能，包括代码语法高亮、Markdown 支持、搜索、演讲者笔记、数学公式渲染、元素缩放以及自定义插件等。

快速开始

插件加载

使用 Reveal.js 插件需要完成以下两个步骤：

1. 引入插件文件：导入对应的 CSS 和 JavaScript 文件
2. 配置插件数组：在初始化时配置 plugins 参数

插件使用详解

代码语法高亮

代码高亮插件支持多种编程语言的语法着色，并提供行号显示、分步高亮等高级功能。

<template>
  <section>
    <h2>代码演示</h2>
    <pre><code data-trim data-line-numbers="2|3-4">
      function hello() {
          let name = "Reveal.js";
          alert("Hello, " + name + "!");
          console.log("Hello, Reveal.js!");
      }
          </code></pre>
  </section>
</template>

<script setup>
  import Highlight from "reveal.js/plugin/highlight/highlight.esm.js";
  import "reveal.js/plugin/highlight/monokai.css";

  Reveal.initialize({
    plugins: [Highlight],
  });
</script>

配置选项

功能	属性设置	描述
行号高亮	data-line-numbers=”1,3-5″	高亮显示第 1、3~5 行
分步高亮	data-line-offset=”1-2|3-5″	分步高亮第 1~2、3~5 行
行号偏移	data-ln-start-from=”2″	行号从第 2 行开始计数

Markdown 支持

Markdown 插件允许您直接在幻灯片中使用 Markdown 语法编写内容，支持代码块、列表、链接等标准 Markdown 元素。

<template>
  <section
    data-markdown
    data-background-gradient="linear-gradient(to bottom, #283b95, #17b2c3)"
  >
    <textarea data-template>
          ## Markdown 支持
          前端开发技术前沿
          ---
          ## Reveal.js
          一个现代化的演示框架
          ```js [1-2|3|4]
          let a = 1;
          let b = 2;
          let c = x => 1 + 2 + x;
          c(3);
          ```
        </textarea
    >
  </section>
</template>

<script setup>
  import Markdown from "reveal.js/plugin/markdown/markdown.esm.js";

  Reveal.initialize({
    plugins: [Markdown],
  });
</script>

搜索功能

搜索插件为演示文稿添加全文搜索功能，支持快捷键操作，方便快速定位内容。

<script setup>
  import Search from "reveal.js/plugin/search/search.esm.js";

  Reveal.initialize({
    plugins: [Search],
  });
</script>

演讲者笔记

笔记插件允许您为每张幻灯片添加私人笔记，在演示时仅演讲者可见，是演讲准备的重要工具。

<section>
  <h2>笔记</h2>
  <aside class="notes">这是你的私人笔记：notes</aside>
  <!--
    section 设置也是可以
    <section data-notes="这是你的私人笔记：notes">
  -->
</section>

<script setup>
  import Notes from "reveal.js/plugin/notes/notes.esm.js";

  Reveal.initialize({
    showNotes: true,
    plugins: [Notes],
  });
</script>

数学公式渲染

数学公式插件支持 LaTeX 语法，可以渲染复杂的数学公式和方程式。

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

<script setup>
  import Math from "reveal.js/plugin/math/math.esm.js";

  Reveal.initialize({
    plugins: [Math],
  });
</script>

元素缩放

缩放插件允许用户通过快捷键（Alt + 点击）放大查看幻灯片中的特定元素，特别适合展示细节内容。

<section>
  <!--按住 alt点击元素-->
  <h2>元素放大 (alt + click)</h2>
  <div class="fragment grow">
    <p>放大</p>
  </div>
</section>

<script setup>
  import Zoom from "reveal.js/plugin/zoom/zoom.esm.js";

  Reveal.initialize({
    plugins: [Zoom],
  });
</script>

自定义插件开发

Reveal.js 提供了灵活的插件开发接口，您可以创建自定义功能。以下示例展示如何创建一个按 T 键随机打乱幻灯片的插件：

// toaster.js
export default () => ({
  id: "toaster",
  init: (deck) => {
    deck.addKeyBinding({ keyCode: 84, key: "T" }, () => {
      deck.shuffle();
      console.log("🍻");
    });
  },
});

import Toaster from "toaster.js";

Reveal.initialize({
  plugins: [Toaster],
});

总结

通过合理使用 Reveal.js 插件系统，您可以创建功能丰富、交互性强的演示文稿。建议根据实际需求选择合适的插件组合，避免过度使用影响演示效果。

更多插件与扩展请请参考第三方插件。社区生态活跃，涵盖计时器、批注、数学公式、代码高亮、互动问答等丰富功能，能够满足多样化的演示需求。