La syntaxe

Une présentation est un texte Markdown : un en-tête entre deux lignes ---, puis le texte des diapositives. Chaque exemple de cette page affiche la présentation produite au-dessus de son texte. Cliquez dans une présentation, puis utilisez les flèches du clavier pour la parcourir.

L'en-tête

L'en-tête contient les réglages de la présentation, une ligne clé: valeur par réglage.

---
title: Bilan du mois
theme: dsfr
lang: fr
parser: separator
---

• title est le titre affiché dans le catalogue et dans l'onglet du navigateur. Sans title, le studio affiche le slug.
• theme choisit le thème visuel. La liste des thèmes dépend du studio : la fenêtre « Nouvelle présentation » les propose.
• lang donne la langue du texte. Avec fr, la valeur par défaut, le studio applique la typographie française.
• parser choisit le découpage des diapositives : separator, la valeur par défaut, ou heading.
• storybook donne l'adresse du Storybook dont la présentation affiche des stories. Le guide Intégrer une story Storybook l'utilise.
• reveal regroupe les réglages d'affichage : la taille des diapositives, la numérotation, les transitions.

Dans l'éditeur du studio, placez le curseur dans l'en-tête et appuyez sur Ctrl + Espace : l'éditeur liste les réglages disponibles, avec leur description et leur valeur par défaut. Vous réglez la visibilité et le dossier de la présentation dans « Partage et réglages ».

Découper les diapositives

Avec parser: separator, une ligne --- commence une nouvelle diapositive, et une ligne ---- commence une diapositive verticale, placée sous la précédente. La flèche droite passe à la diapositive suivante, la flèche bas descend dans les diapositives verticales.

# Le titre de la présentation

---

### Une diapositive

Le public suit les diapositives de gauche à droite.

----

### Une diapositive verticale

L'orateur descend ici pour répondre à une question.

---

### La diapositive suivante

Avec parser: heading, les titres découpent le texte : # ouvre la diapositive de titre, ## commence une diapositive, et ### commence une diapositive verticale sous la précédente. Une ligne --- commence aussi une diapositive.

---
parser: heading
---

# Le titre de la présentation

## Une diapositive

Le public suit les diapositives de gauche à droite.

### Une diapositive verticale

L'orateur descend ici pour répondre à une question.

## La diapositive suivante

Une ligne placée dans un bloc de code ou dans un bloc de composant (de ::Nom à ::) ne découpe jamais le texte.

Les annotations

Une annotation est une ligne :nom{…} que le studio lit puis retire du texte de la diapositive.

• :pretitle{text="…"} affiche un texte au-dessus du titre.
• :subtitle{text="…"} affiche un texte sous le titre.
• :slide-background{image="…"} place une image en fond de la diapositive.
• :layout{name="…"} choisit la mise en page de la diapositive.
• :quicklink{text="…" href="…"} épingle un lien en bas de la diapositive.

### Les résultats du trimestre

:pretitle{text="Partie 2"}
:subtitle{text="Chiffres arrêtés au 30 septembre"}
:quicklink{text="Le tableau de bord" href="https://example.com"}

Le nombre de demandes traitées a doublé.

Les mises en page

L'annotation :layout{name="…"} choisit la mise en page de la diapositive. Les mises en page suivantes partagent la diapositive entre le texte et un média, une image ou une page web, désigné par src :

• media-right et media-left placent le média à droite ou à gauche du texte.
• media-right-wide et media-left-wide donnent plus de largeur au média.
• media-right-xwide et media-left-xwide réduisent le texte à une colonne de légendes.
• media-below et media-above placent le média sous ou au-dessus du titre, sur toute la largeur.
• media-cover étend le média à toute la diapositive et affiche le titre sur un cadre translucide.

Deux mises en page gardent toute la diapositive pour le texte :

• grid-compact réduit le titre à une ligne et laisse la hauteur au contenu.
• full affiche tout le texte de la diapositive en un seul bloc.

Le guide Placer une image à côté du texte montre media-right avec une image téléversée dans le studio. La référence du module de rendu décrit les réglages de chaque mise en page.