Créer des présentations interactives avec Reveal.js

Mise à jour : 10/03/2025

Jusqu’à peu, j’utilisais Slidev pour mes présentations. Mais souhaitant les réutiliser pour de courtes vidéos à intégrer sur mon site, j’ai cherché une alternative compatible avec OBS. C’est ainsi que je suis tombé sur un dépôt permettant d’utiliser Reveal.js avec OBS.

Avant de présenter cette solution spécifique, je vais d’abord vous parler de Reveal.js, que j’ai commencé à utiliser il y a quelques jours. Cet outil open-source permet de créer des présentations interactives directement en HTML, avec une grande flexibilité en CSS et JavaScript.

Pourquoi utiliser Reveal.js à la place de PowerPoint ?

Si vous êtes habitué à PowerPoint, vous savez à quel point il peut être frustrant de gérer des mises en page complexes, des animations ou des exports vers le web. Reveal.js offre une approche différente : il fonctionne entièrement en HTML, CSS et JavaScript, ce qui en fait une solution idéale pour ceux qui préfèrent un workflow “as code”.

Une approche as code pour plus de contrôle

Contrairement à PowerPoint, où tout doit être manipulé visuellement dans une interface graphique, Reveal.js permet de :

Écrire ses slides en Markdown ou HTML

<section>
  <h2>Mon premier slide</h2>
  <p>Avec du texte et du HTML.</p>
</section>

Versionner ses présentations avec Git
Réutiliser des styles CSS personnalisés
Automatiser la génération des slides
Modifier et partager plus facilement (pas besoin d’un fichier PPTX lourd)

Intégration et compatibilité web

Les présentations Reveal.js sont directement lisibles dans un navigateur et peuvent être hébergées en ligne. Inutile d’installer un logiciel spécifique, un simple lien suffit pour partager votre pres.

Installer et configurer Reveal.js

Pour utiliser Reveal.js, il existe plusieurs méthodes d’installation : télécharger une version prête à l’emploi, utiliser npm, ou cloner le dépôt GitHub officiel. Personnellement, je préfère utiliser la version complète avec Git, et voici pourquoi.

Pourquoi choisir la version complète avec Git ?

En clonant directement le dépôt officiel de Reveal.js, on bénéficie :

De toutes les fonctionnalités : la version complète inclut les plugins, les thèmes et les options avancées.
D’un contrôle total : on peut facilement modifier le code source, ajouter des animations en JavaScript, personnaliser les styles en CSS et intégrer mes propres plugins.
D’une mise à jour simplifiée : avec Git, il suffit d’un git pull pour récupérer les dernières améliorations et corrections de bugs.
D’un workflow compatible avec mes projets : comme Reveal.js est basé sur du HTML/JS, on peut versionner mes présentations avec Git et les intégrer facilement dans mes autres projets web.

Cloner et installer Reveal.js

Pour récupérer la version complète, voici comment procéder :

Cloner le dépôt officiel

git clone https://github.com/hakimel/reveal.js.git
cd reveal.js

Cela télécharge l’ensemble des fichiers du projet sur mon ordinateur.

Installer les dépendances

Reveal.js utilise Node.js pour gérer certains modules. J’installe donc les dépendances avec :

npm install

Lancer un serveur local

Pour tester rapidement mes slides, j’utilise la commande suivante :

npm start

Cela lance un serveur local, généralement accessible à l’adresse http://localhost:8000 ↗.

Par défault, lorsqu’on lance la commande npm start, Reveal.js charge le fichier index.html situé à la racine du projet.

Et si je ne veux pas utiliser Git ?

Si on veut juste tester Reveal.js sans passer par Git, on peut :

Télécharger l’archive ZIP depuis GitHub ↗.
Extraire le dossier et ouvrir index.html dans un navigateur.
Utiliser un CDN pour inclure Reveal.js dans une page web existante.

Mais honnêtement, cette approche est plus limitée : pas d’accès facile aux plugins, pas de mise à jour automatique, et une personnalisation plus complexe. C’est pourquoi je privilégie toujours la version Git.

Maintenant que Reveal.js est installé, passons à la création d’une première présentation !

Créer une première présentation avec `Reveal.js`

Maintenant que Reveal.js est installé, il est temps de créer notre première présentation. L’objectif est d’avoir une structure fonctionnelle avec quelques slides, des transitions et un premier aperçu des possibilités offertes par cet outil.

Structure d’une présentation `Reveal.js`

Une présentation avec Reveal.js est simplement une page HTML structurée avec des balises <section>. Chaque <section> représente un slide.

Voici un exemple minimaliste de fichier index.html pour une présentation :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Ma Présentation Reveal.js</title>
    <link rel="stylesheet" href="dist/reset.css">
    <link rel="stylesheet" href="dist/reveal.css">
    <link rel="stylesheet" href="dist/theme/black.css">
</head>
<body>
    <div class="reveal">
        <div class="slides">
            <section>
                <h2>Bienvenue sur Reveal.js</h2>
                <p>Un outil puissant pour créer des présentations web.</p>
            </section>
            <section>
                <h2>Pourquoi utiliser Reveal.js ?</h2>
                <ul>
                    <li>Écriture en HTML et Markdown</li>
                    <li>Transitions et animations dynamiques</li>
                    <li>Hébergement et partage simplifiés</li>
                </ul>
            </section>
        </div>
    </div>

    <script src="dist/reveal.js"></script>
    <script>
        Reveal.initialize();
    </script>
</body>
</html>

Explication du code :

La structure HTML classique avec l’inclusion des styles et du script de Reveal.js.
La classe .reveal englobe les slides pour que le moteur de Reveal.js les prenne en charge.
Chaque <section> représente un slide : on peut ajouter du texte, des listes, des images, voire du code interactif.
Le script Reveal.initialize(); permet d’activer toutes les fonctionnalités de base.

Ajouter des slides verticaux

Par défaut, les slides s’affichent de gauche à droite. Mais Reveal.js permet aussi une navigation verticale. Pour ajouter des sous-slides (navigation avec la flèche du bas), il suffit d’imbriquer les <section> comme ceci :

<section>
    <h2>Slide Principal</h2>
</section>
<section>
    <section>
        <h3>Slide Vertical 1</h3>
    </section>
    <section>
        <h3>Slide Vertical 2</h3>
    </section>
</section>

L’utilisateur pourra ainsi naviguer horizontalement entre les slides principaux et verticalement dans les sous-sections.

Ajouter des effets de transition

Reveal.js propose plusieurs types d’animations pour rendre la présentation plus dynamique. On peut les configurer via Reveal.initialize(), comme ici :

Reveal.initialize({
    transition: 'fade', // Autres options : 'slide', 'convex', 'concave', 'zoom'
    backgroundTransition: 'slide'
});

Tester et ajuster

Une fois le fichier index.html prêt, il suffit de lancer la présentation avec :

npm start

et d’ouvrir http://localhost:8000 ↗ pour voir le rendu final.

Utiliser du Markdown avec Reveal.js

L’un des gros avantages de Reveal.js est sa compatibilité avec Markdown. Plutôt que d’écrire chaque slide en HTML, on peut simplement utiliser un fichier Markdown, ce qui rend la création et la modification des présentations beaucoup plus rapide et lisible.

Pourquoi utiliser Markdown ?

Avec du Markdown, on peut :

Écrire plus vite sans s’occuper des balises HTML.
Garder un fichier propre et lisible, facile à modifier.
Séparer le contenu et la structure, idéal pour la maintenance.
Générer des slides dynamiquement, parfait pour des présentations basées sur du texte brut.

Activer le support Markdown dans Reveal.js

Dans un premier temps il faut ajouter le plugin Markdown dans le script d’initialisation de Reveal.js. Pour cela, on doit ajouter dans Reveal.initialize() ces lignes :

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

Ajouter du Markdown dans une présentation

Reveal.js propose deux façons d’intégrer du Markdown :

Directement dans le HTML
Via un fichier externe (.md)

Méthode 1 : Insérer Markdown directement dans le HTML

Il suffit d’utiliser l’attribut data-markdown :

<section data-markdown>
    <script type="text/template">
        ## Titre du slide en Markdown
        - Point 1
        - Point 2
        - **Texte en gras**
    </script>
</section>

Cette méthode permet d’intégrer du Markdown sans avoir besoin d’un fichier externe.

Méthode 2 : Charger un fichier `.md` externe

on peut aussi créer un fichier slides.md et l’inclure dans mon index.html :

<section data-markdown="slides.md"></section>

Et voici à quoi peut ressembler mon fichier slides.md :

# Bienvenue sur Reveal.js
Ceci est une présentation en Markdown.

---

## Pourquoi Markdown ?
- Facile à écrire 📝
- Plus rapide que HTML 🚀
- Lisible et maintenable ✅

Le --- permet de séparer les slides.

Ajouter des éléments à vos présentations Reveal.js

Une présentation réussie ne se limite pas à du texte et des listes à puces. Reveal.js permet d’intégrer facilement des images, vidéos, iframes, du code interactif et même des formulaires. Ces fonctionnalités rendent les diapositives plus dynamiques et engageantes.

Insérer des images

Reveal.js permet d’ajouter des images avec du HTML classique :

<section>
    <h2>Une image dans un slide</h2>
    <img src="examples/assets/image1.png" alt="Mon image" width="600">
</section>

Si on veut que l’image occupe tout l’arrière-plan, j’utilise data-background :

<section data-background="examples/assets/image2.png">
    <h2>Texte sur une image de fond</h2>
</section>

On peut aussi ajuster l’affichage de l’image avec du CSS pour un meilleur rendu :

.reveal img {
    border-radius: 10px; /* Ajoute des coins arrondis */
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3); /* Ombre légère */
}

Intégrer des vidéos

Reveal.js permet d’ajouter des vidéos directement dans un slide ou en arrière-plan.

Vidéo en lecture classique

<section>
    <h2>Vidéo dans le slide</h2>
    <video controls>
        <source src="videos/demo.mp4" type="video/mp4">
    </video>
</section>

Vidéo en arrière-plan, avec lecture en boucle

<section data-background-video="videos/background.mp4" data-background-video-loop="true">
    <h2>Vidéo en arrière-plan</h2>
</section>

Remarque : Utiliser un format léger et optimiser pour vos vidéos.

jouter un iframe (page web intégrée)

Si on veut afficher un site web directement dans un slide, j’utilise un <iframe> :

<section>
    <h2>Intégrer une page web</h2>
    <iframe src="https://blog.stephane-robert.info/" width="800" height="500"></iframe>
</section>

Reveal.js propose aussi un mode “fullscreen” avec un bouton dédié :

<section data-background-iframe="https://blog.stephane-robert.info/" data-background-interactive>
    <h2>Site en plein écran</h2>
</section>

Ajouter du code

Les présentations techniques nécessitent souvent d’afficher du code source. Reveal.js permet de le faire proprement avec la balise <pre><code> et un plugin de mise en forme syntaxique.

<section>
    <h2>Exemple de code JavaScript</h2>
    <pre><code class="language-js">
    console.log("Hello, Reveal.js!");
    </code></pre>
</section>

Pour que le highlighting fonctionne, il faut activer le plugin Highlight.js dans Reveal.initialize() :

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

Ajouter un thème de couleur pour le code :

<link rel="stylesheet" href="plugin/highlight/monokai.css">

Ajouter un diagramme interactif

Avec le plugin Mermaid.js, on peut générer des diagrammes interactifs directement dans Reveal.js.

<section>
    <h2>Diagramme Mermaid</h2>
    <pre class="mermaid">
    graph TD;
      A[Départ] --> B{Choix};
      B -->|Oui| C[Continuer];
      B -->|Non| D[Arrêter];
    </pre>
</section>

    <script src="https://cdn.jsdelivr.net/npm/reveal.js-mermaid-plugin@11.4.1/plugin/mermaid/mermaid.js"></script>

Activer Mermaid.js dans Reveal.initialize() :

<script>
  Reveal.initialize({
    plugins: [ RevealMermaid ],
    mermaid: {
      // flowchart: {
      //   curve: 'linear',
      // },
    },
  });
</script>

Personnaliser vos présentations Reveal.js

Reveal.js permet de modifier le design avec CSS, de choisir des thèmes prédéfinis, et même d’ajouter des animations personnalisées avec JavaScript.

Changer le thème de Reveal.js

Reveal.js propose plusieurs thèmes prêts à l’emploi, situés dans dist/theme/. Pour les utiliser, on modifie simplement l’inclusion du fichier CSS dans mon index.html :

<link rel="stylesheet" href="dist/theme/solarized.css">

Thèmes disponibles :

black.css (par défaut, style sombre)
white.css (fond clair classique)
league.css (moderne, avec une typo marquée)
night.css (thème sombre élégant)
solarized.css (inspiré de Solarized Light)

Si voulez tester rapidement les thèmes, on peut ajouter un bouton dans sa présentation pour les changer dynamiquement. Placez ce code juste avant la balise de fermeture </body> :

<!-- Sélecteur de thème -->
<div style="position: fixed; top: 10px; right: 10px; z-index: 1000;">
    <label for="theme-selector">Thème :</label>
    <select id="theme-selector">
        <option value="black">Black</option>
        <option value="white">White</option>
        <option value="league">League</option>
        <option value="night">Night</option>
        <option value="solarized">Solarized</option>
    </select>
</div>

<script>
  document.getElementById('theme-selector').addEventListener('change', function(e) {
      document.querySelector('link[href^="dist/theme/"]').href = "dist/theme/" + e.target.value + ".css";
  });
</script>

Personnaliser les styles avec CSS

Si les thèmes de base ne me conviennent pas, on peut créer mon propre style en modifiant css/theme/custom.css et en l’incluant dans mon index.html :

<link rel="stylesheet" href="css/theme/custom.css">

Dans ce fichier, j’ajoute mes propres styles :

/* Changer la couleur du texte et la police */
.reveal {
    font-family: 'Arial', sans-serif;
    color: #ff6600;
}

/* Modifier l’arrière-plan des slides */
.reveal .slide-background {
    background: linear-gradient(to right, #000428, #004e92);
}

/* Styliser les titres */
.reveal h1, .reveal h2, .reveal h3 {
    text-transform: uppercase;
    font-weight: bold;
}

Cela permet d’obtenir un style unique et totalement personnalisé.

Ajouter des animations avec JavaScript

Reveal.js propose des animations natives, mais on peut aller plus loin avec du JavaScript et CSS.

Effet d’apparition progressif (fragments)

On peut afficher les éléments progressivement en ajoutant l’attribut class="fragment" :

<section>
    <h2>Les avantages de Reveal.js</h2>
    <ul>
        <li class="fragment fade-in">Écriture en HTML et Markdown</li>
        <li class="fragment fade-in">Personnalisation avancée</li>
        <li class="fragment fade-in">Transitions dynamiques</li>
    </ul>
</section>

Effets disponibles :

fade-in (apparition progressive)
fade-out (disparition)
zoom-in (zoom avant)
zoom-out (zoom arrière)
slide-left, slide-right, slide-up, slide-down

Configuration avancée de Reveal.js

Jusqu’à présent, on a utilisé quelques paramètres de configuration pour activer Markdown, les fragments et les animations. Mais Reveal.js propose une large gamme d’options qui permettent d’adapter la présentation à mes besoins.

Voyons en détail comment configurer la navigation, les transitions, les plugins, la gestion du timing et d’autres options avancées.

Où configurer Reveal.js ?

Toutes les options de configuration se trouvent dans Reveal.initialize({...}).

Dans notre fichier index.html, voici comment activer la configuration de base :

<script src="dist/reveal.js"></script>
<script src="plugin/markdown/markdown.js"></script>
<script src="plugin/highlight/highlight.js"></script>

<script>
  Reveal.initialize({
    plugins: [ RevealMarkdown, RevealHighlight ],
  });
</script>

On peut personnaliser la façon dont l’utilisateur navigue dans ma présentation.

Reveal.initialize({
    controls: true, // Afficher les flèches de navigation
    progress: true, // Afficher la barre de progression
    slideNumber: true, // Numéro des slides en bas à droite
    hash: true, // Permet de naviguer avec des URLs uniques pour chaque slide
    history: true, // Permet d'utiliser les boutons "précédent/suivant" du navigateur
    keyboard: true, // Activer/désactiver les raccourcis clavier
    touch: true, // Activer la navigation tactile
});

Configurer les transitions et animations

Reveal.js permet d’ajouter des transitions fluides entre les slides.

Reveal.initialize({
    transition: "convex", // Animation des slides ('none', 'fade', 'slide', 'convex', 'concave', 'zoom')
    backgroundTransition: "zoom", // Animation de fond
    autoAnimate: true, // Active les animations automatiques entre slides similaires
});

Options de transition :

none (pas d’animation)
fade (fondu)
slide (glissement)
convex (effet 3D avant)
concave (effet 3D arrière)
zoom (zoom avant/arrière)

Configurer l’affichage et la mise en page

On peut aussi ajuster la taille des slides et leur comportement.

Reveal.initialize({
    width: 1200, // Largeur du slide
    height: 700, // Hauteur du slide
    margin: 0.1, // Marge autour du slide
    minScale: 0.5, // Zoom minimum
    maxScale: 2.0, // Zoom maximum
});

Astuce : margin: 0.1 permet d’éviter que les contenus soient trop collés aux bords.

Ajouter un mode automatique (lecture automatique des slides)

Si on veut une présentation automatique, on peut activer un mode diaporama :

Reveal.initialize({
    autoSlide: 5000, // Change de slide toutes les 5 secondes
    autoSlideStoppable: true, // Pause automatique en cas d'interaction
    loop: false, // Redémarre la présentation à la fin
});

Activer le mode présentateur

Reveal.js a un mode présentateur qui affiche des notes et un aperçu du prochain slide sur un second écran.

Reveal.initialize({
    showNotes: true, // Afficher les notes du présentateur
});

Si on a besoin de notes pour mon discours, on peut les ajouter dans les slides :

<section>
    <h2>Slide avec notes</h2>
    <p>Ceci est un contenu normal.</p>
    <aside class="notes">
        Ceci est une note pour moi. Elle n’est pas visible dans la présentation.
    </aside>
</section>

Pour afficher le mode présentateur, il suffit de presser S pendant la présentation.

Idéal pour suivre ses notes lors d’une conférence !

Configurer les plugins et fonctionnalités avancées

Reveal.js supporte plusieurs plugins officiels. Pour les installer, il suffit juste d’ajouter les fichiers JavaScript correspondants dans le dossier plugin/. On les active ensuite en les ajoutant dans plugins: [...] :

<script src="plugin/markdown/markdown.js"></script>
<script src="plugin/highlight/highlight.js"></script>
<script src="plugin/notes/notes.js"></script>
<script src="plugin/math/math.js"></script>
Reveal.initialize({
    plugins: [
        RevealMarkdown, // Support Markdown
        RevealHighlight, // Mise en forme du code source
        RevealNotes, // Mode présentateur
        RevealMath // Support des formules mathématiques LaTeX
    ]
});

Liste des plugins natifs :

RevealMarkdown → Ajout de Markdown
RevealHighlight → Mise en forme du code
RevealNotes → Notes du présentateur
RevealMath → Affichage des formules mathématiques
RevealSearch → Recherche dans les slides
RevealZoom → Zoom sur les slides

Il existe aussi de nombreux plugins tiers pour ajouter des fonctionnalités avancées comme des diagrammes, des vidéos, des quiz interactifs et bien plus encore.

Conclusion

Après avoir exploré Reveal.js, j’ai réalisé à quel point cet outil est puissant et flexible. Il permet de créer des présentations interactives, entièrement personnalisables et parfaitement adaptées à mes futurs besoins.

Grâce à son approche “as code”, on peut écrire mes slides en Markdown ou HTML, intégrer des animations, du code interactif, des vidéos, des diagrammes et bien plus encore. La configuration avancée me permet d’adapter chaque détail, de la navigation aux transitions, en passant par l’intégration avec OBS ou le mode présentateur.

Mais la véritable force de Reveal.js, c’est sa documentation extrêmement complète. Que ce soit pour les fragments, les transitions, l’ajout de plugins ou l’intégration avec d’autres outils, tout est bien expliqué et mis à jour régulièrement.

Si j’ai besoin d’aller plus loin, d’ajouter des fonctionnalités avancées ou de résoudre un problème, la documentation officielle et la communauté open-source sont des ressources incontournables.

Plus d’infos

La documentation complète est disponible sur le site officiel : https://revealjs.com ↗
Le projet est open-source et accessible ici : https://github.com/hakimel/reveal.js ↗
Exemples de présentations : https://slides.com ↗