Concevoir une présentation en markdown

Cela fait quelques mois que je rédige tous mes textes en markdown. Cette syntaxe est basique et simple à apprendre et permet de se concentrer sur la structure du texte et sur sa pensée plus qu’à des éléments de détail relatifs à la mise en page.

Pour mes supports de présentation, j’utilisais naguère Impress, l’outil de présentation de LibreOffice. Je conservais mon fichier en local, et je l’enrichissais progressivement jusqu’à ce qu’il soit terminé et prêt à être présenté. Juste avant mon cours, j’avais l’habitude d’en faire la conversion en PDF au cas où le support LibreOffice ne serait pas lisible sur l’ordi de présentation qui n’est pas forcément le mien.

Toutefois, comme j’utilise plusieurs machines pour travailler et de plus, comme je suis amené à enregistrer plusieurs versions d’un même fichier (en local ou sur des disques partagés plus ou moins accessibles depuis l’extérieur du campus), je me retrouvais invariablement avec des versions différentes d’un même fichier disséminées un peu partout. Retrouver la dernière version à jour était souvent un casse-tête dont je me serais bien passé. J’ai donc choisi cette fois-ci d’utiliser Git et un répertoire sur Github pour gérer les différentes versions de mon travail. Je ne compte pas approfondir cet aspect des choses, le web étant plein de tutoriels pour apprendre à se servir de Git. Je vais plutôt détailler mon autre choix qui a consisté à ne plus utiliser Impress pour mettre au point mon diaporama et à lui substituer Beamer, l’outil de présentation en LaTeX, et cela en travaillant sur un fichier source rédigé en Markdown. Dans ce scénario, la transformation d’un fichier à l’autre serait assuré avec Pandoc.

En effet, en plus de sa faible courbe d’apprentissage (contrairement à LaTex), l’intérêt du Markdown tient aussi à ce qu’on peut facilement transformer un texte dans des formats différents sans que cela ne pose de problème. Même si j’utilise mon éditeur de texte en markdown principalement pour produire des PDF, Pandoc peut très bien gérer des conversions du markdown en format open document, HTML ou epub.

Toutefois la conversion de fichiers markdown en fichiers PDF requiert l’usage d’un éditeur LaTeX. Pour ma part, j’ai téléchargé Texlive. De tous les programmes qui vont être cités dans ce post, c’est le plus long à installer (même si cela présente peu de difficultés en soi).

Quand on dispose sur sa machine d’un éditeur en LaTeX et de Pandoc, pour convertir son document du markdown en PDF, il convient d’ouvrir un terminal de commande dans le répertoire où se trouve le fichier source en MD (appelons-le document.md). L’ouverture du terminal dans Windows se fait avec la commande SHIFT + clic droit, puis en sélectionnant dans le menu « Ouvrir la fenêtre Powershell ici ». Pour Linux, c’est le Ctrl+Alt T habituel. Reste à taper dans ce terminal la commande suivante :

pandoc document.md -o document.pdf

Séquençage du fichier source

La création d’une présentation en markdown requiert de donner quelques instructions supplémentaires afin que Beamer interprète les sections du fichier source comme des chapitres ou des diapositives

Pour cela, il faut partir du principe que chaque chapitre de la présentation correspondra à un <h1> (titre 1 ou # titre) en markdown. Chaque titre 2 (<h2> ou ## texte) fera l’objet d’une slide.

# Première partie (= slide 1 titre de la première partie)

## première diapositive (= slide 2)

## deuxième diapositive (= slide 3)

# Deuxième partie (= slide 4 titre de la deuxième partie)

etc.

La conversion du fichier source dans ce format se fait de la manière suivante :

pandoc document.md --slide-level 2 -t beamer --pdf-engine=xelatex -o document.pdf

–slide-level 2 définit comme on l’a vu qu’une diapositive correspond à un titre 2 (<h2> en HTML)

-t beamer précise qu’on ne veut pas obtenir une lettre ou un article en PDF mais bien une présentation à base de diapositives.

–pdf-engine=xelatex précise comment cette présentation va être convertie en document PDF

Je n’aime pas le thème par défaut de LaTeX, j’ai donc été dans la galerie de thèmes de Beamer et j’ai choisi le thème Goettingen qui permet d’afficher la table des matières à droite de la diapo. La partie active est mise en évidence dans ce cadre. Avec l’ajout du thème, la commande est donc la suivante :

pandoc document.md --slide-level 2 -t beamer -V theme:goettingen --pdf-engine=xelatex -o document.pdf

Intégrer des références dans le document avec Zotero

Utiliser Zotero avec Markdown

Lorsqu’on a comme moi l’habitude d’utiliser Zotero, il est hors de question de s’en passer quand on doit faire une présentation. On attend à la fin du document une bibliographie qui comporte l’ensemble des références citées dans le cours de la présentation.

Utilisant Atom comme éditeur de texte, j’ai suivi la méthode exposée sur le blog Zotero francophone. J’ai pas mal tâtonné avant d’arriver à produire le résultat voulu. L’une des dfficultés que j’ai rencontrées est que le filtre qui permet de gérer les références (Pandoc-citeproc) n’était pas présent dans la version du logiciel Pandoc que j’avais téléchargée sur sous Linux, alors que je n’ai pas eu besoin de le charger sur un autre ordi fonctionnant sous Windows. Après avoir fait ce constat, j’ai procédé à l’installation manquante :

apt install pandoc-citeproc

J’ai enregistré durant l’été un tuto qui montre comment on peut synchroniser une collection Zotero avec un fichier de références en format bib(tex). Il faut ensuite charger dans Atom un package qui gère l’insertion de références depuis ce fichier (autocomplete-bibtex). Dans ce package, on précise le lien vers le fichier bib synchronisé avec Zotero.

A partir de ce moment, chaque fois qu’on insère un @ dans Atom suivi d’une lettre la liste des références à disposition apparaît dans un cadre : il n’y a plus qu’à sélectionner la bonne.

Il reste cependant à conserver ces appels de citation dans le texte ainsi que la bibliographie qui doit s’afficher à la fin du texte au moment de la conversion en PDF avec Pandoc. Il est possible d’ajouter dans la ligne de commande le fichier source qui contient les références (references.bib) ainsi que le style bibliographique sélectionné dans la bibliothèque de styles disponibles sur le site de Zotero. J’ai une préférence pour le style IEEE, appelons ce dernier fichier ieee.bib. Comme l’indique le billet de blog déjà cité, la commande à entrer pour cette conversion devrait donc être la suivante :

pandoc document.md --pdf-engine=xelatex --filter pandoc-citeproc --bibliography=references.bib --csl=ieee.csl -f markdown+smart -o article.pdf

Cela fonctionnera si le fichier .bib et le fichier .csl sont au même niveau dans le répertoire où l’on a ouvert le terminal de commandes que le fichier .md

Utiliser l’entête YAML pour régler la mise en page du texte

Toutefois je préfère utiliser le pavé YAML du document pour indiquer le chemin vers l’un et l’autre. Le pavé YAML (on parle plus souvent d’un bloc de métadonnées ou d’un entête de fichier) est séparé du reste du document en markdown par des tirets (—). Lisible à la fois par la « machine » et l’oeil humain, il permet de définir un certain nombre de paramètres et de métadonnées relatifs au document. A ma connaissance, il n’y a pas d’information minimale à y inscrire, mais j’ai pris l’habitude d’y indiquer ce qui va constituer la page de titre du document, à savoir le titre, le sous-titre, la date, l’auteur. C’est basique et on peut certainement faire mieux en créant pour la page de titre un fichier à part, mais pour l’instant, cela suffit à mes besoins.

---
title: évaluer l'information à l'ère des fake-news
subtitle: présentation au CFCB
date: 17 septembre 2020
author: Damien Belvèze
---

Quand c’est pertinent, j’y ajoute aussi quelques lignes pour insérer une table des matières (toc [Table of Contents] = true) et l’intitulé sous lequel elle doit apparaître :

---
title: évaluer l'information à l'ère des fake-news
[...]
author: Damien Belvèze
toc: true
toc-title: Plan
---

Certains champs YAML sont propres à l’ensemble des documents, d’autres ont plus précisément vocation à servir dans le cas d’une conversion en PDF

C’est dans le pavé YAML que je vais indiquer quel fichier contient la bibliographie et quel fichier contient le style bibliographique:

---
[...]
bibliography: references.bib
biblio-style: ieee.csl
---

On peut aussi préciser le thème choisi (en l’occurrence Goettingen) mais cela aussi peut se retrouver dans la commande envoyée à Pandoc (voir plus haut)

J’ai également utilisé l’attribut link-citation: true afin que les liens soient cliquables dans le fichier en PDF. A noter aussi, l’attribut nocite: true pour que l’ensemble des références du fichier bib apparaissent même quand elles ne font pas l’objet d’un appel de citation dans le texte.

Gérer les images dans le document Markdown

En markdown, l’insertion de l’image se fait de la manière suivante :

![titre de l'image](URL ou chemin de l'image)

J’ai placé toutes mes images dans un dossier à part, cela donne donc quelque chose du genre :

![titre de l'image](images/image.jpg)

L’image peut prendre trop d’espace sur la page. Dans ce cas, il convient de déterminer sa dimension pour qu’elle s’insère sans problème sur la page. Cela se fait au moyen d’un attribut HTML. De manière générale, on en verra un autre exemple plus tard, tout ce que le markdown ne peut gérer lui-même peut être inséré dans le doc MD sous la forme de commandes LaTeX ou bien de balises HTML :

![titre de l’image](images/image.jpg){ width= »70% » } réduit de 30% la largeur initiale de l’image (on ne touche pas à la hauteur pour garder les proportions) ; on peut évidemment définir cette largeur en pixels : ![titre de l’image](images.image.jpg){ width= »100px » }

Quant à l’alignement du texte, cela peut se traiter avec des lignes de HTML insérées dans le document ou bien en renvoyant vers un fichier CSS, comme le suggère cet internaute.

Régler de la taille de la police

La taille des caractères et la police sont fixées par défaut. On peut changer l’une et l’autre dans l’entête Yaml, mais ce qui peut être plus intéressant pour une présentation est de distinguer certaines lignes qui doivent s’afficher en plus large caractères, par exemple une URL simple que les apprenants puissent recopier dans leur navigateur.

Pour gérer cela, j’ai téléchargé un programme complémentaire qui fournit un autre filtre dans la conversion que citeproc qui gère l’affichage des références. Il s’agit du paquet pandoc-latex-fontsize qu’on trouve sur Github.

Cette installation requiert l’usage de Python que j’avais déjà installé sur mon ordi windows en vue d’autres travaux. Je suis parvenu à installer ce package avec la commande pip3 (plutôt que pip) :

pip3 install pandoc-latex-fontsize

Puis j’ai inscrit un lien vers ce programme dans l’entête YAML :

pandoc-latex-fontsize:
  - classes: [smallcontent]
    size: tiny
  - classes: [largecontent, important]
    size: huge
---

La classe smallcontent correspond à la taille tiny (petits caractères) prédéfinie dans LaTeX, la classe largecontent ou important correspond à la taille huge également reconnue par LaTeX

Je peux donc afficher cet URL en l’inscrivant dans le texte en markdown de la manière suivante :

[https://focus.univ-rennes1.fr/cfcb_fakenews]{latex-fontsize=huge}

J’ai remarqué que j’avais un problème dans l’affichage de la bibliographie : la taille des caractères par défaut empêchait que l’ensemble de la biblio ne tienne dans une seule diapo.
a ce jour, je n’ai pas encore trouvé comment répartir sur plusieurs diapos cette biblio qui est générée automatiquement à l’endroit voulu par des balises HTML (div id="refs"><div>)

D’une part, je ne savais pas comment disposer la biblio sur deux slides au lieu d’une salle (ce qui se règle en LaTeX avec la fonction allowbreakframe

Restait la possibilité de réduire la taille des caractères de la biblio pour tout faire tenir dans une seule diapo (après tout, la biblio n’a d’intérêt que pour une lecture sur écran du PDF et pas pour une présentation dans le cours d’une séance). Le recours à pandoc-latex-fontsize ne donnait rien. Je ne savais pas comment articuler cela avec la classe id=refs.

J’ai donc pris le parti d’intégrer juste avant la balise div une commande LaTeX :

\tiny

Cela réduit la taille des caractères de la section qui suit (pour revenir à la taille par défaut : \small ou \normalsize selon le type de document (article ou diaporama)

en suite de quoi, la commande suivante :

pandoc document.md --slide-level 2 -t beamer -V theme:goettingen --pdf-engine=xelatex --filter pandoc-citeproc --filter pandoc-latex-fontsize -f markdown+smart -o document.pdf

permet d’obtenir le rendu souhaité.

On trouvera la présentation et les fichiers associés sur mon répertoire Github.

Tout cela représente plusieurs heures de recherche sur le web, d’autoformation et de tâtonnements divers, mais aujourd’hui, je n’envisage plus de faire différemment et au passage j’ai appris beaucoup en ce qui concerne markdown, HTML et LaTeX.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *