Plugins for Reveal.js

A set of plugins for Reveal.js: Appearance, Internation, Verticator, Smallcontrol, FsFx, Simplemenu, Relativenumber, CopyCode, FontsFirst, Doghouse, Tagteam and CounterAct.

These plugins all originated in a need to bend the functionality, of some presentations I did, to the way I would like it to work. The plugins also work together perfectly. You can interact with the examples right here on the page, or click "Get the plugin" to go to each separate GitHub page.

Appearance

Appearance

for Reveal.js

In Powerpoint you can make slides with items that appear automatically and sequentially with effects. Appearance is a plugin for Reveal.js that does the same. Appearance is easy to set up. It uses Animate.css by Daniel Eden for the animations, with some changes to allow for a non-animated state.

Let's check out what appearance.js does:

Let text appear

  • Add it to any text element
  • Like list items, or headers.
  • It adds some impact.

Let images appear

Change the delay

Use data-delay="*" on each element, where the wildcard is the delay in microseconds

Change the animation speed

Use the speed classes from Animate.css to change the speed of the animation:

slower

slow


fast

faster

Inside fragments

Like this (click next):

Additional animations:

  • Appear with .animate__skidLeft
  • Appear with .animate__skidLeftBig
  • Appear with .animate__skidRight
  • Appear with .animate__skidRightBig
  • Appear with .animate__shrinkIn
  • Appear with .animate__shrinkInBlur

In Powerpoint you can make slides with items that appear automatically and sequentially with effects. Appearance is a plugin for Reveal.js that does the same.

Appearance is easy to set up. It uses Animate.css by Daniel Eden for the animations, with some changes to allow for a non-animated state. There are also some extra animations as well.

Internation

Internation

for Reveal.js

Examples

Fruit

An apple

An orange

Diner

A pizza

A hamburger

Animals

A dog

A cat

HTML Content

This is a normal paragraph with text.

This is a paragraph that has HTML in it.

Setup

Step 1. Define current language

Internation has English as default language. You can change it if you like in the options:

Reveal.initialize({
    //
    internation: {
        locale: "en",
        localename: 'English'
    },
    plugins: [ Internation ]
});

Step 2. Adding data-attributes

<section id="intro">
    <h1 data-i18n="title">Hello!</h1>
    <p data-i18n="paragraph1">There is a <a href="#">link</a> in the paragraph</p>
</section>

Add a data-attribute of data-i18n="something" to the text you want to translate. Skip elements that are common in all languages.

Internation reads HTML by default. If some text contains a span or link, it is better to take that whole piece for translation. If you turn the HTML setting off in the options (you can), you would need to make spans of every text that is not a link.

Step 3. Creating JSON

Internation can automatically generate a JSON file for you based on the existing HTML content of the elements. First turn it on in the options (make sure you have added data-attributes in step 2):

Reveal.initialize({
    //
    internation: {
        makejson: true
    },
    plugins: [ Internation ]
});

Next, load the page with this URL parameter: ...index.html?makejson. This will immediately download a JSON file of your current HTML. The URL step is a safeguard for if you accidentally publish with makejson:true in the options turned on.

Step 4. Start translating

Make a copy of your first language JSON. Give the file a name that is obvious (so, fr.json for French).

Now start translating! When you are finished, put the file in an obvious location on your website.

Note: If an element has the data-attribute, but is missing in the dictionary of your new language, it will stay in the original language.

Step 5A. Refer to a language file

Reveal.initialize({
    //
    internation: {
        languages: {
            fr: {
                name: "Français",
                dictionary: "fr.json"
            }
        }
    },
    plugins: [ Internation ]
});

A language in Internation contains both a name and a dictionary. This example shows that a JSON file is used for the dictionary. JSON files will only work if there is a server. It will not work with the file:// protocol.

Step 5B. Or a language object

Reveal.initialize({
    internation: {
        languages: {
            fr: {
                name: "Français",
                dictionary: {
                    "slides" : {
                        "intro":{"title":"Bonjour!"}
                    }
                }
            }
        }
    },
    plugins: [ Internation ]
});

If you really want to allow local file access, you can put the whole dictionary object in the specific language object in your options.

The dictionary / JSON

{
    "slides" : {
        "intro":{
            "title":"Bonjour!",
            "paragraph1":"Ceci est un paragraphe"
        },
        "animals":{
            "title":"Animaux",
            "dog":"Chien",
            "cat":"Chat",
        }
    },
    "menubar" : {
        "title":"Voici le titre",
    }
}

To get a human-readable structure, Internation looks for a 'slides' object for any sections with ID's. It will also look for any elements with an ID that are outside of the slides, like a menu bar that is visible on all slides.

Switching languages

If you want multiple languages, you will probably also want users to choose. Internation listens to 'change' events of either a select or a set of radio buttons. By default, this is any element with the class langchooser, but that classname can be changed in the options.

You can put these on a slide (like the first page with the flags) or outside them in an element that is visible on multiple slides (like the menubar in the examples).

Internation is a localization (i10n) or internationalization (i18n) plugin for Reveal.js that reads language dictionaries from JSON files. The author can add switches to the presentation to let the user choose a language.

Authoring dictionary files is made easy by generating a first JSON file of the current language automatically based on the existing HTML.

Verticator

Verticator

for Reveal.js

What does it do?

Verticator shows vertical indicators

On vertical slides only

Colors

You can keep it as it is

If you do not override the colors in the options, Verticator will use your theme colors: the bullets will be the same color as text in your presentation.

Verticator detects if the slide background is set to an inverse color. If you do not override the colors in the options, the bullets will still take on the heading- or textcolor of the slide.

You can also use your own specific colors in the global configuration of Verticator:

Reveal.initialize({
    ...
    verticator: {
        color: 'green',
        inversecolor: 'orange'
    },
    plugins: [ Verticator ]

(These do not show now because it is not the loaded configuration)

Or you can override it per slide with a data-attribute:

Or you can override it per slide with a data-attribute

Don’t overdo it: limit vertical slides. You probably don’t want 30 bullets on the right-hand side of your presentation.

Really.

A plugin for Reveal.js that adds indicators to show the amount of slides in a vertical stack. Sometimes you would like to have an indication of how many slides are remaining in a vertical stack. This plugin does just that. It is visually quite similar to the indicators at fullPage.js.

The author can choose the main color of the indicators, and an inverse color if the background of the slide is inverse as well.

Smallcontrol

Smallcontrol

for Reveal.js

What does it do?

Smallcontrol makes the controls smaller

on the vertical control elements

Like this

Options

  • thisdeckonly

Setting the thisdeckonly option

In embedded presentations, the thisdeckonly option defines if the small styling should be set on the current deck only. It is set to true by default.

You can change like this:

Reveal.initialize({
	//...
	smallcontrol: {
		thisdeckonly: false
	},
	plugins: [ Smallcontrol ]
})

That’s it!

A plugin for Reveal.js that makes the controls a bit smaller, by scaling the vertical control elements down and aligning them with the horizontal controls.

Because it adds styling to the document, it limits the smaller controls to only the current deck if it is embedded in the page, but you can set it in the options if you want smaller controls on all embedded decks.

Smallcontrol also is set to NOT have smaller controls on touch devices, but you can override that too in the options.

FsFx   ("fullscreen effects")

FsFx

for Reveal.js


Note: This device does not support the Fullscreen API.

FsFx.js

Can do a few things:
  1. Enter or exit fullscreen
  2. Trigger 'next slide' after fullscreen
  3. Toggle a class on any element if fullscreen
  4. Auto-generate a fullscreen button

If a device does not support the Fullscreen API, a class of no-fsfx will be added to the body. You can use it to show warnings, hide elements etcetera.

1. Enter or exit fullscreen

  • Triggers if an element with a certain class is clicked
  • This baseclass is 'fsbutton' by default
  • The baseclass can easily be changed in the plugin options

2. Trigger 'next slide' after fullscreen

The start button on the first page of this deck does exactly that

  • If wanted, a 'next slide' function can be called
  • It can be added with a data-fs-gonext="*" attribute
  • The wildcard is the time in milliseconds for a delay

3. Toggle a class on any element if the presentation is fullscreen

  • A class toggle can be added with data-fs-toggle="*"
  • The wildcard is the class that is toggled in fullscreen
  • The Reveal DOM element gets the fullscreen class
  • In this presentation, see the changes in fullscreen: The background and the button icons

4. Auto-generate a fullscreen button

  • FsFx can generate a fullscreen button in your presentation (like in this presentation)
  • This will only be done if no such button already exists
  • The styling of the auto-generated button is included, but you can tweak color and position

A plugin for Reveal.js that enters or exits fullscreen, and toggles classes on certain elements. This plugin does just that. And some other things.

FsFx looks for elements in the presentation that need to have a class toggled on entering fullscreen and sets that class; it will remove the class on exiting fullscreen. The class can be set per element.

If you can't add a fullcreen button outside the slides yourself, FsFx can also generate a nice button for you.

Simplemenu

Simplemenu

for Reveal.js

Table of contents

(TOC generated by Simplemenu)

What?

In Powerpoint you can make slides with a nice bottom- or top bar in which the active menu item is highlighted. This menu works in the same way, but automatically.

What Simplemenu does

  • Generates a menu of your sections and stacks
  • Puts the menu in a header or footer if provided
  • And/or on any slide as an agenda or TOC
  • Use the menu to navigate
  • Update the menu state during navigation

It's easy to set up

JavaScript

Load the script and make a reference to it in the Reveal plugin options

HTML Markup

Setup your sections with data-names.(Markdown is also supported, see the Markdown demo.)

Add data-sm="false" to named sections you don’t want to show in the menu.

Add a menubar (header and/or footer), with an empty menu, through the options:

…
Reveal.initialize({
    simplemenu: {
        barhtml: {
            header: "<div class='menubar'><ul class='menu'></ul></div>",
            footer: ""
        }
    },
    plugins: [ Simplemenu ]

That’s it!

The setup above is the default (auto) way of linking the menu with the sections.

There is also a manual way, where the author creates the links in the menu(s) manually. See demo-manual.html.

Option demos

See all demos on the main Simplemenu page.

In Powerpoint you can make slides with a nice bottom- or top bar in which the active menu item is highlighted. This menu works in the same way, but automatically.

If the author sets the 'auto'-option to true, Simplemenu will auto-generate a menu by the names of the sections, so the author does not have to copy ID's to buttons.

RelativeNumber

RelativeNumber

for Reveal.js

This simple plugin checks if there already is an element with the class "slide-number" in the presentation. If so, it moves the slidenumber there.

Create an empty element with class "slide-number" in your document. For example, in a menubar like above.

Now you can style it and make it fit in your content. For example, give it a relative position.

For the menu you might use my Simplemenu plugin.

If you load Simplemenu before RelativeNumber, page numbers will also be exported correctly as PDF when using the Reveal.js ?print-pdf function.

Reveal.js creates a 'slide-number' element in the presentation if it is turned on in the configuration. Normally, his element is positioned absolutely as a sibling to the slides. But sometimes you want it inside a menubar or some other element. This plugin does just that.

Relativenumber only does one thing: It checks of there already is an element with the class 'slide-number' in the presentation before continuing. If there is, the regular Reveal.js slide-number element will replace it. That's all there is to it.

CopyCode

CopyCode

for Reveal.js


let why = `Because we always want to copy code
           during our presentations, right?`

Works out of the box

const http = require("http");
http.createServer(function (request, response) {
	response.writeHead(200, {"Content-Type": "text/plain"});
	response.end("Hello World\n");
}).listen(8081);
A 'Copy' button is automatically added to any <pre> code block.

Setup

Basics

There are really only three steps:

  1. Install and set up CopyCode
  2. Copy your code from a code block
  3. Paste your code somewhere

Install CopyCode

Copy the copycode folder to the plugins folder of the reveal.js folder, like this: plugin/copycode. Now load the script and make a reference to it in the Reveal plugin options:

<script src="plugin/copycode/copycode.js"></script>
<script>
    Reveal.initialize({
        plugins: [ CopyCode ]
    });
</script>
This plugin is also published to, and can be installed from, npm.

Now change it

You can change the visibility, icon use
or texts easily per element:

Change the visibility per element

Turn it off

<pre data-cc="false">
    <code>
        Here is the code	
    </code>
</pre>

Or show only on hover over the code block

<pre data-cc="hover">
    <code>
        Here is the code	
    </code>
</pre>

This can also be set globally. See Global options.

Note: Hover-only codeblocks will always show the copy button on touch devices.

Change the display of icons per element

<pre data-cc-display="icons">
    <code>
        Here is the code	
    </code>
</pre>
<pre data-cc-display="both">
    <code>
        Here is the code	
    </code>
</pre>

This can also be set globally. See Global options.

Change the text per element

<pre data-cc-copy="Copy HTML" data-cc-copied="Done">
    <code>
        Here is the code
    </code>
</pre>

This can also be set globally. See Global options.

Global options

  1. button
  2. display
  3. text
  4. plaintextonly
  5. timeout
  6. style
  7. tooltip
  8. iconsvg
  9. csspath
  10. clipboardjspath

Option 1: button

The button option is to show the button, always or only on hover.

Reveal.initialize({
    copycode: {
        button: "always" // "always"|"hover"
    },
    plugins: [ CopyCode ]
})
This can also be set per element with data-attributes.

Option 2: display

The display option is to show text in the button, icons, or both.

Reveal.initialize({
    copycode: {
        display: "text" // "text"|"icons"|"both"
    },
    plugins: [ CopyCode ]
})
This can also be set per element with data-attributes.

Option 3: text

The text option is an object that contains the texts for the 'copy' and 'copied' state.

Reveal.initialize({
    copycode: {
        text: {
            copy: "Copy",
            copied: "Copied!"
        }
    },
    plugins: [ CopyCode ]
This can also be set per element with data-attributes.

Option 4: plaintextonly

The plaintextonly option can be set to false to allow copying of rich text and styles.

Reveal.initialize({
    copycode: {
        plaintextonly: true // true|false
    },
    plugins: [ CopyCode ]
})

Option 5: timeout

The timeout option is the time in milliseconds for the "Copied!"-state to revert back to "Copy".

Reveal.initialize({
    copycode: {
        timeout: 1000
    },
    plugins: [ CopyCode ]
})

Option 6: style

The style option is an object that contains settings for background colors, colors, sizing, spacing and border styles.

Reveal.initialize({
    copycode: {
        style: {
            copybg: "orange", // Any CSS color, hex, named etc.
            copiedbg: "green",
            copycolor: "black",
            copiedcolor: "white",
            copyborder: "", // e.g. "1px solid blue"
            copiedborder: "",
            scale: 1,
            offset: 0, // in em units
            radius: 0  // in em units
        }
    },
    plugins: [ CopyCode ]
})

Option 7: tooltip

The tooltip option makes sure that the 'copied' text is shown in a tooltip, when an icon-only button display is used.

Reveal.initialize({
    copycode: {
        tooltip: true
    },
    plugins: [ CopyCode ]
})

Option 8: iconsvg

The iconsvg option is an object with placeholders for SVG icons for the 'copy' and 'copied' state. If left empty, it will use the default icons.

Reveal.initialize({
    copycode: {
        iconsvg: {
            copy: '',  // User can paste <svg>…</svg> code here
            copied: '' // User can paste <svg>…</svg> code here
        }
    },
    plugins: [ CopyCode ]
})

Option 9: csspath

The csspath option can be used when the you want to use your own stylesheet, instead of the provided one.

Reveal.initialize({
    copycode: {
        csspath: ''
    },
    plugins: [ CopyCode ]
})
Use this if you really want to change things that you can't override from the Reveal.js config, like the padding and so on.

Option 10: clipboardjspath

The clipboardjspath option is the path to ClipboardJS. When nothing is filled in here, it will automatically load from a CDN.

Reveal.initialize({
    copycode: {
        clipboardjspath: ''
    },
    plugins: [ CopyCode ]
})

Thanks

In Reveal.js presentations we can show blocks of code. This plugin for Reveal.js adds a 'copy' button to each of those.

The user can change the text for 'Copy' and 'Copied', and the accompanying colors in the options.

FontsFirst

FontsFirst

for Reveal.js

Fontsfirst:


  1. Uses WebFontLoader.js to load remote fonts
  2. Will use your fallback self-hosted font
  3. Sets that preference during the session
  4. Reveal.js will start when the fonts are loaded

Options

This plugin returns a 'promise' if the font from whatever source is loaded. Reveal.js will then continue initialisation. This demo sets opacity to 0 and then to 1 if Reveal.js is ready, to make sure that no Flash Of Unstyled Text is shown.

From the Reveal options you can:

  1. Set modules (Google)
  2. Set the timeout
  3. Set url to fallback font css
  4. Turn on debug mode

A plugin for Reveal.js that makes sure that your fonts get loaded before initialising Reveal.js.

Sometimes when you use a Google or Typekit font, it takes some time to load the font. Your presentation will then first show in a default font and then jump to the correct font (known as a 'FOUT', a Flash Of Unstyled Text).

Also, if you use an Adblocker like Ghostery, it is possible that the remote font will also not load at all. This plugin fixes that, but you do need to provide your self-hosted fallback fonts.

Doghouse

Doghouse

for Reveal.js

Tags

Pug automatically closes tags.

p The dog has a tag

Indents

To make a nested structure, Pug uses indents to separate the levels.

div
  div
    h3 Who let the dogs out?

Inline variables

As a long as a variable is defined before use, it will render fine. You can use placeholders or assign the variable to a tag.

- let bark = "woooof";
p The dog says #{bark}
p= `The dog says ${bark}`
p= bark

Object and array variables

Local variables can be assigned in advance, or read from a database. Pug can read any JavaScript object or array format.

{"names": {"small": "Choco", "large": "Hector"}}
p My dog is called #{names.small}.
p The neighbors also have a dog. It is called #{names.large}.

Code

Pug allows inline JavaScript code for conditions and other logic.

- let uglydog = true
if uglydog
  h3 You ain’t nothin’ but a hound dog, cryin’ all the time
  h4=uglydog
if uglydog == false 
  h4 Nice doggie

Iteration

You can use either ‘each’ or ‘while’ for iteration.

ul
  each dog in ["Chichuahua", "Great dane", "German shepherd"]
    li=dog

A plugin for Reveal.js that will render Pug codeblocks when it starts, but it also works with live editing, which makes it great for presentations about Pug.

Doghouse only does one thing: it renders Pug codeblocks, and can update them live. Go ahead: navigate through the presentation on the left and change some of the code in the left panels.

Tagteam

Tagteam

for Reveal.js

.../demo.html?t=tagteam

What is it?

Tagteam is used to dynamically show only certain sections in presentations when you don't want to show everything. It uses URL parameters to set the needed sections.

This demo uses only this HTML file. Clicking the demo links will only change the URL parameters and reload the page. Tagteam can work together with Simplemenu to show only the relevant chapters.

An option to use groups is also provided. Also, the need to enter a group can be set, to avoid the possibility to view all slides (no parameters at all).

This is just a simple safeguard. Anyone with a bit of HTML knowledge can find the valid group names.

Tagteam reads 3 different URL parameters:

  1. ?t=abcd for data-tag sections
  2. ?n=abcd for data-name sections
  3. ?g=abcd for predefined groups

Any named or tagged section that is NOT in a parameter will NOT be shown. Sections without tags or name WILL be shown.

You can also use a data-keep attribute, like the title section of this presentation, to make sure that the slide will always be shown, except when a group is mandatory.

Setup

Setup your HTML with data-tags and/or data-names:


                                                          <section data-name="Brown" data-tag="nice">
                                                            <section data-tag="cats, small">Cat (brown, small, nice)</section>
                                                            <section data-tag="dogs">Dog (brown, nice)</section>
                                                            <section data-tag="dogs, big">Dog (brown, big, nice)</section>
                                                            <section data-tag="horses">Horse (brown, nice)</section>
                                                          </section>
                                                          <section data-name="Black &amp; white">
                                                            <section data-tag="cats">Cat (black &amp; white)</section>
                                                            <section data-tag="dogs, small">Dog (black &amp; white + small)</section>
                                                            <section data-tag="horses">Horse (black &amp; white)</section>
                                                          </section>

The above markup is used in all following examples.

Note: 'data-tag' can can include multiple comma-separated tags. But 'data-name' can only contain a single term (which may consist of several words).

JavaScript

Load the script and make a reference to it in the Reveal plugin options.

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

When using the Markdown plugin as well, load it first, so Tagteam can correctly find tagged or named sections.

Tags

Using a single t parameter

.../demo.html?t=dogs

Test it here now: demo.html?t=dogs

Using multiple t parameters

.../demo.html?t=dogs,cats

Test it here now: demo.html?t=dogs,cats

Using more specific t parameters

Use the plus sign to be more specific.
In this case we want all dogs, but only small cats.

.../demo.html?t=dogs,cats+small

Test it here now: demo.html?t=dogs,cats+small

Using more specific t parameters

This works with nested tags as well.

.../demo.html?t=small+cats,nice+horses

Test it here now: demo.html?t=small+cats,nice+horses

Names

When ordering your presentation with nested sections, you can specify these to be shown in one fell swoop.

Using an n parameter

There are two named stacks with vertical slides. Now we only want the first (data-name="Brown") stack.

.../demo.html?n=brown

Test it here now: demo.html?n=brown

Using multiple n parameters

.../demo.html?n=brown,black+%26+white

Test it here now: demo.html?n=brown,black+%26+white

Groups

Groups are predefined sets of tags and/or names.

Setting a groups option

Each 'groups' object needs a name and an array of tags and/or an array of names.

Reveal.initialize({
    //...
    tagteam: {
        groups: {
            "brownpets": {
                names: ["brown"], tags: ["cats", "dogs"]
            },
            "bwhsd": {
                names: ["black & white"], tags: [ "horses", ["dogs", "small"] ]
            }
        }
    },
    plugins: [ Tagteam ]
});

Note: In the 2nd group, the tags contain a nested array to be more specific (small dogs only).

Using a g parameter

.../demo.html?g=brownpets

Test it here now: demo.html?g=brownpets

For the mandatorygroup option, see the full demo.
Cat (brown, small, nice)
Dog (brown, nice)
Dog (brown, big, nice)
Horse (brown, nice)
Cat (black & white)
Dog (black & white, small)
Horse (black & white)
There is no correct URL parameter set

Thanks for trying out Tagteam!
Star it if you like it :-)

Go back to the start

A plugin for Reveal.js which is used to dynamically show only certain sections in presentations when you don't want to show everything. It uses URL parameters to set the needed sections.

An option to use groups is also provided. Also, the need to enter a group can be set, to avoid the possibility to view all slides (no parameters at all), as a simple safeguard.

CounterAct

CounterAct

A counter for Reveal.js

Example

Counting occurences

Counting occurences will count up across all slides.

This is figcaption number
This is figcaption number

Counting in lists

In and across lists and slides, these keep counting up.

A list

  1. List item
  2. List item

An other list

  1. List item
  2. List item

Resetting counters

Resets must be parents of selectors.

A list

  1. List item
  2. List item

An other list

  1. List item
  2. List item

Incrementing with other elements

This h4 is counted

Increments must be parents of selectors and children of resets.

This h4 is also counted

Combine increment and reset

This h4 has two counters

And this one as well

By combining increments and resets, you can count things like vertical sections, and sections inside them. If sections are hidden with data-visibility, they will not increment or add to the count of selectors in them.

Happy counting!

Reveal.js optimises the performance of presentations by hiding slides that are more than a few steps in the future.

As per the CSS specification, CSS counters simply don’t work in those hidden slides.

CounterAct goes around this limitation by using data-attributes on the elements that you want to count. Similar to CSS counters, CounterAct lets you define multiple counters. This way, you can have nice numbers in your presentation again.

Made by Martino.