J'ai déjà bien avancé sur l'enrichissement des fonctionnalités de Markdown, mais la liste c'est encore allongée :
- Emojis
- Exposants et indices
Ratures- Une table des matières
- Blocs d'information, remarque, etc…
- Remplacements automatiques (ajout d'espaces insécables, etc.)
Emojis
Plus je prends mes aise avec mon journal, plus j'ai envie d'ajouter de petits emojis pour informer sur mon ressentis, sans passer par de longue périphrases (qui à dit que j'étais bavard ? 😅).
Je pourrais simplement aller chercher l'Unicode des emojis que je souhaite ajouter puis les insérer en tant qu'entité HTML (Exemple : 😉 = 😉) ou en copiant directement le caractère Unicode, mais… la flemme !
Avec markdown-it-emoji(Opens in a new window), je peux facilement les ajouter avec leur nom, comme je le fais déjà dans Slack ou dans Teams. Par exemple : :wink: donne 😉
Exposants et indices
Je n'en ai pas encore eu besoin, mais je me dis que ce serais bien de le prévoir. Comme c'est un cas d'usage comment, il n'est pas trop difficile de trouver des plugin adaptés :
Je peux maintenant écrire "2nd", "22= 4" ou "CO2"
Ratures
Les ratures sont en fait déjà supportées : il suffit de saisir un double tilde. Par exemple, ~~texte raturé~~ donne texte raturé.
Table des matières
Initialement, je pensais utiliser un plugin markdown-it mais après mûre réflexion, je préfère utiliser un plugin eleventy afin de pouvoir l'intégrer dans mes template.
Information
Prérequis : Des ancres sur les en-têtes
Quel que soit le mode d'intégration choisi, je dois installer en prérequis markdown-it-anchor(Opens in a new window). Je pourrais faire sans, mais cela signifierait ajouter manuellement des ancres sur chaque en-tête que je souhaite faire remonter dans ma table des matières 😬
Sur ce genre de fonctionnalités, il faut faire attention à l'accessibilité des liens ajoutés. Heureusement ce plugin a bien exploré le sujet et propose de nombreuses options.
J'opte donc pour eleventy-plugin-nesting-toc(Opens in a new window) car il semble proposer plus d'options de personnalisation.
Malheureusement son implémentation pose quelques problèmes d'accessibilité, dus au fait qu'il n'est pas possible de personnaliser les attributs du conteneur et de l'en-tête généré par le plugin. Je contourne le problème en utilisant un conteneur non sémantique (bref, une <div>) et en intégrant moi-même la nav et l'en-tête dans le template :
// eleventy.config.js
import tableOfContent from "eleventy-plugin-nesting-toc";
export default async function(eleventyConfig) {
eleventyConfig.addPlugin(tableOfContent, {
ignoredElements: ["a.header-anchor"],
wrapper: "div",
wrapperClass: "toc-container"
});
}<!-- log-entry.html -->
<nav id="table-of-content" aria-describedby="toc-heading">
<h2 id="toc-heading">Table des matières</h2>
{{ content | toc }}
</nav>J'ai aussi ajouté un peu de CSS pour former une sidebar dans laquelle placer cette table. L'intégration est imparfaite mais le perfectionnement devra attendre un autre jour.