JavaScript video tutorial: Create presentations with Reveal.js

In this video I invite you to discover together reveal.js which is a library that will allow you to create presentations (à la Powerpoint or Google Slides) using HTML, CSS and a little JavaScript. It is this tool that I use in most of the introductions to my training.

To start

To start using the library, you must first install it. If you are using a bundler that can handle node_modules dependencies (like Vite) you can install it via npm, pnpm or whatever.

npm install reveal.js
# ou
pnpm add reveal.js
# ou
yarn add reveal.js

If you don’t use any special tools you can also upload the zip directly to github.

Then, to create our presentation, all you have to do is create an HTML page with the following structure (you will have to adapt the JavaScript import depending on your situation).

<html>
    <head>
        <link rel="stylesheet" href="https://grafikart.fr/reveal/dist/reveal.css">
        <link rel="stylesheet" href="http://grafikart.fr/reveal/dist/theme/white.css">
    </head>
    <body>
        <div class="reveal">
            <div class="slides">
                <section>Slide 1</section>
                <section>Slide 2</section>
            </div>
        </div>
        <script type="module">
            import Reveal from '/reveal/dist/reveal.esm.js'

            Reveal.initialize();
        </script>
    </body>
</html>

Each beacon <section> will represent a slide in your presentation. On the style side, reveal.js offers pre-designed themes but you can also create your own CSS themes if you wish.

You can also create secondary (downward) navigation by nesting sections together to create multi-level layouts.

<div class="slides">
    <section>Slide 1</section>
    <section>
        <section>Slide 2</section>
        <section>Sous slide 1</section>
        <section>Sous slide 2</section>
    </section>
</div>

You also have the possibility to customize each section using attributes data-. For example, to change the background of a slide you can use an attribute data-background-.

<section data-background-color="aquamarine">
  <h2>Slide bleu</h2>
</section>

For more possibilities you can go to the documentation.

Fragment

Another interesting point is that even within a slide, you can break down the appearance of elements thanks to a “fragment” system. Imagine you have arguments to put forward.

<ul>
    <li class="fragment">Argument 1<li>
    <li class="fragment">Argument 2<li>
    <li class="fragment">Argument 3<li>
</ul>

In this way each <li> will be hidden by default and they will only show when going forward. You can also customize the animations and behaviors of each fragment with specific classes.

<p class="fragment">Je m'affiche progressivement</p>
<p class="fragment fade-out">Je disparait !</p>
<p class="fragment highlight-red">Je deviens rouge</p>
<p class="fragment fade-in-then-out">Je m'affiche puis je me masque</p>
<p class="fragment fade-up">Je m'affiche avec une translation</p>

All available classes are documented on the Fragments documentation. You can also create your own animations using CSS.

<style>
  .fragment.blur {
    filter: blur(5px);
  }
  .fragment.blur.visible {
    filter: none;
  }
</style>
<section>
  <p class="fragment custom blur">One</p>
  <p class="fragment custom blur">Two</p>
  <p class="fragment custom blur">Three</p>
</section>

Dimension

Presentations created with reveal.js automatically adapt to the size of the screen, but not necessarily in a classic way (like for a responsive site). In the context of a presentation, we especially want the elements to always keep the same ratio.

Reveal.js creates a div .slides which wraps our presentation with a specific width and height and then it’s going to use a transform scale() to make the presentation fit on the screen and centered. The advantage of this approach is that the elements always look the same, regardless of your screen size. You have the option to customize the size that will be used as a base during initialization.

Reveal.initialize({
  // Taille "normale" qui sera utilisé comme ratio
  width: 960,
  height: 700,
  // % d'espace vide autour de la présentation
  margin: 0.04,
  // Scale minimum / maximum à appliquer
  minScale: 0.2,
  maxScale: 2.0
});

PDF export

You have by default a way to export your presentation as a PDF. By adding ?print-pdf in the URL the presentation switches to print mode where each section is a page. You can then use your browser’s “print to PDF” feature to generate a PDF.

Presenter mode

There is also another interesting element, but which is not directly available by default, it is the presenter mode which allows you to see where you are, see the next slide and have a small stopwatch to know if you are in advance or not on your presentation. This functionality is available through the Note plugin.

import Reveal from '/reveal/dist/reveal.esm.js'
import RevealNotes from '/reveal/plugin/notes/notes.esm.js'

Reveal.initialize({
    hash: true, // Active la navigation par hash dans l'URL
    plugins: [RevealNotes]
});

Enabling the “Notes” plugin allows you to use the “S” key to activate Presenter Mode in a new window. Navigating in this mode automatically causes scrolling in the classic window. If you are in a situation where you have a live presentation to make, you can have the classic presentation on the overhead projector screen, and the presenter part on your screen to allow you to see where you are and the progress of your presentation. You can also add notes to your presentation by adding a specific HTML element.

<section>
  <h2>Slide 1</h2>

  <aside class="notes">
    Ceci est une note 📝
  </aside>
</section>

markdown plugin

Finally, the last little point I wanted to raise with you is the management of Markdown, which is rather interesting if you want to create slides more quickly. This feature also available as a plugin.

import Reveal from '/reveal/dist/reveal.esm.js'
import RevealMarkdown from '/reveal/plugin/markdown/markdown.esm.js'

Reveal.initialize({
    hash: true, // Active la navigation par hash dans l'URL
    plugins: [RevealMarkdown]
});

This plugin then allows you to create sections using Markdown through a textarea.

<section data-markdown>
  <textarea data-template>
    ## Slide 1
    A paragraph with some text and a https://grafikart.fr/tutoriels/reveal-js-presentation-2109(https://hakim.se).
    ---
    ## Slide 2
    ---
    ## Slide 3
  </textarea>
</section>

Here we create for example 3 slides. It is also possible to use the highlight plugin to highlight code examples.

import Reveal from '/reveal/dist/reveal.esm.js'
import RevealHighlight from '/reveal/plugin/highlight/highlight.esm.js'
import RevealMarkdown from '/reveal/plugin/markdown/markdown.esm.js'

Reveal.initialize({
    hash: true, // Active la navigation par hash dans l'URL
    plugins: [RevealMarkdown, RevealHighlight]
});

This will allow you to put code in the markdown (but also outside) and to emphasize certain lines.

<section data-markdown>
  <textarea data-template>
    ```js [1-2|3|4]
    let a = 1;
    let b = 2;
    let c = x => 1 + 2 + x;
    c(3);

Il est aussi possible de faire ça sans le markdown dans une section classique si vous le souhaitez.

```html
<section>
  <pre><code data-trim data-noescape data-line-numbers="3,8-10">
<table>
  <tr>
    <td>Apples</td>
    <td>$1</td>
    <td>7</td>
  </tr>
  <tr>
    <td>Oranges</td>
    <td>$2</td>
    <td>18</td>
  </tr>
</table>
  </code></pre>
</section>

Up to you

There are still a lot of other features that I haven’t mentioned in this article (animation between slides, pagination, layout, configuration…) but the best thing is to try reveal.js and go to the documentation to discover the possibilities offered by the tool.

RELATED ARTICLESMORE FROM AUTHOR