reveal.js Plugins

Default plugins

By default, generated presentations will have the following built-in reveal.js plugins enabled:

dist/plugin/zoom.js
dist/plugin/notes.js

All these plugins are part of the reveal.js distribution.

To enable or disable a built-in plugin, it is possible to set the revealjs_plugin_{plugin name} attribute to enabled or disabled.

For example, to disable all the default plugins set the following document attributes:

:revealjs_plugin_zoom: disabled
:revealjs_plugin_notes: disabled

reveal.js also ships a dist/plugin/search.js plugin, disabled by default. Set revealjs_plugin_search to enabled to turn it on:

:revealjs_plugin_search: enabled

Additional plugins

Additional reveal.js plugins can be installed and activated using docinfo files.

Extract the plugin files into a directory
Load each plugin’s script and stylesheet from a head docinfo file
Configure and initialize the plugins from a footer docinfo file
Add a :docinfo: attribute to enable docinfo

Let’s take an example where we want to use the chalkboard plugin and the customcontrols plugin. First, download the plugins from GitHub and extract the chalkboard and customcontrols directories into a reveal.js-plugins folder:

$ tree reveal.js-plugins -L 2

reveal.js-plugins
├── chalkboard
│   ├── img
│   ├── plugin.js
│   ├── README.md
│   └── style.css
└── customcontrols
    ├── plugin.js
    ├── README.md
    └── style.css

4 directories, 6 files

Loading a plugin happens in two steps: load its assets, then initialize it.

First, load each plugin’s script and stylesheet from a head docinfo file named <docname>-docinfo-revealjs.html, where <docname> is the name of your AsciiDoc file (here, presentation.adoc). The customcontrols plugin renders its buttons with Font Awesome icons, so load Font Awesome as well:

presentation-docinfo-revealjs.html

<script src="Font-Awesome/js/all.min.js"></script> (1)
<link rel="stylesheet" href="Font-Awesome/css/all.min.css">
<script src="reveal.js-plugins/customcontrols/plugin.js"></script> (2)
<link rel="stylesheet" href="reveal.js-plugins/customcontrols/style.css">
<script src="reveal.js-plugins/chalkboard/plugin.js"></script> (3)
<link rel="stylesheet" href="reveal.js-plugins/chalkboard/style.css">

1	Load Font Awesome, used by the customcontrols icons
2	Load the customcontrols plugin and its stylesheet
3	Load the chalkboard plugin and its stylesheet

Then, configure and initialize the plugins from a footer docinfo file named <docname>-docinfo-footer-revealjs.html. Each modern reveal.js plugin exposes an init(Reveal) function that you call once reveal.js is ready:

presentation-docinfo-footer-revealjs.html

<script>
  Reveal.configure({
    customcontrols: {
      controls: [
        { icon: '<i class="fa fa-pen-square"></i>',
          title: 'Toggle chalkboard (B)',
          action: 'RevealChalkboard.toggleChalkboard();' },
        { icon: '<i class="fa fa-pen"></i>',
          title: 'Toggle notes canvas (C)',
          action: 'RevealChalkboard.toggleNotesCanvas();' }
      ]
    }
  }) (1)
  RevealChalkboard.init(Reveal) (2)
  RevealCustomControls.init(Reveal) (3)
</script>

1	Configure the customcontrols to toggle the chalkboard and the notes canvas
2	Initialize the chalkboard plugin
3	Initialize the customcontrols plugin

Finally, enable docinfo in your presentation so that both files are picked up:

presentation.adoc

= Third-party Plugins
:docinfo: private (1)

// ...

1	Enable private docinfo so the `presentation-docinfo-revealjs.html` and `presentation-docinfo-footer-revealjs.html` files are included

A complete, working example is available in revealjs-plugins.adoc together with its head and footer docinfo files.

By default, docinfo files are searched for in the same folder as the document file. If you want to keep them anywhere else, set the docinfodir attribute to their location.

Please read Locating docinfo files if you want to learn more.

Read the relevant reveal.js documentation to understand more about reveal.js plugins. A list of existing reveal.js plugins is also maintained upstream.