dimanche 16 février 2025

marpit pour remplacer powerpoint ou beamer

Utiliser un support projeté lors d'un exposé ou d'une réunion est devenu quelque-chose d'implicite. Dans ce domaine PowerPoint ™® ©  bénéficie d'une position hégémonique alors que c'est un outil propriétaire, lourd à utiliser et au  comportement parfois aléatoire (d'expérience "j'ai un problème avec le powerpoint" est la phrase la plus utilisée en exposée). Même si je travaille dans un écosystème ou LaTeX est l'outil le plus puissant pour la création de mes supports, qui m'amène donc à utiliser Beamer, j'ai souvent besoin de quelque-chose de plus léger et rapide. C'est comme ça que j'ai découvert Marp il y a quelques années. Au départ il s'agissait d'un éditeur Markdown spécialement adapté pour la réalisation de slides, mais le projet s'est mué en un préprocesseur marpit (comme pandoc) très efficace mais peut-être moins facile à prendre en main.


 

Mardown Qu'est ce que c'est ?

Pour utiliser Marp il faut déjà connaître MarkDown : il s'agit d'un langage de "balisage"  qui permet de formater du texte comme en html mais de manière beaucoup plus légère. On y trouve tous les outils de structuration élémentaires :

  • mise en relief du texte (gras, italique, souligné, ...)
  • listes à puces ou ordonnées ( utilisant des * ou  - et des tabulations)
  •  insertion d'images et de liens hypertextes
  •  création de tableaux simples, insertion de code source 

titre
======

* une liste
* deuxième item
* sous item __important__

plus d'information sur [wikipédia](https://en.wikipedia.org/wiki/Markdown)
on peut insérer des images aussi :
![w:600px](monimage.png)

 on structure son document dans un simple fichier texte mais sauvé dans un fichier avec l'extension *.md. On peut ensuite générer un document doc, ppt, latex, pdf, html ... à partir de ce fichier via un préprocessus comme pandoc avec une ligne de commande  :

pandoc monfichier.md -f markdown -t pdf -o monfichier.pdf

Si vous aimez utiliser des emoji vous pouvez les insérer facilement à partir de leur "shortcode". Vous pouvez les trouver sur des sites donnant des listes d'emoji  ils se présentent sous la forme :nom_emoji: avec un nom assez facile à retenir  si vous l'utilisez régulièrement , par exemple :

  • :warning: donne le sigle warning ⚠️ 
  • :arrow_right: donne la flèche  ➡️

Comment démarrer avec marp  ?

d'abord il faut installer marp, sous linux il faudra passer par npm :

npm install @marp-team/marpit  

 vous pouvez vérifier que la commande est bien installée en affichant son manuel :

$ marp --help
Usage:
marp [options] <files...>
marp [options] -I <dir>

Basic Options:
  -v, --version                      Show versions             [booléen]
  -h, --help                         Show help                 [booléen]

vous devez ensuite créer votre fichier markdown, vous pouvez prendre comme modèle pour une slide :

---
le titre de ma slide
====

* mon code markdown 


![bg](image_de_fond.jpg)

vous trouverez une liste détaillées des commandes markdown pouvant êtres utilisées avec marp sur le site du projet marpit  mais en voici celles qui m'ont été les plus utiles :

  •  pour les listes à puces utiliser * si vous voulez des items de listes affichées progressivement, sinon utilisez -
  • pour les listes ordonnées c'est la même chose avec 1) et 1.
  • pour l'insertion d'images on peut mettre des information de formatage entre les crochets [...] par exemple :

Si vous avez besoin d'utiliser des instructions qui ne sont pas présentent dans le langage markdown vous pouvez utiliser des commandes html, mais attention à bien passer des lignes avant et après chaque balise html ! Par exemple si vous voulez centrer un élément dans la slide utilisez les balises <center> ... </center> comme ceci :

 

---
le titre de ma slide
====

(il faut une ligne vide avant cette ligne puis avant la balise)

<center> 

ce texte sera centré dans la slide 
(il faut une ligne vide avant la balise suivante, puis une autre après la balise)

</center>

<!--  ajout de commentaires à une slide qui ne sont pas affichés -->


![bg](image_de_fond.jpg)

Vous pouvez enfin ajouter au début du fichier des instructions  pour indiquer  des instruction globales sur la mise en forme des slides, par exemple j'utilise :

<!-- marp: true -->
<!-- $theme: gaia -->
<!-- template: invert -->
<!-- color: white -->
<!-- paginate: true -->
<!-- page_number: true -->

Un fois votre fichier créé il vous reste à le traiter avec la commande marp, suivant le cas :

  • pour générer un fichier html :
    marp monfichier.md 
  • si votre fichier contient en plus du code html utiliser l'option --html :
    marp --html  monfichier.md 
  • si vous souhaitez une sortie pdf utilisez les option suivantes  :
    marp --html --allow-local-files --pdf monfichier.md
    --allow-local-files permet d'inclure toutes les images dans le pdf

Le fichier généré aura le même nom que le fichier markdown mais avec l'extension qui va bien (.html, .pdf ...). Jusqu'ici j'avais l'habitude d'utiliser un fichier pdf en support de présentation, mais ceux-ci sont parfois très volumineux. A contrario marp génère des présentation en html, très légères, qui peuvent être facilement présentées via un navigateur. affichée avec un navigateur la présentation sera agrémentée  de plusieurs boutons en bas de la fenêtre :

  • deux boutons < et > pour avancer ou reculer dans la liste des slides 
  • un bouton pour passer en plein écran
  • un bouton pour ouvrir une fenêtre de contrôle

Cette fenêtre de contrôle est un outil très pratique lors d'une présentation, en effet elle  affiche :

  • la slide actuelle
  • la slide suivante
  • un chronomètre  
  • et les commentaires éventuellement présents dans la slide 
c'est très pratique de garder cette fenêtre sur son écran alors que la fenêtre du navigateur  est affiché sur l'écran que regardent les spectateurs (donc pas besoin de cloner l'écran !).

Comment faire des slides avec plusieurs colonnes?

Une fonctionnalité qui m'a manqué en voulant convertir mes anciens fichier *.md fait avec l'éditeur marp, c'est la possibilité de présenter une slide avec plusieurs colonnes. A près avoir cherché un peu j'ai trouvé une solution relativement simple, elle est basée sur l'ajout de quelques instructions CSS en entête du fichier *.md :

<style>
.container{
    display: flex;
}
.col{
    flex: 1;
}
</style>

ensuite il suffit d'ajouter dans une slide , avec des balises <div> ... </div>  , un container  contenant les colonnes  comme ci-dessous :


---

titre de ma slide 
====

![bg](imagedefond.png)

<div class="container">

<div class="col">

code markdown de la première colonne

</div>

<div class="col">


code markdown de la deuxième colonne

</div>

</div>

attention  à bien avoir une ligne vide avant et après les balises <div> et </div> !

 

Libellés : ,

Aucun commentaire:

Enregistrer un commentaire

Pour écrire des formules mathématiques vous pouvez utiliser la syntaxe latex en mettant vos formules entre des "dollars" $ \$....\$ $ par exemple :
- $\sum_{n=1}^\infty {1\over n^2}={\pi^2\over 6}$ s'obtient avec \sum_{n=1}^\infty {1\over n^2}={\pi^2\over 6}
- $\mathbb R$ s'obtient avec {\mathbb R} et $\mathcal D$ s'obtient avec {\mathcal D}
- pour les crochets $\langle .,. \rangle$ dans les commentaires utilisez \langle .,. \rangle
vous pouvez écrire du html dans les commentaires :
- italique <i> ... </i> gras <b> ... </b>
- lien <a href="http://adresse "> .... </a>

Inscription à : Publier les commentaires (Atom)