La syntaxe

Une présentation est un texte Markdown en deux parties : un en-tête entre deux lignes ---, puis le texte des diapositives. Chaque exemple de cette page montre la présentation au-dessus de son texte.

L'en-tête

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

---
title: Bilan du mois
theme: mon-equipe
lang: fr
---

• title : le titre de la présentation, dans le catalogue et dans l'onglet du navigateur.
• theme : le thème visuel, parmi ceux de votre studio.
• lang : la langue du texte. Avec fr, la valeur par défaut, le texte suit la typographie française : espace fine insécable avant :, ;, ? et !, et dans les guillemets.
• storybook : l'adresse du Storybook dont la présentation affiche des stories (voir Intégrer une story).
• reveal : les réglages d'affichage de reveal.js, comme la taille des diapositives, la numérotation et les transitions.

Dans l'éditeur, ⌘ ⇧ Espace sur Mac, ou Ctrl ⇧ Espace ailleurs, liste les clés de l'en-tête avec leur description et leur valeur par défaut. Le même raccourci liste les attributs d'un composant entre ses accolades, et les valeurs possibles d'un attribut entre ses guillemets. Sur la ligne du curseur, un indice gris rappelle le raccourci, et un clic sur l'indice ouvre la liste.

Découper les diapositives

Une ligne --- commence une nouvelle diapositive, et une ligne ---- une diapositive verticale, rangée sous la précédente. Le public avance avec la flèche droite ; vous descendez dans les diapositives verticales avec la flèche bas, pour une question ou un détail.

# Le titre de la présentation

---

### Une diapositive

Le public suit les diapositives de gauche à droite.

----

### Une diapositive verticale

Un détail, pour répondre à une question.

---

### La diapositive suivante

Une ligne --- placée dans un bloc de code ou dans un composant ne découpe pas le texte.

Une diapositive ## réduite à son titre et à un paragraphe de 140 caractères au plus est une section : le thème l'affiche sur un fond de couleur. Avec plus de contenu, une liste, un composant ou une annotation :layout, elle a la mise en page d'une diapositive de contenu.

Les annotations

Une annotation est une ligne :nom{…} qui règle la diapositive où elle se trouve, sans apparaître dans son texte.

• :pretitle{text="…"} : un texte au-dessus du titre.
• :subtitle{text="…"} : un texte sous le titre.
• :slide-background{image="…"} : une image en fond de diapositive.
• :quicklink{text="…" href="…"} : un lien épinglé en bas de la diapositive.
• :layout{media="…" src="…"} : un média à côté, au-dessus, au-dessous ou derrière le texte, décrit ci-dessous.

### 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 partage la diapositive entre le texte et un média, une image ou une page web. Vous écrivez l'adresse du média dans src, sa place dans media et la part de la diapositive qu'il occupe dans size. Dans l'éditeur, placez le curseur dans la diapositive et cliquez sur « Mise en page » : vous choisissez la place et la part dans le panneau, et la ligne :layout apparaît sous le titre.

### Le parcours

:layout{media="right" src="/images/placeholder.svg" alt="Des montagnes sous un soleil" fit="contain"}

Trois étapes, du dépôt de la demande à la réponse.

---

### Le parcours, image large

:layout{media="left" size="2/3" src="/images/placeholder.svg" alt="Des montagnes sous un soleil"}

Le texte tient dans une colonne plus étroite.

---

### Le parcours, image en bas

:layout{media="bottom" src="/images/placeholder.svg" alt="Des montagnes sous un soleil"}

Le texte reste sous le titre, l'image prend la hauteur restante.

---

### Le parcours, image derrière le texte

:layout{media="behind" veil="40%" src="/images/placeholder.svg" alt="Des montagnes sous un soleil"}

Le texte passe en clair sur un voile sombre.

Les attributs de :layout :

• media : right (par défaut), left, top, bottom ou behind, derrière le texte.
• size : 1/3, 1/2 (par défaut à droite ou à gauche), 2/3 ou 3/4. En haut ou en bas, sans size, le média prend la hauteur que le texte laisse.
• fit : cover (par défaut) remplit le panneau quitte à couper les bords de l'image ; contain montre l'image entière.
• position : center, top, bottom, left ou right, la partie de l'image gardée par cover.
• alt : la description de l'image pour les personnes qui ne la voient pas.
• lightbox : le média s'ouvre en plein écran au clic.
• veil : derrière le texte, un voile sombre sur l'image, en pourcentage ; sans voile, le texte est sur un cadre.
• story : l'identifiant d'une story Storybook, à écrire sans src (voir Intégrer une story).
• viewport : la largeur, en pixels, de la page de la story avant sa réduction au panneau.
• type : image ou iframe, pour une adresse qui ne finit pas par une extension d'image.

Deux attributs valent aussi pour une diapositive sans média :

• align : top, center ou bottom, la place verticale du contenu. Par défaut, il est centré ; à côté d'un média à 3/4 et au-dessus ou au-dessous d'un média, il commence en haut ; devant une image, le cadre de texte est en bas.
• heading : compact réduit le titre à une ligne pour laisser la hauteur au contenu, hidden le masque, print le masque à l'écran et le garde à l'impression.

Le format :layout{name="media-right"} reste accepté, et l'éditeur souligne la ligne. Pour l'écrire avec les attributs ci-dessus, cliquez sur « Convertir » dans le panneau « Mise en page ».

Découper aux titres

Pour découper une présentation à ses titres, écrivez split: heading sous la clé syntax de l'en-tête : # ouvre la diapositive de titre, ## une diapositive, et ### une diapositive verticale sous la précédente. Une ligne --- découpe aussi.

---
syntax:
  split: heading
---

# Le titre de la présentation

## Une diapositive

Le public suit les diapositives de gauche à droite.

### Une diapositive verticale

Un détail, pour répondre à une question.

## La diapositive suivante

Un titre placé dans un bloc de code ou dans un composant ne découpe pas le texte.