Une belle présentation avec Marp
Table des matières
J’ai écrit il y a quelques mois un article sur l’amour que porte pour Word.
Bon, bah, j’ai le même amour pour PowerPoint. Sauf qu’en vrai, contrairement à Word ou la plupart du temps, un fichier Markdown suffit, je n’avais pas vraiment d’alternative.
Jusqu’à présent, je n’avais que rarement besoin de faire des slides. Quand ça m’arrivait, j’utilisais PowerPoint ou plus récemment OnlyOffice et ça allait.
Mais depuis que je me suis lancé il y a quelques mois en tant que formateur, je commence à manger des slides et PowerPoint et ces copains, je n’y arrive pas. Trop gros, trop lourd, trop compliqué.
Toujours pareil, je veux quelque chose de simple, me concentrer sur le contenu. Et passer ma vie à faire clique-clique bouton pour ajouter des images ou modifier des zones de texte, ça m’agace. Surement mon passif de développeur qui me colle à la peau.
Heureusement, j’ai découvert il y a quelques mois Marp. Je pense en avoir entendu parler pour la première fois sur cet article de zwindler.
Et là, j’avoue, j’ai kiffé. L’outil correspond parfaitement à mon besoin. Il est super simple pour ceux qui aiment le Markdown comme moi. Il peut vraiment être puissant dans la personnalisation, puisqu’on peut custom les thèmes en utilisant du CSS. C’est multiplateforme, super léger, vu que ce n’est que du texte. Il y a plein d’options de partout.
Ça demande une petite courbe d’apprentissage quand même, mais c’est souvent le prix de la liberté !
Dans cet article, je vais expliquer tout ce que j’en ai compris pour mon usage pour que vous puissiez faire de belles slides et vous débarrasser de PowerPoint 😊
Comment que ça fonctionne ?
Le principe est simple, on part d’un fichier Markdown classique (donc mon-fichier.md).
Le Markdown
Pour ceux qui ne connaîtrait pas le markdown ce n’est pas grave, vous allez découvrir quelque chose de fantastique !Markdown est un langage de formatage léger dont le but est d’offrir une syntaxe légère et simple pour se concentrer sur la rédaction en se préocupant peu de la forme.
Exemple :
Il y a plein de site qui permette d’expliquer la syntaxe markdown comme celui-ci. Je ne peux que vous conseiller de vous pencher dessus. Surtout pour les personnes qui écrivent beaucoup. Ce langage simple permet de se concentrer sur le contenu, la rédaction avec un rendu visuel nimaliste et agréable sans effort.
Le gros intérêt est qu’on ne dépends pas d’un logiciel en particulier, on n’est pas enfermé. C’est extrêmement léger et je pense que ça correspond à 99% des besoins d’écriture des gens.
Beaucoup d’éditeurs de texte sont compatibles markdown comme Obsidian, Appflowy, Notion, Typora et beaucoup d’autres.
Dans le cas de Marp qui est une extension de markdown, je conseille d’utiliser Visual Studio Code ou équivalent qui permet d’avoir le rendu en direct des slides.
Ensuite c’est du Markdown classique avec quelques fonctionnalités en plus. Ce que j’aime bien, c’est que tout se fait par écrit en Markdown et en CSS. On peut ensuite exporter nos slides en .html pour faire des présentations super propres, ou les exporter en .pptx (PowerPoint) ou .pdf. Je privilégie toujours l’HTML qui est vraiment vraiment plus léger…
Les bases
Le plus simple c’est d’utiliser d’utiliser Visual Studio Code et d’installer l’extension Marp for VS Code.
Une fois installé, dans notre fichier .md il suffit de rajouter une propriété pour activé marp :
---
marp: true
---
Ensuite, on peut faire du Markdown normal et, si on veut faire une nouvelle slide, il suffit de rajouter ---. Simple. Basique.
---
marp: true
---
# Titre classique
---
## Un plus petit titre
Curabitur est gravida et libero vitae dictum. Gallia est omnis divisa in partes tres, quarum.
---
## Une image
Ce que j’apprécie beaucoup, c’est qu’on peut partir de notre idée en tapant du texte, puis on va la structurer et créer des parties et des sous-parties.
Et dès qu’on a envie de passer en slide, on rajoute la propriété marp:true au début, on rajoute les séparateurs et c’est parti !
Point important dans VSCode c’est qu’on a en direct le rendu quand on clique sur l’aperçu :
Marp étant basé sur le framework Marpit, je vous mets leur doc ici. Elle est complète et donne beaucoup d’infos.
Je vais détailler mon usage dans la suite de l’article.
Les images
Vous pouvez ajouter des images soit via une URL, soit via un chemin local.
En général, j’ai toutes mes images en local dans un dossier assets à côté de mon fichier slides.md. Je sais où elles sont, et je ne me perds pas. Mais vous pouvez parfaitement ajouter une image qui vient du web.
Cela donne comme en Markdown classique :
La partie entre crochet permet de rajouter des options.
Je vous laisse voir la doc pour avoir la liste complète des options mais vous pouvez spécifier la taille des images, rajouter des filtres placer l’image à droite, à gauche, lister les images verticalement ou horizontalement, bref, pas mal d’options possible.
Me concernant, j’utilise pas mal le resize (w pour width pour largeur, la valeur est en pixel. Il est possible de faire varier la hauteur : h) pour éviter que ça dépasse de ma slide :
Pour séparer la slide en deux avec une image d’un coté et du texte de l’autre, j’tuilise :
Et un truc super pratique, je peux modifier la proportion d’image dans ma slide avec un pourcentage :
Voila ce que donne ces trois exemples :
J’utilise beaucoup le format .webpqui est très léger et permet de réduire drastiquement le poids des images tout en offrant une transparence comme le png.
Le format jpg, png ou même gif fonctionne évidemment.
Les Directives ou propriétés
Oui parce que bon, là, on est sur du basique quand même. Marpit permet d’aller plus loin.
Sous la propriété marp:true, on peut rajouter pas mal de choses.
Vous pouvez changer le format des slides. J’utilise le 16:9 format par défaut, mais vous passer en 4:3 :
size: 4:3
On peut activer la pagination :
paginate: true
On peut ajouter un header et un footer :
header: Header d'exemple
footer: 'Ma super présentation'
On peut spécifier une couleur de fond et une couleur de texte :
backgroundColor: #67b8e3
color: white
Ce qui donne :
---
marp: true
size: 4:3
paginate: true
header: Header d'exemple
footer: 'Ma super présentation'
backgroundColor: #67b8e3
color: white
---
On peut également modifier le thème. Par défaut il existe trois thèmes.
Default, gaia et uncover. Il est possible de trouver d’autres thèmes proposés par la communauté ou de créer son propre thème custom. Nous verrons cette partie un peu plus loin.
Vous pouvez aller voir la doc pour les thèmes de bases, il y a quelques options propres à chacun.
Pour activer un thème is suffit de rajouter la directive :
theme: gaia
J’ai personnellement pas mal utilisé Gaia avant de me lancer dans la personnalisation.
Les propriétés par slide
Ce qui est plutôt intéressant, c’est que les propriétés définies en haut ne sont pas figées. On peut gérer des cas particuliers pour certaines slides.
Juste après le séparateur de slide, vous pouvez définir des propriétés qui s’activeront À PARTIR de cette slide ou JUSTE pour cette slide.
On rajoute juste un _ avant la propriété à définir pour qu’elle ne s’applique qu’à la slide uniquement.
<!-- _header: Un header juste pour cette slide -->
<!-- footer: Un footer particulier pour le premier -->
On peut également définir d’afficher la pagination dans les propriétés en haut avec la balise : paginate: true, puis dans les slides, décidés de sauter une slide ou de ne pas l’afficher pour une slide en particulier.
<!-- paginate: skip --> Permet de passer à la valeur suivante sans montrer la pagination
<!-- paginate: hold --> Permet de garder et d'afficher la valeur du numéro de page précédent
Pour en savoir plus, allez voir la doc !
Il est également possible de créer son propre thème custom mais je ne vais pas m’attendre dessus aujourd’hui, sinon, cet article ne va jamais sortir ^^.
J’y dédierai surement un article plus tard.
Si vous voulez explorer cette partie-là, je vous laisse quelques liens pour que vous creusiez.
- https://marpit.marp.app/theme-css
- https://yoanbernabeu.github.io/MARP-Template-Library/docs/intro/
- https://github.com/orgs/marp-team/discussions/115
Et pour présenter ?
Les commentaires
Une petite fonctionnalité bien pratique dans marp, ce sont les commentaires. Si, dans les slides vous mettez des commentaires sous la forme :
<!-- Ceci est un commentaire. Il ne sera visible que par le présentateur.
C'est super pratique pour glisser ces antisèches !
-->
Le texte n’apparaitra pas dans les slides… Mais vous les retrouverez en mode présentation !
L’exportation et la présentation
Et comment que je fais moi après pour faire ma présentation ? Ce n’est que du texte !
Calme-toi, Jojo déjà… Ensuite, il suffit d’exporter le fichier marp ! 😃
Alors on peut exporter en PPTX ou en PDF, mais le mieux reste directement en HTML ! Et là, la présentation se fait directement dans un navigateur.
Dans visuel studio code, on clique sur l’icône de Marp (1) puis on export (2). Ensuite, on choisit le format (HTML) et c’est parti ! La présentation s’ouvre directement dans votre navigateur 😊
Une fois ouvert, vous pouvez cliquer sur l’icône indiquée sur l’exemple suivant pour ouvrir le mode présentateur qui vous ouvrira un second onglet pour le présentateur
En mode présentation ça donne ça avec les deux onglets l’un à côté de l’autre. Et vous retrouvez vos commentaires ! (À droite sous la slide suivante.)
Conclusion, pourquoi j’utilise Marp ?
Déjà pour la simplicité quand on aime se concentrer sur l’écriture et faire moins de cliques-clique bouton…
Ensuite, pour la liberté et la légèreté… Je ne suis pas attaché à un outil super lourd en particulier, comme PowerPoint, qui est une grosse usine à gaz.
Juste pour exemple, je vous ai fait un petit comparatif de poids entre les différents formats pour l’exemple que j’ai fait pour cet article. On est sur 3 slides et les images ne sont pas locales, ce sont que des URLs.
| Fichiers | Poids |
|---|---|
| Markdown d’origine | 1 ko |
| Export HTML | 75 ko |
| Export pdf | 2,2 Mo |
| Export pptx | 1,7 Mo |
Là c’était mignon, j’avais 3 slides… Ma dernière présentation, j’avais 128 slides… le fichier pdf que j’ai dû envoyer au client faisait plus de 90 Mo. Le fichier pptx exporté faisait plus de 50 Mo. Le fichier HTML ? 201 ko…
Alors oui, c’est sur qu’il y a une courbe d’apprentissage. C’est un peu moins userfriendly, il n’y a pas d’UI toute belle. Mais je trouve que ça vaut le coup. Je maitrise mon support. Je me fais des templates sur mesure que j’adapte à mes besoins. Je ne dépends pas de gros logiciels lourds. Un simple navigateur me suffit pour faire mes présentations.
Et honnêtement, ça suffit pour l’écrasante majorité des cas.
Le seul vrai point négatif que j’y vois, c’est pour la personnalisation. Je pense que tout est possible, mais ça demande un peu de temps pour développer un thème qui convient à notre usage.
Je pense que je ferais d’autres articles pour montrer mes découvertes pour que ça serve à d’autres 😊