La Magie de Markdown et unified.js

Markdown est le format standard pour rédiger de la documentation technique et des blogs. Mais comment le convertir en HTML ?

L'approche moderne consiste à utiliser l'écosystème unified, qui traite le contenu par le biais d'arbres syntaxiques abstraits (AST).

Le pipeline Unified

Un pipeline typique ressemble à ceci :

1. Analyser (Parse) : Convertir une chaîne en AST (en utilisant remark-parse).
2. Transformer (Transform) : Modifier l'AST (ex. : ajouter la coloration syntaxique avec remark-rehype et rehype-highlight).
3. Chaîner (Stringify) : Convertir l'AST de nouveau en chaîne HTML (en utilisant rehype-stringify).

import { unified } from 'unified';
import remarkParse from 'remark-parse';
import remarkRehype from 'remark-rehype';
import rehypeHighlight from 'rehype-highlight';
import rehypeStringify from 'rehype-stringify';

const processor = unified()
  .use(remarkParse)
  .use(remarkRehype)
  .use(rehypeHighlight)
  .use(rehypeStringify);

const html = await processor.process('# Hello World');
console.log(html.toString());

Cette approche vous donne un maximum de flexibilité et de sécurité lors de la manipulation de contenu généré par l'utilisateur ou de l'écriture de votre propre générateur de site statique !