Travailler avec Markdown en TypeScript : bibliothèques, parseurs et outils

Introduction à Markdown et TypeScript

Markdown est un langage de balisage léger, largement utilisé pour formater du texte dans la documentation, les fichiers README, les blogs et les chats. TypeScript, en tant que surcouche fortement typée de JavaScript, permet de créer des applications robustes et évolutives pour le traitement de Markdown. Sur le site pythonlib.ru, nous examinerons les meilleures bibliothèques et outils pour travailler avec Markdown en TypeScript, leurs fonctionnalités et des exemples d'utilisation.

Bibliothèques populaires pour le parsing Markdown

Il existe plusieurs solutions matures pour convertir Markdown en HTML ou en d'autres formats. Examinons les trois plus populaires :

\n
• marked — un parseur rapide et léger avec prise en charge de la syntaxe GFM (GitHub Flavored Markdown). Il dispose de types intégrés pour TypeScript.
\n
• showdown — un convertisseur universel de Markdown en HTML avec possibilité d'extension et de personnalisation.
\n
• unified (avec le paquet remark) — un écosystème moderne pour le traitement de Markdown basé sur AST (arbre syntaxique abstrait). Il permet non seulement de parser, mais aussi d'analyser, transformer et formater Markdown.
\n

Installation et configuration

Pour commencer, installez l'une des bibliothèques via npm. Exemple pour marked :

npm install marked\nnpm install @types/marked --save-dev

Pour unified avec remark, plusieurs paquets sont nécessaires :

npm install unified remark-parse remark-html\nnpm install @types/unified @types/remark-parse

Exemple : parsing Markdown avec marked

Créons une fonction simple pour convertir une chaîne Markdown en HTML :

import { marked } from 'marked';\n\nfunction renderMarkdown(mdContent: string): string {\n    return marked.parse(mdContent);\n}\n\nconst md = `# Titre\\n\\nCeci est du texte **gras** et _italique_.`;\nconst html = renderMarkdown(md);\nconsole.log(html);\n// Sortie : <h1>Titre</h1>\n// <p>Ceci est du texte <strong>gras</strong> et <em>italique</em>.</p>

Travailler avec AST via unified + remark

La bibliothèque unified permet de travailler avec Markdown au niveau de l'arbre. Cela est utile pour analyser la structure du document, extraire les titres ou transformer les liens.

import { unified } from 'unified';\nimport remarkParse from 'remark-parse';\nimport remarkHtml from 'remark-html';\n\nasync function mdToHtml(mdContent: string): Promise<string> {\n    const file = await unified()\n        .use(remarkParse)\n        .use(remarkHtml)\n        .process(mdContent);\n    return String(file);\n}\n\nconst md = `## Deuxième niveau\\n\\nListe :\\n- Élément 1\\n- Élément 2`;\nmdToHtml(md).then(console.log);\n// Sortie : <h2>Deuxième niveau</h2>\n// <p>Liste :</p>\n// <ul>\n// <li>Élément 1</li>\n// <li>Élément 2</li>\n// </ul>

Création d'un éditeur Markdown avec coloration syntaxique

Pour un site éducatif, il est utile d'implémenter un éditeur interactif où l'utilisateur écrit du Markdown et voit à droite un aperçu HTML avec coloration syntaxique. Utilisons marked et highlight.js pour la coloration des blocs de code :

import { marked } from 'marked';\nimport hljs from 'highlight.js';\n\n// Configuration de marked pour utiliser highlight.js\nmarked.setOptions({\n    highlight: (code: string, lang: string) => {\n        if (lang && hljs.getLanguage(lang)) {\n            return hljs.highlight(code, { language: lang }).value;\n        }\n        return code; // si la langue n'est pas spécifiée ou introuvable\n    }\n});\n\nfunction previewMarkdown(mdContent: string): string {\n    return marked.parse(mdContent);\n}\n\n// Exemple d'utilisation dans le navigateur (événement input sur textarea)\nconst textarea = document.getElementById('editor'