Codez votre PPT avec Slidev

Introduction

Vous qui avez déjà peaufiné des dizaines de présentations PowerPoint, que ce soit pour une soutenance, un support de formation, des solutions techniques, ou d'adorables petits exposés scolaires 😇, savez-vous qu'il existe des alternatives logicielles à PowerPoint ou Keynote mais ultra orientées dev ?

Il existe en réalité plusieurs projets comme Reveal.js ou Marp qui proposent concrètement d'utiliser un langage de programmation ou équivalent pour préparer un diaporama avec du contenu multimédia et des animations.
Mais aujourd'hui je vous invite à en découvrir un en particulier : Slidev.

Slidev est un jeune projet Node.js Open Source et un peu "fou". Essentiellement écrit en TypeScript, il est doté d'une interface graphique en Vue.js.
Il propose de coder ses diapos à l'aide de Markdown enrichi, un format assez simple et déjà bien connu de tous.

À l'heure où j'écris ces lignes, Slidev est encore en version 0.49 – donc très expérimental – mais vous allez voir à travers ce tuto qu'il présente déjà quelques fonctionnalités qui valent vraiment le détour !

Note : pour ceux qui sont pressés, vous pouvez directement tester Slidev ici.

Pourquoi diable s'embêter à coder un diaporama ?

On pourrait croire qu'un pseudo langage comme le Markdown nous ferait économiser du temps d'écriture, comparé aux déplacements sinueux de la souris dans un logiciel classique (PowerPoint, Keynote, …).

Oubliez ça.

Bien que l'on puisse gagner un peu de temps lorsqu'on se contente d'un layout très simple (car Slidev positionne automatiquement les éléments sur chaque diapositive avec le layout et le thème choisis), il y a une autre vraie bonne raison : les possibilités.

Les possibilités, c'est de pouvoir faire des présentations ultra techniques avec une meilleure intégration de code (une intégration de code tout court, en fait 😄). Vous pouvez par exemple montrer des extraits de code avec coloration syntaxique, créer des animations avancées sur des parties précises, intégrer des formules LaTeX, coder directement en Vue.js ou même ajouter des fonctionnalités dynamiques comme le "live coding" !

Enfin, une autre bonne raison est de pouvoir mettre en place un système de synchronisation entre un thème de référence et celui appliqué sur le diaporama. Ainsi, votre diaporama suivra automatiquement les évolutions de la charte graphique de l'entreprise !

Explorons maintenant ensemble toutes ces possibilités offertes par cette étonnante lib.

Codons un diaporama

La base

Commencez par initialiser un projet Node.js en suivant les instructions ici et créez un fichier d'entrée slides.md à la racine.

Placez une image d'arrière-plan dans un répertoire imgs, et ajoutez alors ce contenu minimal dans votre fichier slides.md (pensez à adapter le chemin de votre image) :

---
background: ./imgs/background.webp
---

# Le titre de ma première diapo

Créez des diapos tech et dynamiques !

<!--
Quelques notes réservées au présentateur pour la première diapo.
-->

Lancez la commande npm exec slidev -- --port 3030 "slides.md".
Vous aurez alors accès à 3 espaces principaux :

• une interface web sur http://localhost:3030/ pour montrer le diaporama à votre public (et avec une vignette caméra déplaçable, trop cool !) :

• une page localhost:3030/presenter pour contrôler votre diaporama en mode présentateur :

• et une dernière page localhost:3030/overview histoire d'avoir un aperçu global de toutes vos diapos, même si vous préfèrerez sûrement l'affichage en grille depuis le mode présentateur (icône "Show slide overview").

Vous pouvez également installer une extension pour VS Code qui ajoute l'autocomplétion, vous permet de vous déplacer directement à une section depuis un titre, de réorganiser l'ordre des diapos, ou même d'avoir un aperçu en temps réel dans une vignette :

Et tous ces espaces sont globalement synchronisés entre eux !

Attention : si vous utilisez Prettier, il faudra le configurer pour éviter les conflits avec ce Markdown un peu spécial !

Configurez le thème et les layouts

Commençons à configurer les slides de notre diaporama.

Il faut savoir que Slidev construit chaque diaporama en composant le contenu des fichiers .md avec un thème graphique et un ensemble de layouts.

Tout d'abord je vous propose de choisir un thème dans la galerie officielle.
Vous pouvez le spécifier une (et une seule) fois dans ce que l'on appelle la partie headmatter, tout en haut du fichier Markdown :

---
theme: default
transition: slide-left
background: ./imgs/background.webp
title: Mon premier diaporama
---

# Le titre de ma première diapo

Créez des diapos tech et dynamiques !

Toutes les polices, tailles, couleurs et images par défaut seront automatiquement configurées !

Notez bien les --- avant et après l'en-tête, car ils délimitent la partie "en-tête" de la partie "contenu" pour chaque slide.

Au passage, on en profite également pour configurer les animations entre chaque diapo : transition: slide-left qui va faire glisser la diapo suivante de la droite vers la gauche. Sobre, mais efficace.

Ensuite, créez une nouvelle slide et ajoutez un layout image-right, dans la partie que l'on appelle alors frontmatter (tout un vocabulaire 😌).
Ce layout vous permettra d'ajouter le chemin d'une image, qui peut tout à fait être une URL d'ailleurs !

# Le titre de ma première diapo

Créez des diapos tech et dynamiques !

---
layout: image-right
image: https://domain.org/imgs/background.webp
---

Ici on ajoute du contenu uniquement sur la partie gauche de la diapo.

Il existe également les layouts center, full, fact, iframe-right, quote, etc.

Il ne peut y avoir qu'un seul thème par diaporama, mais chaque slide peut avoir un layout différent.

De manière générale, les layouts disponibles par défaut restent très simples et la plupart du temps, ils sont suffisants.
Si toutefois vous cherchez une disposition personnalisée, il faudra soit aller chercher un plugin existant, soit écrire quelques lignes de code (cf. doc officielle).

Maintenant, entrons dans le vif du sujet et expérimentons des contenus riches autour de code et de schémas qu'un logiciel de diaporama classique ne serait pas en mesure de gérer !

Présentez du code avec classe

Extraits de code et animations

Dans la diapo que vous venez de créer, commencez par ajouter un extrait de code de la même façon qu'en Markdown :

On obtient une présentation basique du code avec coloration syntaxique et le texte sélectionnable.

Mais avec le Markdown enrichi que nous propose Slidev, nous allons pouvoir ajouter des options très intéressantes, comme l'affichage du numéro des lignes et la surbrillance successive des lignes 5, 1 puis 2 au clic de souris (ou les flèches du clavier), comme si l'on simulait un débogage !

Et si on allait un peu plus loin dans les animations ?

Imaginez que vous souhaitiez présenter une refactorisation ou tout simplement un JSON, par exemple, qui évoluerait plusieurs fois, successivement.
Eh bien, vous allez pouvoir animer ce code automatiquement avec la feature shiki-magic-move pour mettre en évidence ces évolutions :

Et le rendu slidev, toujours animé au clic de souris ou flèches clavier :

Magique ! 😲

Live Coding

Nous venons de voir la présentation de code statique. Maintenant nous allons construire une slide qui va nous permettre de réaliser une démonstration de code en direct, et sans quitter la présentation.

Ajoutez une nouvelle slide avec un layout de type full pour un affichage confortable. Puis ajoutez la suite de Fibonacci dans un extrait de code avec la mention {monaco-run} pour activer l'éditeur.

L'éditeur Monaco intégré va alors nous permettre de modifier le code en direct avec le linter, l'autocomplétion, et même l'exécution en temps réel !

Construisez des schémas avancés

Slidev prend en charge les graphes PlantUML et Mermaid. Si vous ne connaissez pas encore ce dernier, je vous conseille d'aller faire un tour sur notre article ici.

Mermaid offre beaucoup plus de possibilités qu'un système de drag-n-drop de formes qu'on trouverait dans un logiciel classique : diagrammes de séquence, classes, mindmap, git graph…

Ici je vous propose de partir sur un diagramme de Gantt, car c'est typiquement le genre de diagramme qui pourrait décourager à dessiner dans un soft classique.

Créez une nouvelle slide intitulée "Organisation du projet", avec le layout default qui, ici, convient à un diagramme qui a tendance à s'étendre sur la longueur. Ensuite, vous allez pouvoir ajouter directement un extrait de code de type mermaid pour dessiner un diagramme de Gantt, par exemple, sur l'organisation des développements d'une appli web entre une équipe UI/UX, une front, et une back.

Ce qui nous génère un magnifique diagramme de Gantt dans notre diapo !

Comme vous pouvez le constater, la syntaxe nécessite quand même une certaine prise en main. Mais avec un peu d'expérience, l'écriture, et surtout, la mise à jour du diagramme dans le diaporama deviennent très intéressantes !

Multipliez les possibilités avec des composants externes

Dans cette partie nous allons pousser l'intégration d'éléments externes en combinant une scène 3D du système solaire avec un Component Vue.js dans une seule et même diapositive.

Tout d'abord, commençons par créer une diapo très simple, qui va juste se contenter d'afficher notre composant Vue.js :

---
title: Contenus externes
layout: full
---

# Un composant Vue.js dynamique

<PlanetTeleporter />

Ensuite, créez un fichier components/PlanetTeleporter.vue à la racine du projet.

Dans ce nouveau composant, nous allons construire :

• un iframe ouvert sur une page web intégrant un système solaire en 3D (basé sur Three.js) ;
• et un bouton superposé qui va légèrement modifier l'URL de la scène 3D pour se téléporter directement à la planète Saturne.

<script setup lang="ts">
import { ref } from 'vue';

const url = ref("https://eyes.nasa.gov/apps/solar-system/")

function toSaturn(){
    url.value = "https://eyes.nasa.gov/apps/solar-system/#/saturn"
}
</script>

<template>
  <section>
    <iframe :src="url" title="Page externe système solaire"></iframe>
    <button @click="toSaturn">Vers Saturne !</button>
  </section>
</template>

<style scoped>
section {
    position: relative;
    height: 85%;
}

button {
    position: absolute;
    left: 380px;
    top: 15px;
    border: 1px solid white;
    color: white;
    width: 120px;
    padding: 5px;
    font-family: mono;
    background-color: black;
}

button:hover {
    background-color: gray;
}

iframe {
    width: 100%;
    height: 100%;
}
</style>

Si vous regardez alors le rendu :

… et toujours sans quitter votre slide !

Imaginez maintenant tout ce que vous allez pouvoir faire en intégrant des composants dynamiques encore plus avancés, ou en manipulant directement du SVG pour une qualité graphique toujours nickel ! 🤩

Maintenant, vous avez toutes les clés en main pour créer des diaporamas techniques complètement dingues !

Et si vous cherchez encore de l'inspiration, je vous invite à jeter un œil à la galerie d'exemples.

Conclusion

À travers ce tuto, nous avons pu explorer de nombreuses fonctionnalités qu'offre la lib Slidev, surtout d'un point de vue intégration de code dynamique, de schémas et contenus externes.

Avec du recul, on constate également que Slidev est un projet encore très récent, qui manque peut-être encore un peu de stabilité et d'uniformité dans la syntaxe par rapport à d'autres projets comme Reveal.js.
Par ailleurs, dès que l'on souhaite une disposition ou une animation particulière, la tâche peut rapidement s'annoncer plus ardue que prévu et nécessiter un investissement assez important. Mais au bout du compte, le jeu en vaut peut-être la chandelle ?

Et comme je le disais au début de ce tuto, ce qui nous intéresse surtout ici, ce sont les possibilités !