Slidev 101 : créer des présentations avec Markdown

En tant que développeur évangéliste, je prends souvent la parole en public pour partager mon expérience et transmettre mes connaissances à d’autres développeurs. Je consacre donc beaucoup de temps à la création de présentations. Ce processus peut être fastidieux, surtout lorsqu’il faut tenir compte de détails comme la palette de couleurs, la composition visuelle et le fil conducteur. Au bout d’un moment, j’ai voulu trouver une méthode qui intègre une expérience de développement agréable au processus.

Heureusement, il existe une méthode plus efficace et plus programmatique pour concevoir vos diapositives : Slidev, le projet open source qui vous permet de coder vos présentations.

Applications de présentation ou présentations codées

J’ai créé des présentations avec Keynote, Google Slides et Slides.com, et j’ai rencontré plusieurs difficultés avec chacune de ces solutions, notamment :

• Keynote n’est pas très portable et nécessite d’exporter les diapositives au format PDF pour les partager.

• Google Slides est pratique pour la modification collaborative, et les thèmes standardisés des présentations de Snyk évitent que le travail visuel ne prenne trop de temps. Cependant, Google Slides ne permet pas d’animer le texte, une fonctionnalité très utile pour illustrer les modifications de code. Autre difficulté : Google Slides doit être utilisé « en ligne » pour fonctionner correctement — et nous savons tous à quel point le Wi-Fi des conférences peut être lent.

• Slides.com repose sur le projet open source Reveal.js, créé par le talentueux Hakim El Hattab. J’apprécie la simplicité de ce service de présentation en ligne, mais il ne permet pas de personnaliser les thèmes et je dépasse souvent les limites de la version gratuite (et parfois même celles de la version payante).

Au vu de ce qui précède, coder vos présentations présente plusieurs avantages :

• Vous disposez d’un historique des versions basé sur le code.

• La nature open source de GitHub facilite le partage de vos diapositives et la collaboration avec d’autres personnes.

Codez vos présentations avec Slidev sur GitHub

Avant de découvrir Slidev, précisons que coder les diapositives d’une présentation n’est pas une idée nouvelle. Patrick Debois, également connu comme le père du DevOps, a examiné cette idée dans un article de blog consacré à différents concepts as code. Reveal.js et MDX sont deux exemples de projets qui existent depuis longtemps.

Commençons par présenter Slidev et son origine. Slidev est un projet open source basé sur Vue.js, créé par Anthony Fu. Il vise à simplifier la création de diapositives en s’appuyant sur la syntaxe Markdown, tout en enrichissant les fonctionnalités existantes et en permettant aux utilisateurs de créer leurs propres composants.

Commencez par initialiser un projet Slidev dans un nouveau dossier :

1npm init slidev

Plusieurs questions vous seront posées sur le titre des diapositives, le nom du dossier et d’autres détails. Une fois cette étape terminée, le projet sera créé avec un exemple simple de composant et un fichier principal nommé slides.md, qui contient toute la présentation.

La structure des dossiers et le fichier de présentation devraient ressembler à ceci :

Examinons le contenu du fichier slides.md :

• Ce fichier Markdown contient une configuration YAML Frontmatter qui permet de personnaliser certaines diapositives ou l’ensemble de la présentation. Elle est délimitée par des caractères --- en ouverture et en fermeture.

• Chaque titre du fichier Markdown utilise la notation # Title heading 1 pour indiquer le titre et l’en-tête principal de la diapositive. Le contenu vient ensuite.

• La personnalisation des boutons et des éléments visuels de la diapositive se fait à l’aide de code HTML pour les éléments DOM <div> et <span>.

Une fois les modifications apportées à la présentation par défaut, nous pouvons lancer le projet Slidev en mode rechargement à chaud avec la commande suivante :

1npm run dev

Le contenu sera automatiquement intégré à une page Web, puis diffusé via localhost:3030. Une fenêtre de navigateur s’ouvrira également pour afficher le résultat, comme illustré ici :

Pour rédiger le contenu, il suffit d’écrire un fichier README en Markdown, un format que la plupart des développeurs connaissent bien. Voici un exemple de diapositive avec une liste à puces :

1---
2
3# What is Slidev?
4
5Slidev is a slide deck maker and presenter designed for developers, and consists of the following features
6
7- 📝 **Text-based** - focus on the content with Markdown, and then style them later
8- 🎨 **Themable** - theme can be shared and used with npm packages
9- 🧑‍💻 **Developer Friendly** - code highlighting, live coding with autocompletion
10- 🤹 **Interactive** - embedding Vue components to enhance your expressions
11- 🎥 **Recording** - built-in recording and camera view
12- 📤 **Portable** - export into PDF, PNGs, or even a hostable SPA
13- 🛠 **Hackable** - anything possible on a webpage
14
15<br>
16<br>
17
18Read more about [Why Slidev?](https://sli.dev/guide/why)
19
20<!--
21You can have a `style` tag in markdown to override the style for the current page.
22Learn more: https://sli.dev/guide/syntax#embedded-styles
23-->
24
25<style>
26h1 {
27  background-color: #2B90B6;
28  background-image: linear-gradient(45deg, #4EC5D4 10%, #146b8c 20%);
29  background-size: 100%;
30  -webkit-background-clip: text;
31  -moz-background-clip: text;
32  -webkit-text-fill-color: transparent;
33  -moz-text-fill-color: transparent;
34}
35</style>

Décomposons cet extrait de code pour examiner les éléments qui composent la diapositive :

1. La séquence --- commence une nouvelle diapositive et définit les configurations nécessaires. Dans cet exemple, aucune personnalisation particulière de Slidev n’était requise.

2. L’en-tête Markdown # What is Slidev? définit le titre de la diapositive correspondante.

3. Le corps de la diapositive suit le titre et s’écrit comme n’importe quel autre contenu en Markdown. Vous pouvez notamment insérer des sauts de ligne HTML avec <br>, ainsi que des émojis ou des liens au format Markdown à la fin de la diapositive.

4. Le bloc de commentaire HTML n’apparaît pas dans les diapositives, car il est réservé aux notes du présentateur. C’est une excellente façon de consigner vos réflexions directement dans le contenu !

5. La balise de style intégrée permet de remplacer le style du titre du thème (qui utilise simplement du texte blanc) et d’appliquer une couleur dégradée.

Voici une capture d’écran du rendu de cette diapositive :

Quand on passe beaucoup de temps à examiner des extraits de code source — comme c’est mon cas lorsque je présente des exemples de code vulnérable et des bonnes pratiques de sécurité — la coloration syntaxique est très utile.

Prenons le code Slidev suivant :

1---
2layout: image-right
3image: https://source.unsplash.com/collection/94734566/1920x1080
4---
5
6# Code
7
8Use code snippets and get the highlighting directly![^1]
9
10ts {all|2|1-6|9|all}
11interface User {
12  id: number
13  firstName: string
14  lastName: string
15  role: string
16}
17
18function updateUser(id: number, update: User) {
19  const user = getUser(id)
20  const newUser = { ...user, ...update }
21  saveUser(id, newUser)
22}
23
24<arrow v-click="3" x1="400" y1="420" x2="230" y2="330" color="#564" width="3" arrowSize="1">
25
26[^1]: [Learn More](https://sli.dev/guide/syntax.html#line-highlighting)

Cette diapositive commence par une personnalisation particulière, définie dans le bloc YAML délimité par ---. Elle configure la mise en page pour afficher une image à droite et en indique l’URL.

Le titre et le contenu de la diapositive viennent ensuite, avec une mise en évidence du code. L’extrait réagit aux clics de souris et suit le schéma d’animation suivant :

1. Au départ, Slidev met en évidence tout le bloc de code, comme l’indique la directive ts {all} au début du bloc.

2. À chaque clic pour avancer dans l’animation, une partie précise du code est mise en évidence : la ligne 2, puis les lignes 1 à 6, puis la ligne 9, et enfin à nouveau l’ensemble du code.

3. Le composant <arrow> sert ensuite à pointer une ligne de code à l’aide de coordonnées x et y (ce qui, je l’admets, n’est pas très convivial). Il s’affiche précisément au troisième clic de souris, comme l’indique l’attribut v-click=”3”.

4. Enfin, la diapositive comprend des notes de bas de page, très pratiques pour indiquer les crédits des images ou les références citées dans la présentation.

La capture d’écran suivante montre cette diapositive en action :

Pour conclure ce guide de démarrage, rappelons que Slidev étant basé sur le framework Vue.js, vous pouvez définir et utiliser n’importe quel composant Vue directement dans la syntaxe Markdown de vos diapositives, y compris ceux fournis par les thèmes que vous importez. Pour en savoir plus sur les composants Vue de Slidev, consultez le guide de documentation.

Exportation de Slidev, thèmes et autres fonctionnalités de présentation

Nous avons vu comment démarrer avec Slidev et Markdown. Mais Slidev offre bien d’autres fonctionnalités que j’ai hâte d’explorer pour mes prises de parole en public. En voici quelques-unes qui m’enthousiasment particulièrement.

Thèmes Slidev et bascule entre les modes clair et sombre

Imaginez passer des heures à créer votre présentation, puis découvrir que l’éclairage de la salle de conférence ne correspond pas du tout à vos attentes. Vous devez alors présenter en sachant que la majeure partie du contenu est illisible. C’est difficile.

Avec Slidev, la solution est simple. Le bouton Basculer en mode sombre dans la barre d’outils des diapositives permet de passer d’un mode clair à un mode sombre, sans vous soucier de l’éclairage ni de la lisibilité. Vérifiez que le thème utilisé prend en charge cette fonctionnalité. Je l’ai trouvée dans le thème par défaut de Slidev et dans plusieurs autres thèmes que j’ai utilisés. Dans l’ensemble, c’est une bonne chose de voir les créateurs de thèmes l’inclure dans leurs créations.

La page de documentation Slidev Themes propose déjà quelques thèmes sélectionnés, mais vous pouvez aussi rechercher dans le registre npm les packages publiés avec le tag slidev-theme pour en trouver d’autres.

Présenter facilement avec le mode présentateur de Slidev

Autre fonctionnalité utile : un mode présentateur accessible en ouvrant une URL spécifique. Contrairement à d’autres applications de présentation, où le mode présentateur est intégré à la bascule de la vue Présentation, Slidev permet d’y accéder dans un navigateur. Vous pouvez ainsi consulter vos notes ou les diapositives suivantes en ouvrant le lien sur votre téléphone ou votre tablette.

Exporter une présentation Slidev ou simplement la consulter en ligne

L’exportation d’une présentation Slidev au format PDF ou PNG nécessite un rendu avec Playwright — ce qui revient essentiellement à capturer l’écran d’un navigateur sans interface graphique.

C’est assez simple, bien plus qu’il n’y paraît, mais il est utile de comprendre le fonctionnement. La page de documentation Slidev Export explique tout en détail, notamment comment basculer entre les modes clair et sombre des diapositives et utiliser les animations au clic.

J’ai toutefois réfléchi à une façon de partager ma présentation Slidev en procédant comme suit :

1. Les diapositives sont hébergées dans un dépôt GitHub.

2. Une intégration continue se déclenche à chaque commit et génère un site Web statique qui est déployé sur Vercel ou Netlify.

3. La même intégration continue génère également l’export PDF de Slidev dans le cadre de la compilation, et GitHub Actions peut le stocker comme artefact. Cependant, les artefacts ne sont conservés que pendant 90 jours. Il nous faudrait donc trouver une autre solution. Une possibilité serait de valider le fichier PDF généré dans le dépôt GitHub.

Codez vos présentations avec Slidev

Et voilà ! Merci d’avoir suivi mon parcours de création de présentations codées avec Slidev. J’espère qu’il vous donnera envie d’essayer une approche similaire ou d’imaginer une méthode encore meilleure pour créer des diapositives personnalisées et programmables.