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. Sous le capot, il repose sur Vue.js et Vite — ce qui lui donne un rechargement instantané à chaque sauvegarde.

On peut le comparer à un PowerPoint pour développeurs : au lieu de cliquer dans une interface graphique, on écrit du Markdown dans son éditeur de code favori, et Slidev génère la présentation dans le navigateur.

Comparaison avec les autres outils

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

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

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

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

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

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

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

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

Lancez le serveur de développement :
Fenêtre de terminal
```
npx slidev --open
```
Le navigateur s’ouvre sur http://localhost:3030. Le live reload recharge la présentation instantanément à chaque sauvegarde du fichier.
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

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

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.

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

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

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.

```markdown
---
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
WORKDIR /app
COPY requirements.txt .
RUN pip install -r requirements.txt
COPY . .
CMD ["python", "app.py"]
```

```

**Image à droite :**

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

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

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

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

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.

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

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`

Appliquer un thème

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

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

```yaml title="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.

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

Export PDF

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

Installez Playwright (une seule fois) :
Fenêtre de terminal
```
npm install -D playwright-chromium
```

Lancez l’export :

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

Vérifiez le fichier :
Fenêtre de terminal
```
ls -lh presentation.pdf
```

Options d’export

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)

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

GitHub Pages avec GitHub Actions

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

permissions:
  contents: read
  pages: write
  id-token: write

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - uses: actions/setup-node@v4
        with:
          node-version: 20

      - run: npm ci

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

      - uses: actions/upload-pages-artifact@v3
        with:
          path: dist

  deploy:
    needs: build
    runs-on: ubuntu-latest
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    steps:
      - id: deployment
        uses: actions/deploy-pages@v4

Netlify

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

Vercel

Vercel détecte automatiquement Slidev si le fichier slides.md est présent. Il suffit de connecter le dépôt GitHub au dashboard Vercel.

Commandes CLI

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

Options globales :

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

Raccourcis clavier

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

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	`![alt](/image.png)` dans `public/`
Insertion de vidéo	`<video src="/demo.mp4" controls />`
SmartArt / graphiques	Diagramme Mermaid
Forme (rectangle, flèche)	`<arrow>` + HTML/CSS

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

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

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

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

À 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

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

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.