Traitement Markdown en TypeScript : bibliothèques, parseurs et applications pratiques

Travailler avec Markdown en TypeScript : du parsing aux plugins personnalisés

Markdown reste l'un des langages de balisage les plus populaires pour la documentation, les blogs et les plateformes éducatives. Lors du développement en TypeScript, il est nécessaire non seulement d'afficher du Markdown, mais aussi de gérer flexiblement son processus de transformation. Dans cet article, nous allons examiner trois bibliothèques clés qui vous aideront à intégrer Markdown dans votre projet TypeScript, et montrer comment créer vos propres extensions.

Pourquoi TypeScript est-il important pour travailler avec Markdown ?

TypeScript ajoute un typage strict, ce qui est crucial lors du traitement de contenu utilisateur. Vous savez exactement quelles données proviennent des fichiers Markdown et pouvez éviter les erreurs d'exécution. De plus, TypeScript simplifie la création de plugins et de middleware pour les parseurs.

Aperçu des bibliothèques populaires

• marked — le parseur le plus rapide et le plus simple. Configuration minimale, excellente performance.
• unified / remark — un écosystème pour l'analyse syntaxique. Permet de créer des chaînes de transformations complexes (AST -> HTML -> React).
• showdown — une alternative légère avec support des extensions, bien documentée.

Exemple 1 : Parsing de base avec marked

La bibliothèque marked est idéale pour un démarrage rapide. Installez-la via npm :

npm install marked

Les types pour TypeScript sont fournis. Exemple d'utilisation :

import { marked } from 'marked';

const markdownContent = `# Bonjour, TypeScript !Ceci est **du texte en gras** et `du code`.- Élément de liste- Un autre`;

const html = marked.parse(markdownContent);console.log(html);// Sortie : <h1>Bonjour, TypeScript !</h1>// <p>Ceci est <strong>du texte en gras</strong> et <code>du code</code>.</p>// <ul><li>Élément de liste</li><li>Un autre</li></ul>

Pour un fonctionnement asynchrone, utilisez marked.parseAsync(). C'est utile lors du chargement de fichiers depuis le réseau.

Exemple 2 : Rendu personnalisé avec typage

Parfois, il est nécessaire de modifier le comportement par défaut. Par exemple, ajouter des classes aux liens ou traiter les images. Créons un rendu personnalisé en TypeScript :

import { marked, Renderer } from 'marked';

interface CustomRenderer extends Renderer {  link(href: string, title: string | null, text: string): string;}

const renderer: Partial<CustomRenderer> = {  link({ href, title, text }) {    return `<a href="${href}" target="_blank" rel="noopener noreferrer" class="external-link">${text}</a>`;  }};

marked.use({ renderer });

const markdown = 'Visite [PythonLib](https://pythonlib.ru)';const result = marked.parse(markdown);// <a href="https://pythonlib.ru" target="_blank" class="external-link">PythonLib</a>

Le type Partial<CustomRenderer> garantit que nous ne redéfinissons que les méthodes nécessaires.

Exemple 3 : Travail avec l'AST via unified et remark

Si vous avez besoin d'un contrôle total sur la structure du document, utilisez unified et remark. Installation :

npm install unified remark-parse remark-stringify remark-html

Exemple de parsing en arbre syntaxique (AST) et retour :

import { unified } from 'unified';import remarkParse from 'remark-parse';import remarkStringify from 'remark-stringify';import remarkHtml from 'remark-html';

const markdown = '# TitreCeci est **important**.';

const file = await unified()  .use(remarkParse)      // Parsing en AST  .use(remarkStringify)  // Retour en Markdown (pour vérification)  .process(markdown);

console.log(String(file)); // Markdown original

const htmlFile = await unified()  .use(remarkParse)  .use(remarkHtml)       // Transformation