Diapositives Markdown, gratuit

Pourquoi utiliser Markdown pour des diapositives ?

PowerPoint et Keynote excellent dans la conception de diapositives et sont mauvais pour presque tout le reste. Ils sont difficiles à versionner, difficiles à comparer, difficiles à éditer sur un téléphone, difficiles à garder cohérents au sein d'une équipe, et impossibles à parcourir avec grep. Markdown résout le « tout le reste » sans chercher à rivaliser sur le design visuel, et pour du contenu technique (exemples de code, sortie de terminal, tutoriels en ligne de commande, listes à puces) il est plus rapide à rédiger que n'importe quel outil graphique.

Le format est du texte brut, il vit donc nativement dans git, s'ouvre dans n'importe quel éditeur, se modifie dans n'importe quel outil, de VS Code à vim en passant par une application de notes sur téléphone, et survit à 30 ans de bouleversements logiciels. Le compromis : vous renoncez au contrôle du design au pixel près. Pour les réunions plénières de développeurs, les conférences, les présentations qui accompagnent un README, le matériel pédagogique et les présentations éclair, c'est un excellent compromis. Pour les argumentaires de vente et les présentations marketing, PowerPoint ou Figma l'emporte probablement encore.

La convention ---

Trois tirets sur leur propre ligne forment la syntaxe existante de Markdown pour une ligne horizontale, définie depuis CommonMark et réutilisée comme séparateur de diapositives dans tout l'écosystème des diapositives Markdown, reveal.js, Marp, Slidev et la plupart des outils plus modestes l'utilisent tous. La convention est sans ambiguïté (une vraie ligne horizontale fonctionne toujours à l'intérieur d'une seule diapositive ; le --- ne fait une séparation que lorsqu'il est seul sur sa ligne) et facile à taper. Vous écrivez le diaporama comme un seul document Markdown continu et l'outil le resegmente visuellement.

L'écosystème des diapositives Markdown en 2026

• reveal.js (Hakim El Hattab, depuis 2011), la bibliothèque de présentation pionnière basée sur le navigateur. Grilles de diapositives verticales et horizontales, transitions, notes de l'orateur (syntaxe Notes:), source Markdown via l'attribut data-markdown. Le nom le plus connu ; slides.com l'héberge en SaaS.
• Marp : le projet Markdown-vers-diapositives dédié le plus populaire. Basé sur CommonMark, livré avec une CLI, une extension VS Code et Marp Core. Excellent export PDF. Frontmatter pour le thème et le rapport d'aspect.
• Slidev (Anthony Fu), plus récent (2021), basé sur Vue, moderne. Conçu pour les présentations de développeurs : coloration syntaxique intégrée, intégration de code dans les diapositives, vue présentateur, dessin sur les diapositives pendant la présentation.
• remark.js (Ole Petter Bang), minimal, intégration en un seul fichier. Apprécié pour son absence de parti pris.
• HackMD : variante à édition collaborative. Basé sur le navigateur, compte requis, se synchronise entre les appareils.

Cet outil occupe une niche différente : aucune installation, aucun compte, aucun envoi. Collez, présentez, fermez l'onglet. C'est le bon choix quand vous préparez une présentation éclair de 5 minutes sur un ordinateur emprunté, que vous finalisez des diapositives en avion, ou que vous rédigez dans une salle de réunion sans vouloir lancer Marp ni vous connecter à slides.com.

Les rapports d'aspect expliqués

Les diaporamas modernes sont en 16:9 par défaut, chaque projecteur de conférence construit au cours de la dernière décennie est une surface 16:9, et le 16:9 correspond à tous les écrans d'ordinateur portable et téléviseurs modernes. La fenêtre d'affichage ici effectue le rendu en 16:9 pour correspondre. Les diaporamas plus anciens utilisent le 4:3 (le format d'origine d'un projecteur à tube cathodique) ; les ordinateurs portables plus anciens sont parfois livrés en 16:10. Le format par défaut de PowerPoint est le 16:9 depuis la version 2013 ; Google Slides est par défaut en 16:9 à la création ; le format par défaut de Keynote est aussi le 16:9.

Cas d'usage courants

• Réunions plénières de développeurs et journées de démonstration. Faites parcourir à une équipe un changement de code, une nouvelle architecture ou une rétrospective d'incident.
• Présentations en conférence et en meet-up. Surtout les présentations pour un public technique où le diaporama nécessite des exemples de code qui se comparent proprement dans les pull requests.
• Présentations explicatives de README. Une introduction de 6 diapositives à une bibliothèque, intégrée dans la documentation du projet.
• Présentations éclair. Des présentations de 5 minutes, d'environ 5 diapositives, où le cérémonial est l'ennemi.
• Matériel pédagogique. Modifiez les diapositives en direct pendant que vous enseignez ; les étudiants peuvent copier la source Markdown pour leurs notes.
• Formation interne. Des diaporamas d'intégration versionnés et relus comme du code, aux côtés de la base de code qu'ils enseignent.
• Notes de préparation de réunion. Des documents préparatoires de 3 diapositives envoyés en Markdown que le destinataire peut prévisualiser dans son éditeur.

Des principes de conception de diapositives qui comptent, même en Markdown

• Une idée par diapositive. La règle classique. Si une diapositive contient deux idées, divisez-la.
• Moins de texte, plus de structure. Si une diapositive se lit comme un paragraphe, c'est que l'orateur lit la diapositive. Réduisez à des puces et laissez l'orateur compléter le discours.
• Des polices plus grandes que vous ne le pensez. Les diapositives Markdown utilisent par défaut un texte courant d'environ 24–32 px équivalent. Tout ce qui est en dessous de ~18 px est illisible depuis le fond d'une salle de conférence.
• Un seul H1 par diapositive. Plusieurs titres de premier niveau sur la même diapositive crée une confusion visuelle.
• Gardez les blocs de code courts. Six lignes est à peu près le maximum confortable sur une diapositive 16:9. Les extraits plus longs doivent être divisés ou affichés en surbrillance par morceaux.
• Faites en sorte que chaque image mérite sa place. Les photos de banque d'images en décoration sont du remplissage. Les diagrammes, les captures d'écran et les visualisations de données sont du signal.

Confidentialité

Les diaporamas sont souvent confidentiels, argumentaires, stratégie interne, chiffres financiers, démonstrations de produit avant lancement. Cet outil s'exécute entièrement dans votre navigateur : le Markdown reste dans la zone de texte, le rendu se fait localement, et la présentation en plein écran lit le même état en mémoire. Rien n'est envoyé, aucun compte n'est requis, et fermer l'onglet efface tout. Les solutions hébergées sur serveur (slides.com, HackMD, GitPitch) exigent de faire confiance aux politiques de traitement des données de l'opérateur ; celle-ci supprime entièrement la question.

Erreurs fréquentes

1. Coller des paragraphes entiers sur une seule diapositive. Si le public le lit, il n'écoute pas l'orateur. Divisez en puces.
2. Des niveaux de titre incohérents. Une diapositive titrée en H1, la suivante en H2, fait négligé. Choisissez un niveau pour les titres de diapositive et tenez-vous-y.
3. Des blocs de code trop longs pour le projecteur. Un extrait de 30 lignes est illisible depuis le dernier rang. N'affichez que les 5 à 10 lignes pertinentes, le reste étant remplacé par // ....
4. Aucune note de l'orateur. Les diapositives sont l'aide-mémoire du public, pas le vôtre. Les notes de l'orateur (dans les outils qui les prennent en charge) contiennent les points à aborder.
5. Oublier le rapport d'aspect du projecteur. Si vous avez créé sur un ordinateur portable 16:10 et que le lieu utilise un projecteur 4:3, le contenu est rogné.
6. Trop de transitions entre diapositives. Les animations entre diapositives semblent soignées dans une démonstration et lassantes pendant une présentation de 30 minutes. Optez par défaut pour aucune transition ou un simple fondu.
7. Utiliser une police astucieuse qui se casse sur la machine du lieu. Tenez-vous-en aux polices système, sans empattement pour le corps, à chasse fixe pour le code.

Autres questions fréquentes

Puis-je exporter les diapositives en PDF ?

Oui, passez en mode plein écran, puis utilisez la fonction d'impression de votre navigateur (Ctrl/Cmd + P) et choisissez Enregistrer au format PDF. La plupart des navigateurs impriment les diapositives rendues à raison d'une par page PDF. Le résultat est un PDF texte propre (pas une image), donc léger et consultable.

Qu'en est-il de la coloration syntaxique du code ?

Les blocs de code clôturés s'affichent en chasse fixe avec un léger fond sombre, ce qui les rend lisibles sur le thème plein écran sombre. La coloration syntaxique par langage (mots-clés Python d'une couleur, chaînes d'une autre) nécessite un cadre de diapositives plus élaboré comme reveal.js ou Slidev. Pour une présentation éclair rapide, elle manque rarement ; pour des présentations longues riches en code, ces outils conviennent mieux.

Comment intégrer une image ?

Syntaxe d'image Markdown standard : ![alt text](https://your-image-url.png). L'image doit être accessible depuis le web public (ou depuis votre machine locale via une URL file://, mais les URL de fichier peuvent être bloquées sur certains navigateurs). Pour les images sensibles, utilisez la syntaxe de lien de Markdown vers un fichier local que vous servez depuis un petit serveur web local pendant la présentation.

Cela fonctionnera-t-il hors ligne ?

Une fois la page chargée, oui, le rendu Markdown et la navigation entre diapositives s'exécutent localement. Les images externes ne se chargeront pas sans réseau, alors intégrez les images sous forme d'URI de données ou hébergez-les localement si vous présentez hors ligne.

Puis-je utiliser le clavier pendant la présentation ?

Oui, les touches fléchées / la barre d'espace avancent, le retour arrière recule, Échap quitte le plein écran, F bascule le plein écran. La plupart des télécommandes de présentation (la télécommande sans fil Logitech standard, etc.) émulent les mêmes touches fléchées, elles fonctionnent donc sans configuration.

Quelque chose est-il envoyé à un serveur ?

Non. Le rendu Markdown, la segmentation des diapositives, la présentation en plein écran, tout se passe dans votre navigateur. Le contenu de votre diaporama n'est ni envoyé, ni journalisé, ni stocké où que ce soit côté serveur. Fermer l'onglet efface le contenu de la zone de texte.