Voyons comment mettre du HTML dans des tableaux en kramdown pour structurer une cellule de tableau.

Cet article est inspiré d’un article1 de Michael Rose sur son site [[https://mademistakes.com/][Made Mistakes]].

Il n’est pas possible de formater du texte dans les tableaux écrits en kramdown (car ça n’est pas non plus possible en Markdown, le langage duquel il est issu).

Il est possible de formater du texte dans un tableau en kramdown comme cela

Fruits Prix Commentaires
Bananes 1,20€ Riches en fibres
Oranges 2,00€ Bourrées de vitamine C

Mais lorsqu’on tente une structure sur plusieurs lignes, comme une liste d’éléments, ça crée une nouvelle ligne dans le tableau.

Fruits Prix Commentaires
Bananes 1,20€ - Riches en fibres
    - Protéines
Oranges 2,00€ Bourrées de vitamine C

De plus, la liste ne s’affiche pas correctement. Comment faire pour obtenir le résultat suivant ?

Fruits Prix Commentaires
Bananes 1,20€
  • Riches en fibres
  • Protéines
Oranges 2,00€ Bourrées de vitamine C

La solution est d’entourer le code HTML à l’intérieur des balises == et ==. Ces balises permettent “d’échapper” du code hors de la syntaxe kramdown. Cela nous permet d’utiliser la syntaxe HTML pour formater à volonté le texte de la cellule.

| Fruits  | Prix  | Commentaires                                                                                          |
|---------|-------|-------------------------------------------------------------------------------------------------------|
| Bananes | 1,20€ | {::nomarkdown}<ul><li>Riches en <strong>fibres</strong></li><li>Protéines</li></ul>{:/} |
| Oranges | 2,00€ | Bourrées de vitamine C                                                                                |

Il semble que Pandoc2 et RedCarpet3 ont un meilleur support de ce genre de formatage, et il est possible de les utiliser autant que kramdown dans Jekyll4.

Références