Fourth Advent 2020 – Finalize the presentation with reveal.js

Cover Advent 4

Our simple presentation is ready so far. Everyone can determine the design themselves and the design options are almost unlimited.

Finally, we want to include two things: display the numbering of the pages and show notes for the speaker.

Numbering of the slides

We want to display the current number and the total number of all slides – both horizontal and vertical.

To do this, we simply add to index.html the statement

Picture of Code

in Reveal.initialize(…). Immediately you will see the desired numbering.

Notes for the presenter

In the file index.html, and there in Reveal.initialize(…) you will find the included plugins. For example, RevealMarkdown allows us to work with Markdown files. To store notes for the presenter, we use the RevealNotes plugin.

We insert the notes themselves into the respective Markdown file. You can assign the marker to the corresponding section. This is done via data-separator-notes (analogous to the procedure in the previous part of the series for data-separator). By default the value is set to

Picture of Code

set and this is the one we use.

For example, we insert the following into the desired Markdown file:

Picture of Code

Now when we open the changed slide and press S on the keyboard, a small window opens with the notes, the preview of the next slide and a clock…

Docker Cheat Sheet

It’s getting late… Let’s call it a day.

Table of contents