Slidev : créer des présentations techniques en Markdown

Slidev transforme un fichier Markdown en une présentation interactive avec animations, code en surbrillance, diagrammes Mermaid, éditeur Monaco (celui de VS Code) intégré et mode présentateur, le tout dans le navigateur. Créé par Anthony Fu, c'est l'outil idéal pour les développeurs et les équipes DevOps qui veulent traiter leurs présentations comme du code : versionnées avec Git, éditées dans VS Code, exportées en PDF ou PPTX. Ce guide couvre l'installation, la création de contenu, les animations, les thèmes, les addons et l'export avec Slidev v52.

Qu'est-ce que Slidev ?

Slidev (prononcé « slide-ev ») est un framework de présentation basé sur le web. On écrit ses slides dans un fichier Markdown, et Slidev les transforme en une application web interactive avec navigation clavier, animations et live reload. Il s'appuie sur Vue.js pour le rendu des composants et sur Vite pour le serveur de développement, ce qui lui donne un rechargement instantané à chaque sauvegarde.

Concrètement, la présentation n'existe jamais sous forme de fichier binaire : le fichier source est un .md versionnable, le rendu est une application web générée à la volée. Cela change deux choses au quotidien : une revue de présentation se fait en pull request comme une revue de code, et la mise en forme se pilote par des directives textuelles, pas par des poignées de redimensionnement.

Slidev vs PowerPoint, Google Slides et Reveal.js

La différence tient en une phrase : Slidev écrit les slides en Markdown versionné dans Git, là où PowerPoint repose sur un fichier binaire .pptx, Google Slides sur un document cloud, et Reveal.js sur du HTML/JS à écrire à la main. Concrètement, Slidev est le seul à traiter une présentation comme du code relu en pull request, avec code interactif et diagrammes Mermaid natifs. Le tableau ci-dessous détaille ce que chacun apporte pour une présentation technique.

Caractéristique	Slidev	PowerPoint	Google Slides	Reveal.js
Format source	Markdown (texte)	Binaire (.pptx)	Cloud	HTML/Markdown
Versioning	Git natif	Limité	Historique cloud	Git natif
Code interactif	Monaco (VS Code) intégré	Capture d'écran	Capture	Plugin
Diagrammes	Mermaid natif	Manuel	Manuel	Plugin
Animations	Vue.js + CSS avancé	Natif (clic)	Basique	CSS
Mode présentateur	Navigateur (notes + timer)	Natif	Natif	Oui
Export	PDF, PPTX, PNG, SPA	PDF, PPTX	PDF, PPTX	PDF
Thèmes	npm (communauté)	Modèles intégrés	Modèles intégrés	CSS
Personnalisation	Vue.js + UnoCSS illimité	Limitée	Très limitée	CSS

Glissez pour voir

Slidev est particulièrement adapté aux présentations techniques :

• Code lisible : coloration syntaxique Shiki, surlignage de lignes, éditeur Monaco interactif en live
• Diagrammes Mermaid natifs : architectures, pipelines, séquences, modifiables en Markdown
• Versionné avec Git : chaque modification est traçable, on peut faire des merges, des branches et des revues de présentation
• Animations au clic : révéler progressivement les points pour garder l'attention du public
• Export multiple : PDF pour les participants, PPTX pour les managers, SPA pour le web

Slidev v52, changements majeurs

Ce guide couvre Slidev v52.12.0 (février 2026). La numérotation a sauté de la v0.49 à la v51+ (adoption du versioning CalVer). Les changements principaux : le moteur CSS est passé à UnoCSS (Windi CSS supprimé), l'export utilise Playwright, et la syntaxe MDC (Markdown Components) est supportée nativement.

Prérequis

Avant de commencer, vérifiez que votre machine dispose de :

• Node.js 18 ou supérieur : Slidev est un outil Node.js
• npm (inclus avec Node.js) ou pnpm (recommandé pour la performance)
• Un éditeur de texte (VS Code recommandé, l'extension Slidev ajoute la prévisualisation et la navigation)

node --version
npm --version

Vérification : ces commandes doivent afficher des versions >= 18 pour Node.js. Si Node.js n'est pas installé, utilisez nvm ou téléchargez depuis nodejs.org.

Installation

npm

mkdir ma-presentation && cd ma-presentation
npm init -y
npm install @slidev/cli @slidev/theme-default

pnpm

mkdir ma-presentation && cd ma-presentation
pnpm init
pnpm add @slidev/cli @slidev/theme-default

Création rapide

npm init slidev@latest

L'assistant interactif crée le projet, installe les dépendances et propose de lancer le serveur immédiatement.

Vérification :

npx slidev --version

Résultat attendu :

v52.12.0

Créer une première présentation

1. Créez le fichier principal slides.md à la racine du projet :

   slides.md

   ---
   theme: default
   title: "Ma première présentation"
   transition: slide-left
   mdc: true
   ---
   
   # Ma première présentation
   
   Bienvenue dans Slidev !
   
   ---
   
   ## Deuxième slide
   
   - Point numéro 1
   - Point numéro 2
   - Point numéro 3
   
   ---
   layout: center
   ---
   
   # Merci !

   Chaque slide est séparée par --- (trois tirets sur une ligne seule). Le bloc YAML en tête configure la présentation entière.

2. Lancez le serveur de développement :

   npx slidev --open

   Le navigateur s'ouvre sur http://localhost:3030. Le live reload recharge la présentation instantanément à chaque sauvegarde du fichier.

3. Explorez les modes :

   URL	Mode
   localhost:3030	Vue publique (slides)
   localhost:3030/presenter	Mode présentateur (notes + timer + slide suivante)
   localhost:3030/overview	Vue d'ensemble de toutes les slides

   Glissez pour voir

Port déjà utilisé ?

Si le port 3030 est occupé, changez-le : npx slidev --port 3031 --open

Structure d'un projet Slidev

ma-presentation/
├── slides.md          # Fichier principal (contenu des slides)
├── components/        # Composants Vue.js personnalisés (optionnel)
├── layouts/           # Layouts personnalisés (optionnel)
├── public/            # Fichiers statiques (images, vidéos, PDF...)
├── styles/            # CSS / UnoCSS personnalisé (optionnel)
├── snippets/          # Extraits de code importables (optionnel)
├── pages/             # Slides externalisées (optionnel)
├── package.json
└── node_modules/

Tous les dossiers sont optionnels : le seul fichier obligatoire est slides.md. On ajoute les dossiers au fur et à mesure des besoins.

Front matter (configuration)

Le bloc YAML en tête de slides.md configure toute la présentation. On y définit le thème, les transitions, les options de code et les métadonnées.

En-tête de slides.md

---
theme: default                  # Thème npm à utiliser
title: "Formation DevOps"       # Titre de la présentation
info: |                         # Description (visible en mode overview)
  Présentation créée avec Slidev v52.
  Couvre CI/CD et conteneurisation.
author: Équipe DevOps           # Auteur
keywords: devops,cicd,docker    # Mots-clés (export PDF)
transition: slide-left          # Transition par défaut entre slides
mdc: true                       # Active la syntaxe MDC (composants en Markdown)
lineNumbers: true               # Numéros de lignes dans les blocs de code
drawings:
  persist: false                # Persistance des dessins entre reloads
---

Chaque slide peut aussi avoir son propre front matter pour écraser les paramètres globaux. Ce front matter local se place juste après le séparateur --- :

---
layout: center
transition: fade
---

# Cette slide est centrée avec un fondu

Layouts intégrés

Les layouts définissent la mise en page d'une slide. On les spécifie dans le front matter local.

Layouts principaux

Ces treize layouts sont fournis par le thème par défaut et suffisent à couvrir une conférence entière. Trois d'entre eux portent l'essentiel du travail : cover pour ouvrir, two-cols pour toute slide qui met en regard une explication et du code, section pour marquer les transitions de chapitre. Les autres relèvent de l'effet ponctuel. Attention, la liste dépend du thème actif : un thème tiers peut en retirer ou en ajouter, et un layout: inconnu fait échouer le rendu de la slide.

Layout	Usage
default	Contenu libre (par défaut)
cover	Slide de titre / introduction
center	Contenu centré (messages clés, citations)
two-cols	Deux colonnes (texte + code, comparaison)
image-right	Image à droite, texte à gauche
image-left	Image à gauche, texte à droite
image	Image en plein écran (fond)
section	Titre de section intermédiaire
statement	Citation ou déclaration
end	Slide de fin
fact	Chiffre clé mis en avant
quote	Citation formatée
iframe	iFrame plein écran

Glissez pour voir

Exemples concrets

Slide de couverture :

---
layout: cover
---

# Formation DevOps

## CI/CD et Conteneurs - Février 2026

Deux colonnes (texte + code) :

Le séparateur ::right:: délimite le contenu de la colonne droite. C'est le layout le plus utilisé pour expliquer du code : l'explication à gauche, le code à droite.

---
layout: two-cols
layoutClass: gap-16
---

## Explication

Un Dockerfile décrit comment construire une image.
Chaque instruction crée une couche (layer).

::right::

```dockerfile
FROM python:3.12-slim@sha256:57cd7c3a7a273101a6485ba99423ee568157882804b1124b4dd04266317710de
WORKDIR /app
COPY requirements.txt .
RUN pip install -r requirements.txt
COPY . .
CMD ["python", "app.py"]
```

Image à droite :

---
layout: image-right
image: /architecture.png
backgroundSize: contain
---

## Architecture

Voici le schéma d'architecture de notre plateforme
de déploiement continu.

Les images dans le dossier public/ sont accessibles par /nom-fichier.png.

Animations et transitions

Les animations sont l'un des points forts de Slidev. Elles permettent de révéler progressivement le contenu, le public reste concentré sur le point en cours au lieu d'être submergé par la slide entière.

Animations au clic (v-click)

À chaque pression sur Espace ou flèche droite, un nouvel élément apparaît.

Révéler une liste point par point :

<v-clicks>

- Premier point
- Deuxième point
- Troisième point

</v-clicks>

Révéler un bloc entier :

<v-click>

Ce paragraphe apparaît au prochain clic.

</v-click>

Contrôler l'ordre d'apparition :

<div v-click="3">Apparaît au 3e clic</div>
<div v-click="1">Apparaît au 1er clic</div>
<div v-click="2">Apparaît au 2e clic</div>

Masquer un élément après un clic :

<div v-click.hide="3">Visible jusqu'au 3e clic, puis disparaît</div>

Surlignage décoratif (v-mark)

La directive v-mark surligne un élément avec un effet « dessiné à la main » (bibliothèque Rough Notation) :

<span v-mark="{ color: '#f59e0b', type: 'highlight' }">Texte surligné</span>
<span v-mark="{ color: '#ef4444', type: 'circle' }">Encerclé</span>
<span v-mark="{ color: '#3b82f6', type: 'underline' }">Souligné</span>

Types disponibles : highlight, underline, circle, box, strike-through, crossed-off, bracket.

Animations de mouvement (v-motion)

La directive v-motion (basée sur VueUse Motion) anime l'apparition d'un élément avec des propriétés CSS :

<div
  v-motion
  :initial="{ x: -80, opacity: 0 }"
  :enter="{ x: 0, opacity: 1 }"
  :leave="{ x: 80, opacity: 0 }"
>
  Ce texte glisse depuis la gauche.
</div>

Transitions entre slides

La transition par défaut est définie dans le front matter global (transition: slide-left). On peut la changer slide par slide :

---
transition: fade-out
---

## Cette slide utilise un fondu en sortie

Transitions disponibles : slide-left, slide-right, slide-up, slide-down, fade, fade-out, none.

Blocs de code avancés

Slidev utilise Shiki (le moteur de coloration de VS Code) pour la syntaxe. Les fonctionnalités avancées transforment les slides techniques en véritables supports pédagogiques.

Surlignage progressif de lignes

La syntaxe {all|lignes|lignes|all} surligne des lignes différentes à chaque clic. Le présentateur avance pas à pas dans le code :

```dockerfile {all|1|3-4|6-7|9|all}
FROM python:3.12-slim@sha256:57cd7c3a7a273101a6485ba99423ee568157882804b1124b4dd04266317710de

WORKDIR /app
COPY requirements.txt .

RUN pip install --no-cache-dir \
    -r requirements.txt

COPY . .
```

Voici ce qui se passe à chaque clic :

Clic	Lignes surlignées	Explication
1	Tout le code	Vue d'ensemble
2	Ligne 1	Image de base Python
3	Lignes 3-4	Répertoire de travail et copie des dépendances
4	Lignes 6-7	Installation des dépendances
5	Ligne 9	Copie du code applicatif
6	Tout le code	Récapitulatif

Glissez pour voir

C'est l'outil pédagogique le plus puissant de Slidev pour expliquer du code en formation. Chaque clic focalise l'attention sur une partie spécifique.

Surlignage statique

Pour surligner des lignes sans animation, on indique directement les numéros :

```yaml {2-4}
apiVersion: v1
kind: ConfigMap
metadata:
  name: app-config
```

Numéros de lignes et titre

Les options se déclarent entre accolades après le langage de la fence. lines: true affiche la numérotation, et startLine décale le premier numéro, ce qui sert quand vous montrez un extrait pris au milieu d'un fichier : le lecteur retrouve la ligne exacte dans le fichier réel. Ces options se combinent avec la mise en évidence par clic.

```bash {lines: true, startLine: 10}
docker build -t app:1.0 .
docker push registry/app:1.0
```

Éditeur Monaco (code éditable en live)

Slidev embarque Monaco Editor (le moteur de VS Code). Le présentateur peut modifier et exécuter du code en direct pendant la présentation. C'est l'atout majeur pour les formations techniques.

Code éditable :

```ts {monaco}
// Ce code est éditable en live !
interface Pipeline {
  name: string
  stages: string[]
  trigger: 'push' | 'manual' | 'schedule'
}

const ci: Pipeline = {
  name: 'CI/CD',
  stages: ['lint', 'test', 'build', 'deploy'],
  trigger: 'push'
}
```

Code éditable ET exécutable :

```ts {monaco-run}
// Ce code s'exécute en live dans la slide !
const tools = ['Docker', 'Kubernetes', 'Terraform', 'Ansible']
console.log(`Outils : ${tools.sort().join(', ')}`)
console.log(`Total : ${tools.length}`)
```

Le résultat du console.log s'affiche directement sous le bloc de code.

Monaco et les formations

L'éditeur Monaco est la fonctionnalité qui distingue le plus Slidev des autres outils de présentation. Les participants voient le code modifié et exécuté en direct, plus besoin de basculer entre la présentation et un terminal. Avec {monaco-run}, on peut même montrer les résultats en temps réel.

Import de fichiers externes

Pour les blocs de code longs, on importe un fichier depuis le dossier snippets/ :

<<< @/snippets/deploy.yaml {2-4}

Le contenu de snippets/deploy.yaml est injecté dans la slide, avec le surlignage des lignes 2 à 4.

Diagrammes Mermaid

Slidev intègre Mermaid nativement. Un bloc de code en langage mermaid génère un diagramme interactif dans la slide.

Flowchart (pipeline CI/CD) :

```mermaid
flowchart LR
    A[Push Git] --> B[CI Pipeline]
    B --> C{Tests OK ?}
    C -->|Oui| D[Deploy Staging]
    C -->|Non| E[Notification]
    D --> F[Deploy Prod]
```

Diagramme de séquence :

```mermaid {scale: 0.7}
sequenceDiagram
    participant Dev as Développeur
    participant Git as GitHub
    participant CI as Pipeline CI
    participant K8s as Kubernetes

    Dev->>Git: git push
    Git->>CI: Déclenche le pipeline
    CI->>CI: Tests + Build
    CI->>K8s: kubectl apply
    K8s-->>Dev: Notification
```

Le paramètre {scale: 0.7} réduit la taille du diagramme si nécessaire. Mermaid supporte les flowcharts, séquences, classes, Gantt, états, ER, et bien d'autres types de diagrammes.

Tester les diagrammes Mermaid

Avant d'insérer un diagramme dans une slide, testez-le sur mermaid.live. L'éditeur en ligne valide la syntaxe et montre un aperçu en temps réel.

Notes du présentateur

Les notes sont écrites en commentaire HTML après le contenu d'une slide :

## Architecture microservices

Voici l'architecture de notre plateforme.

<!--
Points clés à mentionner :
- Le load balancer distribue le trafic
- Chaque service a sa propre base de données
- La communication inter-services passe par RabbitMQ
Durée : 3 minutes sur cette slide.
-->

Les notes sont visibles uniquement en mode présentateur (localhost:3030/presenter). Ce mode affiche :

• La slide courante et la slide suivante (anticipation)
• Les notes du présentateur
• Un minuteur (temps écoulé)
• Les contrôles de navigation

Syntaxe MDC (Markdown Components)

Avec mdc: true dans le front matter, Slidev active la syntaxe MDC (Markdown Components). C'est une façon d'utiliser des composants directement en Markdown, sans balises HTML :

::alert{type="info"}
Ceci est une alerte informative, directement en Markdown.
::

::alert{type="warning"}
Attention : cette fonctionnalité nécessite `mdc: true` dans le front matter.
::

MDC permet aussi d'ajouter des attributs inline sur n'importe quel élément :

Ce [texte en rouge]{.text-red-500 .font-bold} utilise des classes UnoCSS.

Composants HTML et Vue.js

Slidev étant basé sur Vue.js, on peut utiliser du HTML avec des classes UnoCSS (compatible Tailwind CSS) directement dans le Markdown.

Grille de cartes récapitulatives :

<div class="grid grid-cols-3 gap-4 mt-8">
  <div class="p-4 rounded bg-blue-50 dark:bg-blue-900">
    <div class="font-bold">CI/CD</div>
    <div class="text-sm opacity-75">Automatiser les livraisons</div>
  </div>
  <div class="p-4 rounded bg-green-50 dark:bg-green-900">
    <div class="font-bold">Conteneurs</div>
    <div class="text-sm opacity-75">Isoler les environnements</div>
  </div>
  <div class="p-4 rounded bg-purple-50 dark:bg-purple-900">
    <div class="font-bold">Kubernetes</div>
    <div class="text-sm opacity-75">Orchestrer à l'échelle</div>
  </div>
</div>

Flèche entre deux positions :

<arrow x1="300" y1="200" x2="500" y2="350" color="#4EC9B0" width="2" />

Bouton interactif :

<span @click="$slidev.nav.next" class="px-2 py-1 rounded cursor-pointer"
  hover="bg-white bg-opacity-10">
  Slide suivante <carbon:arrow-right class="inline"/>
</span>

Les classes UnoCSS (text-red-500, bg-blue-100, rounded, shadow-lg, etc.) permettent de styliser n'importe quel élément sans écrire de CSS.

Dessin intégré (Drauu)

Slidev intègre nativement un outil de dessin (Drauu) accessible depuis la barre d'outils ou avec le raccourci D.

• Cliquer-glisser pour dessiner à main levée sur la slide
• Les dessins sont sauvegardés par slide
• Utile pour annoter en direct pendant une formation ou un code review

Avec drawings: { persist: true } dans le front matter, les dessins sont conservés entre les reloads du serveur et inclus dans les exports.

LaTeX et formules mathématiques

Slidev supporte LaTeX nativement via KaTeX. Utile pour les présentations techniques qui incluent des formules.

Formule inline :

La complexité est $O(n \log n)$ en moyenne.

Bloc de formule :

$$
\text{SLA} = \frac{\text{Uptime}}{\text{Uptime} + \text{Downtime}} \times 100
$$

Thèmes

Les thèmes changent l'apparence complète de la présentation (couleurs, typographies, layouts personnalisés). On les installe via npm et on les active avec une seule ligne dans le front matter.

Thèmes populaires

Repérez la colonne « Installation » : les thèmes maintenus par le projet portent le préfixe @slidev/theme-, les thèmes communautaires le préfixe slidev-theme-. Cette distinction compte pour la maintenance, un thème communautaire peut ne pas suivre les changements de version majeure de Slidev. Choisissez d'abord en fonction du contraste attendu dans la salle : un thème sombre passe mal sur un vidéoprojecteur en plein jour.

Thème	Style	Installation
default	Minimaliste, clair/sombre	Inclus
seriph	Élégant, typographie serif	npm i @slidev/theme-seriph
dracula	Sombre, palette Dracula	npm i slidev-theme-dracula
geist	Minimaliste Vercel, noir/blanc	npm i slidev-theme-geist
purplin	Moderne, dégradés violet/bleu	npm i slidev-theme-purplin
academic	Sobre, conférences/cours	npm i slidev-theme-academic
apple-basic	Style Keynote Apple	npm i slidev-theme-apple-basic

Glissez pour voir

Appliquer un thème

Front matter de slides.md

---
theme: dracula
---

Si le thème est référencé par son nom court (sans le préfixe slidev-theme-), Slidev le télécharge automatiquement au premier lancement.

Thème Dracula

Le thème Dracula applique la palette de couleurs sombre bien connue des développeurs. Tous les blocs de code, les diagrammes Mermaid et le texte adoptent les couleurs Dracula :

Front matter

---
theme: dracula
---

## Slide avec thème Dracula

Les blocs de code sont automatiquement stylisés :

```bash
kubectl get pods -n production
docker stats --no-stream
```

Les diagrammes Mermaid héritent aussi de la palette sombre.

Thème Academic

Le thème Academic est conçu pour les conférences et les cours. Il ajoute la pagination, les notes de bas de page et un style sobre adapté à un contexte universitaire ou professionnel :

Front matter

---
theme: academic
coverAuthor: "Stéphane Robert"
coverDate: "26 février 2026"
themeConfig:
  paginationX: r
  paginationY: b
---

Le composant <Footnote> permet d'ajouter des références en bas de slide :

## Comparaison des approches

Le GitOps est 47% plus rapide que les déploiements manuels.

<Footnote :number="1">
  Source : DORA State of DevOps Report 2024
</Footnote>

Le thème Academic supporte aussi les formules LaTeX nativement, ce qui en fait un bon choix pour les présentations scientifiques ou techniques.

Galerie complète des thèmes

La galerie officielle est disponible sur sli.dev/themes/gallery. Les thèmes communautaires suivent la convention de nommage slidev-theme-* sur npm.

Addons

Les addons ajoutent des composants et des fonctionnalités sans changer le thème. On les déclare dans le front matter et on les installe via npm.

Front matter

---
addons:
  - slidev-addon-qrcode
---

Addon QR Code

L'addon slidev-addon-qrcode génère des QR codes dans les slides. Pratique pour partager un lien pendant une conférence ou une formation.

npm install slidev-addon-qrcode

Un QR code simple :

<QRCode value="https://blog.stephane-robert.info" :size="200" />

Plusieurs QR codes côte à côte :

<div class="flex gap-8 items-center">
  <div>
    <QRCode value="https://blog.stephane-robert.info" :size="180" />
    <p class="text-sm text-center mt-2">Blog DevOps</p>
  </div>
  <div>
    <QRCode value="https://github.com/slidevjs/slidev" :size="180" />
    <p class="text-sm text-center mt-2">Repo Slidev</p>
  </div>
</div>

Catalogue des addons

Le catalogue officiel est sur sli.dev/addons/use. Les addons communautaires suivent la convention slidev-addon-* sur npm.

Exporter la présentation

L'export est le moment où une présentation Slidev quitte le navigateur pour devenir un livrable distribuable. Trois formats répondent à trois usages distincts : le PDF pour l'archive et la diffusion aux participants, le PPTX quand un service communication exige un format éditable, les PNG pour illustrer un compte rendu ou un article. Point commun à tous : ils passent par Playwright, donc par un vrai rendu navigateur, et non par une conversion de Markdown.

Export PDF

L'export PDF utilise Playwright (navigateur headless) pour capturer chaque slide sous forme d'image haute résolution :

1. Installez Playwright (une seule fois) :

   npm install -D playwright-chromium

2. Lancez l'export :

   npx slidev export slides.md --format pdf --output presentation.pdf

3. Vérifiez le fichier :

   ls -lh presentation.pdf

Options d'export

Deux options changent le nombre de pages produites, et ce sont celles qui surprennent le plus. Par défaut, l'export désactive les animations au clic : une slide en cinq étapes ne donne qu'une seule page. C'est --with-clicks qui restitue chaque étape sur sa propre page, au prix d'un PDF nettement plus volumineux. À l'inverse, --range restreint l'export à une plage de slides, pratique pour ne diffuser que la partie publique d'un support interne. Les autres options portent sur le format et l'apparence.

Option	Effet
--format pdf	Export PDF (par défaut)
--format png	Export en images PNG (une par slide)
--format pptx	Export PowerPoint
--format md	Export Markdown nettoyé
--dark	Export en mode sombre
--with-clicks	Génère une page par étape d'animation
--with-toc	Ajoute une table des matières
--range "1,3-5"	Exporte uniquement les slides 1, 3, 4, 5
--output fichier	Nom du fichier de sortie
--per-slide	Un fichier par slide (PNG)

Glissez pour voir

Export PowerPoint (PPTX)

npx slidev export slides.md --format pptx --output presentation.pptx

Chaque slide est convertie en image dans le fichier PPTX. Le résultat n'est pas éditable dans PowerPoint, mais il permet de partager facilement avec des non-développeurs, et les animations sont figées dans leur état final.

Export des notes

Pour exporter uniquement les notes du présentateur en PDF :

npx slidev export-notes slides.md --output notes.pdf

Build statique (SPA)

Pour héberger la présentation en ligne (GitHub Pages, Netlify, Vercel), on génère un site statique :

npx slidev build slides.md

Le dossier dist/ contient l'application complète. Pour un déploiement sur un sous-chemin (ex. GitHub Pages) :

npx slidev build slides.md --base /ma-presentation/

Déployer la présentation

Une fois npx slidev build exécuté, le dossier dist/ contient un site statique ordinaire : aucun serveur Node.js n'est requis à l'exécution. N'importe quel hébergeur de fichiers statiques convient donc. Les trois cibles ci-dessous se distinguent surtout par la façon dont le build est déclenché : par un workflow que vous écrivez sur GitHub Pages, par une configuration déclarative sur Netlify, par détection automatique sur Vercel.

GitHub Pages avec GitHub Actions

Ce workflow sépare volontairement la construction de la publication en deux jobs. La raison est le moindre privilège : le job build n'a besoin que de lire le dépôt, seul le job deploy reçoit les droits pages: write et id-token: write. Les actions sont épinglées par empreinte SHA plutôt que par étiquette, car une étiquette peut être redéplacée vers un autre commit par le mainteneur ou un attaquant. Enfin, persist-credentials: false empêche actions/checkout de laisser le jeton du workflow dans le fichier .git/config du runner, où n'importe quelle dépendance de build pourrait le lire.

.github/workflows/slidev.yml

name: Déployer la présentation
on:
  push:
    branches: [main]

permissions: {}

jobs:
  build:
    runs-on: ubuntu-latest
    permissions:
      contents: read
    steps:
      - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
        with:
          persist-credentials: false

      - uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
        with:
          node-version: 20

      - run: npm ci

      - name: Build
        run: npx slidev build slides.md --base "/${REPO_NAME}/"
        env:
          REPO_NAME: ${{ github.event.repository.name }}

      - uses: actions/upload-pages-artifact@fc324d3547104276b827a68afc52ff2a11cc49c9 # v5.0.0
        with:
          path: dist

  deploy:
    needs: build
    runs-on: ubuntu-latest
    permissions:
      pages: write
      id-token: write
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    steps:
      - id: deployment
        uses: actions/deploy-pages@cd2ce8fcbc39b97be8ca5fce6e763baed58fa128 # v5.0.0

Le nom du dépôt passe par une variable d'environnement au lieu d'être interpolé directement dans la commande run. Une interpolation ${{ }} à l'intérieur d'un run est substituée textuellement avant l'exécution du shell : un nom contenant des métacaractères devient alors une injection de commande. Le passage par env: neutralise ce risque.

Netlify

Netlify lit ce fichier à la racine du dépôt et n'a besoin que de deux informations : la commande de build et le répertoire à publier. Aucun script de déploiement n'est nécessaire, la plateforme installe les dépendances de package.json avant d'exécuter la commande. Le bloc [[redirects]] est indispensable : la présentation est une application monopage, sans lui toute URL directe comme /presenter renvoie une erreur 404.

netlify.toml

[build]
  command = "npx slidev build slides.md"
  publish = "dist"

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

Vercel

Vercel ne reconnaît pas Slidev parmi ses préréglages : renseignez vous-même la commande de build (npx slidev build slides.md) et le répertoire de sortie (dist) au moment de connecter le dépôt. Ajoutez également un fichier vercel.json à la racine, qui joue le même rôle que le bloc de redirections Netlify pour les routes internes de la présentation.

vercel.json

{
  "rewrites": [
    { "source": "/(.*)", "destination": "/index.html" }
  ]
}

Commandes CLI

Six sous-commandes couvrent tout le cycle de vie d'une présentation. npx slidev sans argument suffit au quotidien : c'est le serveur de développement avec rechargement à chaud. Les deux autres à connaître sont build, qui produit le site statique, et export, qui produit un fichier distribuable. slidev format ne touche pas au contenu des slides, il ne réorganise que la structure du fichier Markdown.

Commande	Effet
npx slidev	Serveur de développement (live reload)
npx slidev build	Génère un site statique dans dist/
npx slidev export	Exporte en PDF, PNG, PPTX ou MD
npx slidev export-notes	Exporte les notes du présentateur en PDF
npx slidev format	Formate le fichier Markdown
npx slidev theme	Gérer les thèmes

Glissez pour voir

Ces options s'appliquent au serveur de développement. --remote est celle qui change le plus la façon de présenter : elle expose le serveur sur l'interface réseau publique, ce qui permet de piloter les slides depuis un téléphone pendant qu'un vidéoprojecteur affiche le navigateur. Passez-lui un mot de passe (--remote motdepasse) dès que le réseau n'est pas de confiance, sinon toute personne sur le même réseau prend la main sur votre présentation. --tunnel va plus loin en ouvrant un tunnel Cloudflare public, et exige --remote pour fonctionner.

Option	Effet
--port 3031	Changer le port du serveur
--open	Ouvrir le navigateur automatiquement
--remote	Activer le contrôle à distance (plusieurs navigateurs synchronisés)
--tunnel	Ouvrir un tunnel Cloudflare (partage public temporaire)
--force	Forcer le rebuild du cache Vite

Glissez pour voir

Raccourcis clavier

Ces raccourcis fonctionnent dans le navigateur, en mode présentation comme en mode présentateur. Deux méritent d'être répétés avant une intervention en public : O ouvre la vue d'ensemble, indispensable pour sauter à une slide quand une question arrive hors sujet, et D active le mode dessin, qui permet d'annoter une architecture en direct. La flèche droite avance d'une étape d'animation, pas d'une slide : sur une slide à cinq v-click, il faut cinq appuis pour passer à la suivante.

Raccourci	Action
Espace / Flèche droite	Slide ou animation suivante
Flèche gauche	Slide précédente
D	Mode dessin (Drauu)
O	Vue d'ensemble (overview)
F	Plein écran
G	Aller à une slide par numéro
Échap	Quitter le mode courant

Glissez pour voir

Correspondance PowerPoint / Slidev

Pour les utilisateurs qui migrent depuis PowerPoint ou Google Slides, voici la correspondance des fonctionnalités :

PowerPoint / Google Slides	Slidev
Modèle de slide	layout: dans le front matter
Animation d'entrée	<v-click> / <v-clicks>
Transition entre slides	transition: slide-left
Notes du présentateur	Commentaire HTML <!-- ... -->
Mode présentateur	URL /presenter
Export PDF	npx slidev export --format pdf
Thème	theme: + package npm
Insertion d'image	 dans public/
Insertion de vidéo	<video src="/demo.mp4" controls />
SmartArt / graphiques	Diagramme Mermaid
Forme (rectangle, flèche)	<arrow> + HTML/CSS

Glissez pour voir

Exemple complet : présentation

Voici un extrait d'une présentation de formation DevOps utilisant la plupart des fonctionnalités de Slidev. Ce fichier complet a été testé et validé :

slides.md (extrait)

---
theme: default
title: "Formation DevOps - CI/CD et Conteneurs"
transition: slide-left
mdc: true
lineNumbers: true
drawings:
  persist: false
---

# Formation DevOps

## CI/CD et Conteneurs

<div class="pt-12">
  <span @click="$slidev.nav.next" class="px-2 py-1 rounded cursor-pointer"
    hover="bg-white bg-opacity-10">
    Commencer <carbon:arrow-right class="inline"/>
  </span>
</div>

---

## Sommaire

<v-clicks>

- Introduction au CI/CD
- Docker : concepts et commandes
- Kubernetes : orchestration
- Pipeline CI/CD complet
- Bonnes pratiques DevOps

</v-clicks>

---

## Pipeline CI/CD

```mermaid
flowchart LR
    A[Commit] --> B[Build]
    B --> C[Tests]
    C --> D{Résultat ?}
    D -->|OK| E[Deploy]
    D -->|KO| F[Fix]
```

---
layout: two-cols
layoutClass: gap-16
---

## Dockerfile

Un Dockerfile décrit la construction
d'une image couche par couche.

::right::

```dockerfile {all|1|3-4|6-7|9|all}
FROM python:3.12-slim

WORKDIR /app
COPY requirements.txt .

RUN pip install --no-cache-dir \
    -r requirements.txt

COPY . .
```

---
layout: center
---

# Merci !

Slides disponibles sur GitHub

Pièges fréquents

Les trois erreurs ci-dessous ont la même origine : le fichier slides.md n'est pas du Markdown ordinaire, c'est un format où les délimiteurs et les blocs YAML ont une signification structurelle. Elles ne produisent aucun message d'erreur explicite, seulement un rendu inattendu, ce qui les rend longues à diagnostiquer quand on ne les connaît pas.

Le --- qui crée une slide involontaire

Le séparateur de slides (---) est aussi la syntaxe Markdown standard pour une ligne horizontale. Si un front matter YAML est mal fermé ou si on utilise --- dans le contenu, Slidev crée une slide supplémentaire inattendue.

Règle : on n'utilise --- que pour séparer les slides. Pour une ligne horizontale dans le contenu, on utilise <hr>.

Le front matter local mal placé

Le front matter d'une slide doit apparaître immédiatement après le séparateur ---, sans ligne vide entre les deux :

---
layout: center
---

# Contenu

Une ligne vide entre --- et layout: casse le parsing.

L'export sans les animations

Par défaut, slidev export génère une page par slide en ignorant les étapes d'animation (v-click). Pour capturer chaque état d'animation comme une page séparée :

npx slidev export --with-clicks

Dépannage

La grande majorité des blocages relève de deux familles : une dépendance absente (le module @slidev/cli, un thème npm, Playwright pour l'export) ou un cache Vite devenu incohérent après un changement de thème ou de version. Commencez par lire le symptôme dans la première colonne, puis vérifiez la cause avant d'appliquer la solution : relancer avec --force répare le second cas mais ne changera rien au premier.

Symptôme	Cause probable	Solution
Cannot find module '@slidev/cli'	Dépendances non installées	npm install
Port déjà utilisé	Processus existant sur le port	npx slidev --port 3031 ou tuer le processus
Thème non trouvé	Package npm non installé	npm install slidev-theme-xxx
Mermaid ne s'affiche pas	Syntaxe Mermaid invalide	Tester sur mermaid.live
Export PDF échoue	Playwright manquant	npm install -D playwright-chromium
Monaco ne fonctionne pas	Feature désactivée	Vérifier le front matter de la slide
Styles CSS ignorés	Mauvaise syntaxe	Utiliser les classes UnoCSS (compatibles Tailwind)
Live reload cassé	Cache Vite corrompu	Relancer avec npx slidev --force
QR Code non rendu	Addon non déclaré	Ajouter addons: [slidev-addon-qrcode] dans le front matter
Dessins non sauvegardés	Persistance désactivée	drawings: { persist: true } dans le front matter

Glissez pour voir

À retenir

• Slidev v52 transforme un fichier Markdown en une présentation web interactive avec animations, diagrammes, code live et mode présentateur.
• Le fichier principal est slides.md : les slides sont séparées par ---, chacune peut avoir son propre front matter (layout, transition).
• Les animations au clic (v-click, v-clicks) révèlent le contenu progressivement, le public reste concentré sur le point en cours.
• Le surlignage progressif de lignes de code ({all|1|3-4|all}) est l'outil pédagogique le plus puissant pour expliquer du code pas à pas.
• Monaco Editor ({monaco}, {monaco-run}) permet d'éditer et exécuter du code en live, la fonctionnalité qui distingue le plus Slidev pour les formations.
• Les diagrammes Mermaid sont intégrés nativement : flowcharts, séquences, classes, Gantt, modifiables directement en Markdown.
• Les thèmes npm (dracula, geist, purplin, academic...) changent l'apparence en une ligne. Les addons (QR code...) ajoutent des composants réutilisables.
• L'export couvre tous les formats : PDF, PPTX, PNG, SPA (site web statique), et les notes du présentateur.
• UnoCSS (compatible Tailwind) et Vue.js permettent de personnaliser n'importe quelle slide avec du HTML, du CSS et des composants interactifs.

Plus d'infos

La documentation de Slidev évolue vite, la référence des layouts et des composants intégrés y est toujours plus à jour que n'importe quel guide tiers. La galerie de thèmes et les showcases sont utiles pour un autre usage : lire le code source d'une présentation existante reste la façon la plus rapide de comprendre une mise en page complexe.

• Site officiel : sli.dev
• Documentation : sli.dev/guide
• Dépôt GitHub : github.com/slidevjs/slidev
• Galerie de thèmes : sli.dev/themes/gallery
• Showcases : sli.dev/showcases

FAQ : questions fréquentes

Les questions ci-dessous sont celles qui décident le plus souvent de l'adoption de l'outil dans une équipe : le choix entre Slidev et Reveal.js, la réalité de l'export PDF et PPTX, la licence, et le niveau de Vue.js réellement nécessaire. Dépliez celles qui vous concernent avant de vous engager sur un support important.

Slidev, c'est quoi ?

Slidev est un outil open source qui permet de créer des présentations (slides) en Markdown, pensé pour les développeurs. Il s'appuie sur Vue.js et Vite, et gère le code coloré, les diagrammes Mermaid, les animations et l'export en PDF, PPTX ou site web.

Comment installer Slidev ?

On installe Slidev dans un dossier de projet avec npm : npm init slidev@latest cree une presentation prete a l'emploi, ou npm install @slidev/cli l'ajoute a un projet existant. Node.js 18 ou plus est requis. La commande slidev lance ensuite le serveur de dev.

Slidev ou Reveal.js : lequel choisir ?

Slidev privilégie le Markdown et l'écosystème Vue/Vite, idéal pour des slides techniques riches en code avec peu de configuration. Reveal.js est en HTML/JS pur, plus bas niveau et très personnalisable. Slidev pour aller vite en Markdown, Reveal.js pour un contrôle HTML total.

Slidev ou PowerPoint : quelles différences ?

Slidev ecrit les slides en Markdown versionnable dans Git et affiche du code interactif et des diagrammes Mermaid ; PowerPoint utilise un fichier binaire .pptx edite a la souris. Slidev vise les presentations techniques, PowerPoint le tout-public. Slidev exporte d'ailleurs en PPTX.

Comment exporter une présentation Slidev en PDF ou PPTX ?

Utilisez la commande slidev export : elle génère un PDF par défaut, ou un PPTX avec --format pptx. L'export nécessite Playwright (navigateur headless), installé via npm i -D playwright-chromium. Vous pouvez aussi exporter en site statique avec slidev build.

Slidev est-il gratuit ?

Oui, Slidev est entièrement gratuit et open source (licence MIT). Vous l'installez via npm et l'utilisez sans abonnement ni limite. Seuls des services tiers optionnels (hébergement, navigateur pour l'export) peuvent avoir leurs propres conditions.

Faut-il savoir coder en Vue.js pour utiliser Slidev ?

Non. Pour des présentations classiques, le Markdown et quelques layouts suffisent, sans écrire de Vue.js. La connaissance de Vue.js ne devient utile que pour des composants interactifs avancés ou des thèmes personnalisés, qui restent optionnels.

Comment ajouter des diagrammes dans une présentation Slidev ?

Slidev rend nativement les diagrammes Mermaid : on entoure le diagramme d'un bloc de code balise mermaid dans le Markdown et Slidev l'affiche en image. Il gere aussi PlantUML et le dessin libre. Aucun plugin ni capture d'ecran n'est necessaire.

Prochaines étapes

Documentation officielle Slidev Référence complète : layouts, animations, composants, thèmes et export.

Reveal.js : l'alternative HTML Comparer Slidev avec Reveal.js, le framework de présentation HTML classique.

Docs-as-Code : principes fondamentaux Comprendre l'approche qui traite la documentation et les présentations comme du code.

Markdown : syntaxe complète Maîtriser la syntaxe Markdown utilisée par Slidev pour rédiger les slides.

×

📖 Voir la documentation →