Convertissez vos documents markdown en slideshow

Convertissez vos documents markdown en slideshow

Je me suis mis à markdown depuis quelques temps, pour écrire des documentations, des spécifications et tout un tas d’autres choses.

Et un jour j’ai eu besoin de convertir des fichiers en slideshow, un peu comme pour faire des documents PowerPoint générés depuis markdown.

Markdown ?

Ce format, en plus d’être simple à apprendre est très lisible en l’état, d’autant plus avec un éditeur de texte moderne.

Et même si son balisage est naturel et transparent (ou presque), il permet une conversion facile vers d’autres formats, pour générer des documents HTML par exemple, ou un slideshow en ce qui nous concerne.

Conversion de markdown en slideshow

Ainsi, mon but était de convertir certains documents markdown que j’écrivais en présentation de type Powerpoint.

Je me suis alors tourné vers remark.js : il suffit d’insérer le document markdown dans un textarea dans un document HTML, avec les deux lignes de JavaScript qui vont bien, et le tour est joué.

Le mode orateur est excellent : une fois le slideshow ouvert dans le navigateur, une pression sur C ouvre un autre slideshow dans une autre fenêtre, une pression sur P ouvre le mode orateur, qui présente la slide actuelle, la suivante, les notes privées et le timer pour chronométrer la présentation. Essayez !

Vous vous en doutiez, il y a un mais : remark nécessite une syntaxe particulière, qui, à mon goût, dénature le principe d’écriture naturelle de markdown.

Je voulais continuer à écrire mes documents structurés grâce aux titres, sans avoir à ajouter d’annotation, comme par exemple --- pour séparer les slides.

J’ai donc décider de créer un analyseur capable de transformer un markdown structuré avec des titres sur trois niveaux pour le rendre compatible avec remark.

Ainsi est né markdown-to-html.

Markdown-to-html ?

Markdown-to-html est un outil en ligne de commande écrit en node.js qui sert d’abord à générer le slideshow sous la forme d’un fichier HTML autonome.

En clair, vous pouvez copier ce fichier, l’envoyer par mail, …

Installation

Pour l’installer, il faut d’abord installer node.js si ce n’est pas déjà fait, puis saisir en ligne de commande :

npm install markdown-to-slides -g

Génération à partir d’un markdown pour remark…

A partir de ce moment là, dans le dossier du fichier mardown :

markdown-to-slides mon-fichier.md -o mon-slideshow.html

Ici, mon-fichier.md doit être formaté selon la syntaxe nécessaire à remark.

Le paramètre -o permet de définir le nom du fichier généré.

… et à partir d’un markdown écrit ‘plus naturellement’

Si vous avez l’habitude de structurer vos markdown plus naturellement, avec un titre général (#), des titres de chapitre (##) et des titres de slide (###), comme un humain en fait, le mode document devrait vous plaire.

markdown-to-slides -d mon-fichier.md -o mon-slideshow.html

L’option -d permet d’activer le mode document, pour suivre ces règles :

  • le titre général (#) est affiché sur sa propre page
  • les titres de chapitre (##) sont affichés sur leur propre page s’ils ne sont pas suivis directement de texte
  • un slide est composé d’un titre de slide (###) et de ce qui le suit

Par exemple :

# Titre du document

## Premier chapitre

### Diapo 1.1

Du contenu

### Diapo 1.2

Encore du contenu

## Deuxième chapitre

Du contenu sour le titre du deuxième chapitre

## Et ainsi de suite...

Quelques options

D’autres options en ligne de commande existent.

Tout d’abord le paramètre --watch permet de mettre à jour le fichier généré à chaque fois que vous modifiez le fichier markdown. Pratique pour vérifier rapidement les mises à jour.

Le paramètre --style suivi du nom d’un fichier CSS permet de personnaliser le style des diaporamas.

Les paramètres --script et --template suivent le même principe, pour personnaliser respectivement des scripts en JavaScript supplémentaires à exécuter pendant le diaporama et le modèle HTML pour l’inclusion des slides (en mustache).

Jetez un oeil à la page de markdown-to-html sur GitHub pour la liste complète des paramètres.

Le mot de la fin

J’ai encore plusieurs idée d’améliorations pour markdown-to-html, notamment la gestion des notes de l’orateur, toujours sans perturber l’écriture du document d’origine.

D’ailleurs, cet utilitaire est inspiré de markdown-html que je vous conseille, pour convertir vos documents markdown vers HTML, toujours en ligne de commande.

L'illustration de cet article est une image sous licence CC BY-SA 3.0 par Caletka Ondřej

Cet article vous a été utile ? Partage it !

Laisser un commentaire

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

Si vous le souhaitez, renseignez le champ 'Nom' de cette façon : 'VotreNom@VotreMotClef' pour obtenir une ancre optimisée pour les moteurs de recherche.