Qu’est-ce que le Markdown ?

Le Markdown est une façon d’écrire du texte formaté sans cliquer dans des menus : vous tapez comme dans un bloc-notes, et grâce à des conventions de signes vous pouvez indiquer ce que vous voulez : titres, gras, listes, etc.

Quelques signes, et voici ce que ça donne :

Le fichier reste du texte lisible (extension .md), facile à partager et à versionner.

Syntaxe complète. Ce guide ne couvre que l’essentiel pour les présentations. Pour la référence Markdown détaillée (listes imbriquées, tableaux, citations, etc.), consultez Markdown Guide — Basic Syntax.

Qu’est-ce que MARP ?

MARP (Markdown Presentation) est une convention qui transforme un fichier Markdown en présentation slide par slide — sans PowerPoint.

L’idée est simple : vous écrivez votre contenu en Markdown, vous séparez chaque slide avec une ligne ---, et un moteur (ici marp-core, embarqué dans MarpNative) produit l’aperçu et l’export PDF/PNG.

Ce guide résume l’essentiel : vous y trouverez tout le nécessaire pour créer vos présentations MARP avec MarpNative.

1. Anatomie d’une présentation

Un fichier MarpNative est un fichier .md classique. En haut, un front-matter entre deux lignes --- décrit le thème et les options. Ensuite viennent les slides, séparées aussi par ---.

---
marp: true
theme: atlas
paginate: true
---

# Titre de la première slide

Texte d’introduction

---

## Deuxième slide

- Point A
- Point B

• marp: true — active le mode présentation
• theme: — nom du thème (atlas, pitch, etc.)
• paginate: true — numérote les slides (selon le thème)

Astuce. Le sélecteur de thème de l’app écrit automatiquement theme: dans le front-matter.

2. Markdown de base

Disponible aussi via le menu Blocks au-dessus de l’éditeur.

Pour la syntaxe Markdown complète : markdownguide.org/basic-syntax.

3. Slides MARP

Chaque slide est le contenu situé entre deux séparateurs --- (après le front-matter).

---

# Slide A

Contenu

---

# Slide B

Autre contenu

Piège courant. Ne collez pas plusieurs layouts _class sur la même slide sans --- entre eux. Une directive layout = une slide.

4. Layouts (_class)

Les thèmes exposent des mises en page (cover, section, quote…). On les active avec un commentaire HTML en tête de slide :

---

<!-- _class: cover -->

# Titre d’ouverture

Sous-titre

Les classes disponibles dépendent du thème actif. Le menu Layout de l’app les liste et les insère pour vous. Dans le Theme Store, chaque fiche thème documente ses layouts et propose un exemple chargeable.

5. Images

Syntaxe Markdown standard, enrichie par les directives Marp. Le menu Images de la toolbar insère ces snippets.

Image simple (fichier local)

Placez l’image à côté du .md (souvent dans un dossier assets/) :

![description](assets/photo.png)

Astuce. Menu Images → Insérer une image… : l’app copie le fichier et écrit le chemin assets/… pour vous (pas besoin de connaître la syntaxe).

Image depuis une URL

![description](https://exemple.com/image.jpg)

Largeur et hauteur

Dans Marp, la taille se règle dans le texte alternatif avec w: (largeur) et/ou h: (hauteur), en pixels :

![w:400](assets/photo.png)
![h:300](assets/photo.png)
![w:400 h:300](assets/photo.png)

Sans taper de Markdown. Menu Images → Image avec largeur / hauteur… (ou les champs taille dans Image depuis une URL…). Raccourcis : Largeur 400 px, Hauteur 300 px.

Fonds Marp

Mots-clés selon le thème

Certains thèmes ajoutent des mots-clés (ex. Atlas : center, right, rounded). Consultez la fiche du thème dans le Theme Store ou son fichier example.md.

6. Notes orateur

Les notes ne s’affichent pas sur la slide projetée. Insérez-les via le menu Blocks (« Speaker Notes ») :

<!-- notes: Points à rappeler à voix haute -->

7. Astuces MarpNative

• Blocks — titres et formatage inline d’un clic
• Images — insertion locale, URL, largeur / hauteur (w: / h:) et fonds Marp
• Layout — classes _class du thème actif
• Theme Store — previews, docs des layouts, bouton « Charger l’exemple »
• Export — PDF (une page par slide) et PNG depuis le menu Exporter
• Vos fichiers restent du .md standard, lisible aussi avec Marp CLI ou VS Code

8. Exemple réel — thème Atlas

Voici une mini-présentation de 4 slides (thème signature Atlas, inclus gratuitement). À gauche, le Markdown ; en dessous, le rendu réel.

Le Markdown

---
marp: true
theme: atlas
paginate: true
---

<!-- _class: cover -->

# Atlas
## Your free signature theme

---

<!-- _class: focus -->

# Clarity over clutter.

---

<!-- _class: quote -->

> Design is how it works —
> and how it feels.
>
> — **MarpNative**

---

<!-- _class: dark -->

# Ship beautiful decks
**No upgrade required.**

Le rendu

Dans l’app. Ouvrez le Theme Store → Atlas → Charger l’exemple pour obtenir un deck complet prêt à éditer.