外掛程式

使用外掛程式可以擴充 reveal.js 的附加功能。要使用外掛程式，你需要做兩件事

  1. 將外掛程式指令碼包含在文件中。（有些外掛程式可能也需要樣式。）
  2. 初始化時，將外掛程式包含在 plugins 陣列中，讓 reveal.js 知道外掛程式。

以下是一個範例

<script src="plugin/markdown/markdown.js"></script>
<script>
  Reveal.initialize({
    plugins: [RevealMarkdown],
  });
</script>

如果你使用 ES 模組，我們也提供所有內建外掛程式的模組匯出

<script type="module">
  import Reveal from 'dist/reveal.esm.js';
  import Markdown from 'plugin/markdown/markdown.esm.js';
  Reveal.initialize({
    plugins: [Markdown],
  });
</script>

內建外掛程式

幾個可以支援 Markdown、程式碼加亮顯示 和 講者摘要 的常見外掛程式已包含在預設的 簡報樣版 中。

這些外掛程式會和 reveal.js 存放庫一同發布。下面是所有內建外掛程式的完整清單。

名稱說明
RevealHighlight语法高亮的代码。
plugin/highlight/highlight.js
RevealMarkdown使用Markdown编写内容。
plugin/markdown/markdown.js
RevealSearch按 CTRL+Shift+F 搜索幻灯片内容。
plugin/search/search.js
RevealNotes在单独的窗口中显示演说者视图。
plugin/notes/notes.js
RevealMath渲染数学方程。
plugin/math/math.js
RevealZoom按 Alt+单击可放大元素（在 Linux 中按 CTRL+单击）。
plugin/zoom/zoom.js

如果您将.js换为.esm.js，上述所有内容都可用作 ES 模块。

API

我们提供 API 方法来检查当前已注册哪些插件。如果您想手动调用它们的一个方法，也可以检索对任何已注册插件实例的引用。

import Reveal from 'dist/reveal.esm.js';
import Markdown from 'plugin/markdown/markdown.esm.js';
import Highlight from 'plugin/highlight/highlight.esm.js';

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

Reveal.hasPlugin('markdown');
// true

Reveal.getPlugin('markdown');
// { id: "markdown", init: ... }

Reveal.getPlugins();
// {
//   markdown: { id: "markdown", init: ... },
//   highlight: { id: "highlight", init: ... }
// }

依赖项 4.0.0

此功能保留用于向后兼容，但自 reveal.js 4.0.0 起已弃用。在较旧版本中，我们使用内置依赖项加载器加载插件。我们改变这样的做法，因为最佳的脚本加载和捆绑方式可能因用例而异。如果您需要加载依赖项，请使用 <script defer> 标签。

依赖项将按出现在的顺序加载。

Reveal.initialize({
  dependencies: [
    { src: 'plugin/markdown/markdown.js', condition: () => {
        return !!document.querySelector( ’[data-markdown]’ );
    } },
    { src: 'plugin/highlight/highlight.js', async: true }
  ]
});

对于每个依赖项对象，下列属性都可用

  • src: 加载的脚本路径
  • async: [可选] 标记脚本是否应该在 reveal.js 启动后再加载，默认为 false
  • callback: [可选] 脚本加载后执行的函数
  • condition: [可选] 函数必须返回 true 才能加载脚本