Démarrer

Comptez quelques minutes. Aucun compte ni service d’IA n’est nécessaire.

Ce qu’il vous faut

• VS Code 1.95 ou plus récent.
• L’extension Marp for VS Code, pour l’aperçu et l’export HTML/PDF. Elle est déclarée comme dépendance de DWA Slides et s’installe avec elle si elle est disponible.
• Le fichier VSIX de DWA Slides (dwa-slides-<version>.vsix), fourni par l’équipe ou construit depuis le dépôt (voir Contribuer).
• Le thème : theme/DWA.css du dépôt, ou le thème de votre organisation distribué par le portail.
• Facultatif : Chrome, Chromium ou Edge installé localement, pour la mesure des débordements et la taille automatique des callouts.

Node.js n’est pas nécessaire

Node.js et npm ne servent qu’à développer ou reconstruire l’extension. Le VSIX s’installe tel quel.

1. Installer l’extension

1. Dans VS Code, ouvrir la vue Extensions.
2. Menu … → Installer à partir d’un VSIX….
3. Choisir le fichier dwa-slides-<version>.vsix.
4. Installer Marp for VS Code si ce n’est pas déjà fait.

L’extension n’est pas publiée sur le Marketplace : l’installation se fait à partir du fichier.

2. Choisir le thème

Ouvrez le dossier de votre projet dans VS Code (pas un fichier isolé), créez un fichier Markdown, puis lancez depuis la palette de commandes (Ctrl+Maj+P) :

DWA : choisir le thème CSS pour DWA et Marp

Sélectionnez theme/DWA.css. La commande enregistre le chemin dans les paramètres DWA et Marp du dossier de travail, en remplaçant une éventuelle ancienne inscription du même nom de thème et en conservant les autres.

Thème d’organisation

Si votre organisation utilise le portail, utilisez plutôt DWA : se connecter au portail puis DWA : choisir un thème d’organisation. Voir Thèmes d’organisation.

3. Écrire l’en-tête

---
marp: true
theme: DWA
paginate: true
---

marp: true active Marp et l’assistance DWA. Le nom du thème doit correspondre au @theme déclaré dans le CSS.

Pas sûr de votre en-tête ? DWA : préparer ce document pour DWA ajoute marp: true sans toucher au thème ni aux autres clés.

4. Créer une slide

Après une ligne vide, tapez ---. Une suggestion grisée propose :

<!-- _class:  -->

Appuyez sur Tab : la directive est insérée, le curseur se place après _class: et la liste des layouts s’ouvre. Choisissez content, puis une composition comme cols-2, puis with-title : la structure de la slide est préremplie. Il ne reste qu’à remplacer le texte.

<!-- _class: content cols-2 with-title cards -->

# Deux approches

> ## Première approche
>
> Une courte explication.

<!-- -->

> ## Seconde approche
>
> Un autre point de vue.

5. Prévisualiser et exporter

• Aperçu : bouton d’aperçu Marp en haut à droite de l’éditeur.
• PDF / HTML : commande d’export de Marp for VS Code.
• PowerPoint éditable : DWA : exporter un PowerPoint éditable (.pptx).

Et ensuite ?

• Suivez le tutoriel Votre première présentation.
• Parcourez les layouts et gardez l’aide-mémoire sous la main.
• Si quelque chose ne s’active pas : Dépannage.