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

Reveal.js est un framework open source qui transforme une simple page HTML en présentation interactive jouée dans le navigateur. Vos slides (les diapositives) s'écrivent en HTML ou en Markdown, se versionnent comme du code et se personnalisent entièrement en CSS et JavaScript. C'est une alternative "as code" à PowerPoint, idéale pour le web et pour l'enregistrement vidéo (je m'en sers avec OBS, un logiciel libre d'enregistrement d'écran, pour de courtes capsules).

Cette leçon facultative couvre l'installation, la création de slides en HTML et en Markdown, les fragments (animations), le mode présentateur, la personnalisation CSS et l'export PDF. Si vous hésitez avec Slidev, qui écrit aussi ses slides en Markdown mais s'appuie sur Vue, un comparatif figure dans la FAQ en bas de page.

Ce que vous allez apprendre

Pour suivre, il faut Git et Node.js installés, et savoir lire du HTML simple. À la fin, vous saurez :

• installer Reveal.js et lancer une présentation dans le navigateur ;
• structurer des slides horizontaux et verticaux avec des balises <section> ;
• écrire vos slides en Markdown, dans le HTML ou dans un fichier .md ;
• insérer images, vidéos, iframes, code et diagrammes ;
• changer de thème, ajuster le CSS et révéler le contenu progressivement ;
• utiliser le mode présentateur et exporter la présentation en PDF.

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 se manipule visuellement dans une interface graphique, Reveal.js permet de :

• Écrire ses slides en Markdown ou HTML, comme ce slide minimal :

  <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 présentation.

Installer et configurer Reveal.js

Pour utiliser Reveal.js, il existe plusieurs méthodes d'installation : télécharger une archive prête à l'emploi, utiliser npm, ou cloner le dépôt GitHub officiel. Personnellement, je préfère 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 :

1. De toutes les fonctionnalités : la version complète inclut les plugins (des modules à activer à la demande), les thèmes et les options avancées.
2. D'un contrôle total : on peut modifier le code source, ajouter des animations en JavaScript, personnaliser les styles en CSS et intégrer ses propres plugins.
3. 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.
4. D'un workflow compatible avec ses autres projets : comme Reveal.js est basé sur du HTML/JS, on versionne ses présentations avec Git et on les intègre facilement dans ses projets web.

Cloner et installer Reveal.js

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

1. 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 votre ordinateur.

2. Installer les dépendances

   Reveal.js utilise Node.js (un environnement qui exécute du JavaScript hors du navigateur) pour gérer certains modules. On installe les dépendances avec :

   npm install

3. Lancer un serveur local

   Pour tester rapidement ses slides, on lance :

   npm start

   Cela démarre un serveur local, généralement accessible à l'adresse http://localhost:8000. Si la page s'affiche avec des slides de démonstration, l'installation est réussie.

Par défaut, la commande npm start fait charger à Reveal.js le fichier index.html situé à la racine du projet : c'est ce point d'entrée que vous modifierez pour créer vos propres slides.

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 (un serveur public qui héberge les fichiers) 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 simple et une personnalisation plus complexe. C'est pourquoi je privilégie toujours la version Git.

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

Reveal.js est installé : il est temps de créer une 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 de l'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, et l'ensemble est encadré par deux <div> de classes reveal et slides.

Voici un exemple minimaliste de fichier index.html :

<!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>

Ce fichier se lit en quatre points :

• La structure HTML classique inclut les styles et le 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 y mettre du texte, des listes, des images, voire du code.
• Le script Reveal.initialize(); active 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>

Le public peut ainsi naviguer horizontalement entre les slides principaux et verticalement dans les sous-sections.

Le schéma montre ce que produit cette imbrication : trois slides sur la ligne principale, dont le deuxième contient deux sous-slides que la flèche du bas fait défiler, tandis que la flèche droite passe au slide suivant.

Source · SVG

Échap pour fermer, + et − pour zoomer, défilement pour se déplacer. 100 % − Ajuster + Fermer

Ajouter des effets de transition

Reveal.js propose plusieurs transitions (l'animation jouée au changement de slide) pour rendre la présentation plus dynamique. On les configure 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, on lance la présentation avec :

npm start

Ouvrez ensuite http://localhost:8000 pour voir le rendu final. Après chaque modification du fichier, rechargez la page pour la voir apparaître.

Utiliser du Markdown avec Reveal.js

L'un des gros avantages de Reveal.js est sa compatibilité avec Markdown, un langage de balisage léger où un titre s'écrit ## Titre et une puce - Point. Plutôt que d'écrire chaque slide en HTML, on écrit un texte brut, ce qui rend la création et la modification des présentations beaucoup plus rapides et lisibles.

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

Le Markdown passe par un plugin livré avec Reveal.js. Il faut charger son fichier JavaScript, puis le déclarer dans la liste plugins de Reveal.initialize() :

<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 du Markdown directement dans le HTML

Il suffit d'utiliser l'attribut data-markdown sur la balise <section> :

<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 son index.html. Le navigateur charge ce fichier par une requête HTTP : la page doit donc être servie par le serveur local (npm start), pas ouverte directement depuis le disque.

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

Voici à quoi peut ressembler le fichier slides.md :

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 séparateur --- coupe le fichier en slides : ce fichier en produit deux. La question « Pourquoi Markdown ? » du second slide est donc le contenu de l'exemple, pas une section de cette leçon.

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 et des diagrammes. Ces éléments rendent les diapositives plus dynamiques et engageantes.

Insérer des images

Reveal.js affiche une image avec la balise HTML classique <img>. Le chemin de src est relatif au fichier index.html :

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

Si on veut que l'image occupe tout l'arrière-plan, on utilise l'attribut 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

Une vidéo posée dans un slide utilise la balise HTML <video> avec l'attribut controls pour laisser la main au spectateur. C'est le mode à privilégier pour une démo que vous lancez au moment voulu.

<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

Les attributs data-background-video et data-background-video-loop placent une vidéo d'arrière-plan derrière le contenu du slide, rejouée en boucle. C'est un effet décoratif : gardez un fichier léger pour ne pas ralentir le chargement.

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

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

Un iframe est un cadre qui affiche une autre page web à l'intérieur de la vôtre. Pour afficher un site web directement dans un slide, on utilise la balise <iframe>, avec une largeur et une hauteur :

<section>
    <h2>Intégrer une page web</h2>
    <iframe src="/" width="800" height="500"></iframe>
</section>

Ici src="/" pointe vers la racine du serveur local : remplacez-la par l'URL de la page à montrer. Reveal.js propose aussi un mode plein écran avec l'attribut data-background-iframe, rendu interactif par data-background-interactive :

<section data-background-iframe="/" 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 le fait proprement avec la balise <pre><code> et un plugin de coloration syntaxique : Highlight.js.

<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 charger et activer le plugin dans Reveal.initialize() :

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

On choisit ensuite un thème de couleurs pour le code en ajoutant une feuille de style :

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

Ajouter un diagramme interactif

Avec le plugin tiers Mermaid.js, on peut générer des diagrammes à partir d'un texte, directement dans Reveal.js. Le diagramme se décrit dans une balise <pre class="mermaid"> :

<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>

Le plugin n'est pas fourni avec Reveal.js : on le charge depuis un CDN avant l'initialisation.

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

Il reste à activer Mermaid.js dans Reveal.initialize(), comme pour les autres plugins. Le bloc mermaid sert aux options du diagramme, ici toutes en commentaire :

<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 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 en changer, on modifie l'inclusion du fichier CSS dans son index.html :

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

Parmi les thèmes disponibles (la liste complète est dans le dossier dist/theme/) :

• 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)

Pour tester rapidement les thèmes, on peut ajouter un sélecteur dans sa présentation et changer de thème à la volée. 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 conviennent pas, on peut créer son propre style en ajoutant un fichier css/theme/custom.css, que l'on inclut dans son index.html avec une balise <link> :

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

Dans ce fichier, on écrit ses propres règles CSS :

/* 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;
}

Ces règles donnent un style unique et totalement personnalisé : police Arial, texte orange, dégradé bleu en fond et titres en majuscules.

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)

Un fragment est un élément qui n'apparaît qu'au clic suivant. On affiche ainsi les éléments progressivement en ajoutant la classe 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 (à placer à côté de fragment) :

• 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'ici, on a utilisé quelques paramètres pour activer Markdown, les fragments et les transitions. Mais Reveal.js propose une large gamme d'options qui permettent d'adapter la présentation à vos besoins : navigation, transitions, plugins, timing et autres réglages.

Où configurer Reveal.js ?

Toutes les options de configuration se trouvent dans Reveal.initialize({...}). Dans le fichier index.html, voici comment activer la configuration de base avec deux plugins :

<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>

Configurer la navigation et le contrôle des slides

On peut personnaliser la façon dont le public navigue dans la présentation. Chaque option ci-dessous est un booléen : true l'active, false la désactive.

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, avec un effet pour le contenu et un autre pour l'arrière-plan.

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.js redimensionne la présentation pour qu'elle tienne dans l'écran, entre un zoom minimum et un zoom maximum.

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 évite que le contenu soit trop collé aux bords.

Activer la lecture automatique des slides

Si on veut une présentation automatique, on peut activer un mode diaporama qui change de slide à intervalle régulier :

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

Activer le mode présentateur

Le mode présentateur (speaker view) s'ouvre dans une fenêtre séparée, que l'on place sur son écran : elle affiche les notes, le chronomètre et un aperçu du prochain slide. On l'affiche en pressant la touche S pendant la présentation, à condition que le plugin Notes soit chargé (voir la section sur les plugins plus bas).

Pour écrire des notes que le public ne voit pas, on les place dans une balise <aside class="notes"> à l'intérieur du slide :

<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>

L'option showNotes: true de Reveal.initialize() est un autre réglage : elle affiche les notes directement sur le slide, ce qui sert à les relire et vérifier, pas à présenter.

Exporter la présentation en PDF

L'export PDF est une fonction native de Reveal.js, sans plugin. Ouvrez la présentation dans Chrome avec le paramètre ?print-pdf ajouté à l'URL (par exemple http://localhost:8000/?print-pdf), lancez l'impression (Ctrl+P) et choisissez Enregistrer au format PDF comme destination, marges à zéro. Chaque slide devient une page, ce qui permet de distribuer le support.

Configurer les plugins et fonctionnalités avancées

Reveal.js supporte plusieurs plugins officiels. Pour les installer, il suffit d'ajouter les fichiers JavaScript correspondants, présents dans le dossier plugin/, avant l'initialisation. 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>
<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
    ]
  });
</script>

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 comme des diagrammes, des vidéos ou des quiz interactifs.

À retenir

Une présentation Reveal.js reste une page HTML : chaque slide est une balise <section>, chaque fonction supplémentaire un plugin déclaré dans Reveal.initialize(), et chaque réglage une option de ce même appel. Les points ci-dessous résument l'essentiel.

• Reveal.js transforme une page HTML en présentation interactive : vos slides sont du Markdown ou du HTML, versionnables comme du code.
• Le mode présentateur (notes privées, chronomètre, aperçu du slide suivant) s'ouvre avec la touche S dans une fenêtre séparée, à condition de charger le plugin Notes.
• Les fragments révèlent un élément à la fois sans recharger le slide. Utile pour dérouler un concept ou une comparaison sans tout afficher d'un coup.
• L'export PDF passe par Chrome avec ?print-pdf puis l'impression : c'est une fonctionnalité native, pas un plugin.
• Pour un support rapide écrit en Markdown, Slidev est plus rapide à prendre en main, et Marp (un convertisseur de Markdown en slides) reste plus minimaliste : Reveal.js garde l'avantage du contrôle HTML complet.

Contrôle de connaissances

Vérifiez que l'essentiel de ce guide est acquis. Les questions portent uniquement sur ce qui vient d'être expliqué ici.

Contrôle de connaissances

Validez vos connaissances avec ce quiz interactif

6 questions

6 min.

70% requis

Informations

• Le chronomètre démarre au clic sur Démarrer
• Questions à choix multiples, vrai/faux et réponses courtes
• Vous pouvez naviguer entre les questions
• Les résultats détaillés sont affichés à la fin

Démarrer le quiz

Lance le quiz et démarre le chronomètre

FAQ : questions fréquentes

Les questions les plus posées sur Reveal.js : définition, installation, comparatifs avec Slidev et Marp, export PDF et écriture en Markdown.

Reveal.js, c'est quoi ?

Reveal.js ou Slidev : lequel choisir ?

Comment exporter une présentation Reveal.js en PDF ?

Reveal.js est-il gratuit ?

Peut-on écrire ses slides Reveal.js en Markdown ?

Comment installer Reveal.js ?

Reveal.js ou Marp : lequel choisir ?

À quoi sert le mode présentateur de Reveal.js ?

Plus d'infos

Trois références pour aller plus loin que cette leçon. La documentation officielle détaille toute l'API, les plugins et les thèmes ; le dépôt GitHub donne accès aux sources et aux versions ; le site de Slides présente des exemples de présentations.

• 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

Si votre besoin est de publier de la documentation plutôt que des slides, c'est le terrain des générateurs de sites comme Docusaurus, en docs as code.

×

📖 Voir la documentation →