プラグイン

プラグインを使用すると、reveal.js に追加機能を追加できます。プラグインを使用するには、次の 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 を返す必要がある関数