Comment coder vos présentations en Markdown avec Slidev

Créer des présentations ne devrait pas ressembler à une rupture de contexte par rapport à votre flux de travail de développement. Pourtant, les outils traditionnels vous imposent des interfaces glisser-déposer, des formats propriétaires et des cauchemars de gestion de versions. Slidev propose une approche différente : des diapositives basées sur Markdown, soutenues par les mêmes outils frontend que vous utilisez déjà.

Cet article couvre le flux de travail principal de présentation avec Slidev — de la création à l’export — et explique pourquoi il séduit les développeurs qui souhaitent placer leurs diapositives sous contrôle de version.

Ce qui distingue Slidev des autres outils de présentation

Slidev n’est pas simplement un générateur de diapositives. C’est une application Vue 3 propulsée par Vite qui traite Markdown comme son format d’entrée principal. Cette distinction est importante car vous bénéficiez de toute la puissance des outils frontend modernes : remplacement de module à chaud pendant le développement, architecture basée sur les composants et un écosystème de plugins.

Contrairement à PowerPoint ou Google Slides, votre présentation existe sous forme de fichiers texte brut. Contrairement aux outils plus anciens comme Reveal.js, Slidev s’intègre directement avec l’écosystème Vue. Vous pouvez insérer des composants Vue dans votre Markdown lorsque vous avez besoin d’interactivité au-delà de ce qu’offrent les diapositives statiques.

Le résultat : des présentations qui semblent naturelles pour les développeurs frontend. Vos connaissances existantes en CSS, JavaScript et architecture de composants se transfèrent directement.

Le flux de travail principal de présentation avec Slidev

Création de diapositives en Markdown

Un projet Slidev se concentre sur un fichier slides.md. Chaque diapositive est séparée par ---, et vous configurez les diapositives individuelles ou l’ensemble du jeu via un frontmatter YAML.

---
theme: default
---

# Welcome

Your first slide content here.

---

# Second Slide

- Bullet points work as expected
- So does **bold** and *italic* text

La syntaxe Markdown standard gère la plupart du contenu : titres, listes, liens et images. Les blocs de code bénéficient automatiquement de la coloration syntaxique. Lorsque vous avez besoin de quelque chose que Markdown ne peut pas exprimer, vous écrivez du HTML ou des composants Vue en ligne.

Lancement du serveur de développement

L’interface en ligne de commande démarre un serveur de développement local avec rechargement à chaud. Modifiez votre fichier Markdown et le navigateur se met à jour immédiatement. Une vue présentateur affiche votre diapositive actuelle, la diapositive suivante et les notes de présentation, accessibles via une URL de vue présentateur distincte.

Cette boucle de rétroaction serrée rend l’itération rapide. Vous n’attendez pas les exports ou les reconstructions.

Organisation de présentations plus volumineuses

Pour des présentations conséquentes, répartissez le contenu sur plusieurs fichiers. La propriété src dans le frontmatter importe des fichiers Markdown externes :

---
src: ./slides/introduction.md
---

---
src: ./slides/main-content.md
---

Ce modèle maintient les fichiers individuels à une taille gérable et vous permet de réorganiser les sections en déplaçant les instructions d’import.

Extension des diapositives avec des composants Vue

Les outils frontend de Slidev brillent lorsque vous avez besoin de plus que du contenu statique. N’importe quel composant Vue fonctionne à l’intérieur de votre Markdown — qu’il provienne du thème, d’un package tiers ou de votre propre répertoire components/.

Les cas d’usage courants incluent :

• Animations au clic : La directive v-click révèle le contenu progressivement
• Diagrammes : Le support intégré de Mermaid génère des organigrammes et des diagrammes de séquence à partir de texte
• Code en direct : Les intégrations de l’éditeur Monaco permettent l’édition de code en direct pendant les présentations
• Mises en page personnalisées : Créez des modèles de diapositives réutilisables sous forme de composants Vue

Vous n’êtes pas limité à ce que l’outil fournit par défaut.

Export et partage de présentations

L’export est une fonctionnalité de premier ordre, pas une réflexion après coup. Slidev produit :

• PDF : Pour le partage hors ligne ou l’impression
• PNG : Images de diapositives individuelles
• PPTX : Quand quelqu’un insiste pour avoir du PowerPoint
• SPA : Une application monopage statique que vous pouvez déployer n’importe où

L’export SPA mérite une attention particulière. Déployez-le sur Vercel, Netlify ou GitHub Pages, et votre présentation devient une URL partageable. Combinez cela avec des pipelines CI/CD, et chaque commit dans votre dépôt produit un nouveau déploiement.

Pourquoi les développeurs frontend choisissent Slidev

L’attrait se résume à l’alignement du flux de travail :

• Contrôle de version : Comparez vos diapositives, examinez les modifications dans les pull requests et maintenez un historique
• Réutilisation des compétences existantes : CSS, Vue et JavaScript fonctionnent exactement comme prévu
• Extensibilité : Les thèmes et plugins suivent les conventions npm
• Personnalisation : Remplacez n’importe quoi via les technologies web standard

Si vous êtes à l’aise avec Markdown et les outils JavaScript modernes, Slidev élimine les frictions plutôt que d’en ajouter.

Pour commencer

Initialisez un nouveau projet via l’interface en ligne de commande Slidev avec votre gestionnaire de packages préféré :

npm init slidev@latest

Le projet généré inclut des exemples de diapositives démontrant les fonctionnalités principales. À partir de là, remplacez le contenu d’exemple par le vôtre et lancez le serveur de développement.

La documentation officielle couvre les détails de syntaxe, l’installation de thèmes et la configuration avancée. Commencez simplement — contenu Markdown avec style par défaut — puis ajoutez progressivement des composants et de la personnalisation selon vos besoins.

Conclusion

Slidev transforme les présentations en un flux de travail maintenable, axé sur le code. En traitant les diapositives comme des fichiers Markdown propulsés par Vue et Vite, il s’aligne sur la façon dont les développeurs frontend travaillent déjà. Le contrôle de version devient naturel, la personnalisation utilise des technologies web familières et les options d’export couvrent tous les scénarios de partage. Vos diapositives méritent les mêmes outils que vos applications.

FAQ

Gain Debugging Superpowers

Unleash the power of session replay to reproduce bugs, track slowdowns and uncover frustrations in your app. Get complete visibility into your frontend with OpenReplay — the most advanced open-source session replay tool for developers. Check our GitHub repo and join the thousands of developers in our community.