Faire une présentation avec reveal.js et Markdown

On a vu dans l'article précédent comment réaliser une présentation avec reveal.js.
Pour ajouter du contenu dans le diaporama, il faut utiliser HTML mais il existe aussi une solution pour utiliser la syntaxe Markdown.

L'utilisation de Markdown apporte certains avantages:

• rédaction rapide
• facile à lire
• permet une vue d'ensemble de la présentation

La solution la plus efficace est de créer un fichier externe avec le contenu des diapos (diaporama.md) et d'indiquer son utilisation dans le fichier index.html.
Il est possible de définir des attributs pour modifier des éléments du diaporama grâce une syntaxe spécifique.

Utilisation

Dans notre fichier index.html, on commence par créer une section qui permettra d'utiliser le fichier diaporama.md.

...
<section data-markdown="diaporama.md"  
         data-separator="^\\n\\n\\n"  
         data-separator-vertical="^\\n\\n"  
         data-separator-notes="^Note:"  
         data-charset="UTF-8">
</section>
...

• data-markdown: le nom du fichier Markdown utilisé.
• data-separator: séparateur pour les diapos (séquence horizontale).
• data-separator-vertical: séparateur pour les diapos (séquence verticale).
• data-separator-notes: séparateur pour les notes (mode présentation).
• data-charset: encodage (optionnel).

Ensuite, on crée notre fichier Markdown (diaporama.md):

# reveal.js
## Outil de présentation HTML

Crée par [https://blog.niqnutn.com](nIQnutn)

Créer des diapositives

Pour créer des slides, il suffit d'insérer les séparateurs correspondant à la séquence horizontale ou verticale.

Avec les séparateurs définit dans notre fichier index.html:

• Pour créer une diapo de horizontale, il suffit d'insérer 3 lignes vides (correspond au séparateur "^\\n\\n\\n").
• Pour insérer une diapo verticale, il suffit d'insérer 2 lignes vides (correspond au séparateur "^\\n\\n").

Par exemple, pour réaliser une présentations avec 5 diapos :

[A] [B] [E]
    [C]
    [D]

Il faut écrire:

# Diapositive A

Lorem Ipsum



# Diapositive B

Non paranda nobis solum ea, sed fruenda etiam sapientia est.


## Diapositive C

Sive enim ad sapientiam perveniri potest.


## Diapositive D

Etenim si delectamur, cum scribimus, quis est tam invidus, qui ab eo nos abducat?



# Diapositive E

Iis igitur est difficilius satis facere.

Notes

Il est toujours possible d'insérer des notes dans notre diaporama. Il faudra utiliser le séparateur définit précédemment.

Pour ajouter une commentaire dans une diapo, il faut ajouter en début de ligne "Note:"

# Comment insérer des notes

Il suffit d'insérer `Note:` dans votre diapo.

Note: Sequi quae veritatis voluptate minima libero

Définir des attributs

Pour un élément

Il est possible d'ajouter des attributs à certains éléments de la présentation grâce à une syntaxe spécifique.

Pour afficher une liste avec l'animation fragment:

Liste:
* HTML <!-- .element: class="fragment" -->
* CSS <!-- .element: class="fragment" -->
* javascript <!-- .element: class="fragment" -->

En utilisant cette syntaxe, on peut aussi définir la taille d'une image:

![Description de l'image](image.jpg) <!-- .element: width="80px" -->

Pour une diapo

De la même manière, il est possible d'ajouter des attributs pour une diapositive.

Par exemple, pour définir l'arrière-plan de la diapo:

<!-- .slide: data-background="#ff0000" -->
Arrière plan: rouge

Méthode alternative

Plutôt que d'utiliser un fichier externe, on peut utiliser Mardown directement dans notre fichier index.html
Pour ajouter une diapo utilisant la syntaxe Markdown:

<section data-markdown>
    <script type="text/template">
        # Le titre
        
        Un paragraphe avec du texte et un [lien](https://blog.niqnutn.com)
    </script>
</section>

Conclusion

Avec reveal.js on peut retrouver les avantages de Markdown pour faire rapidement des présentations.
C'est facile et concis, un exemple avec le fichier Markdown diaporama.md et son rendu (source).

Utiliser un fichier externe permet notamment de séparer le fond de la forme.
Le contenu présent dans un fichier "diaporama.md" et le reste dans "index.html" pour définir la configuration.

Par contre, Markdown ne permet pas de tout faire directement.
On pourra utiliser une syntaxe spécifique pour ajouter des attributs à un élément ou à une diapo.
Dans le pire des cas, on peut toujours utiliser le format HTML.

Ressources

• Réaliser une présentation avec reveal.js
• Documentation