Markdown-Verarbeitung in TypeScript: Bibliotheken, Parser und praktische Anwendung

Arbeiten mit Markdown in TypeScript: Vom Parsing bis zu benutzerdefinierten Plugins

Markdown bleibt eine der beliebtesten Auszeichnungssprachen für Dokumentation, Blogs und Bildungsplattformen. Bei der Entwicklung mit TypeScript entsteht die Notwendigkeit, Markdown nicht nur anzuzeigen, sondern auch den Prozess seiner Umwandlung flexibel zu steuern. In diesem Artikel betrachten wir drei wichtige Bibliotheken, die Ihnen helfen, Markdown in Ihr TypeScript-Projekt zu integrieren, und zeigen, wie Sie eigene Erweiterungen erstellen.

Warum ist TypeScript für die Arbeit mit Markdown wichtig?

TypeScript fügt strenge Typisierung hinzu, was bei der Verarbeitung von Benutzerinhalten entscheidend ist. Sie wissen genau, welche Daten aus Markdown-Dateien kommen, und können Laufzeitfehler vermeiden. Darüber hinaus vereinfacht TypeScript die Erstellung von Plugins und Middleware für Parser.

Überblick über beliebte Bibliotheken

• marked — der schnellste und einfachste Parser. Minimale Konfiguration, hervorragende Leistung.
• unified / remark — Ökosystem für die syntaktische Analyse. Ermöglicht die Erstellung komplexer Transformationsketten (AST -> HTML -> React).
• showdown — eine leichte Alternative mit Unterstützung für Erweiterungen, gut dokumentiert.

Beispiel 1: Basis-Parsing mit marked

Die Bibliothek marked ist ideal für einen schnellen Einstieg. Installieren Sie sie über npm:

npm install marked

Die Typen für TypeScript sind im Lieferumfang enthalten. Anwendungsbeispiel:

import { marked } from 'marked';

const markdownContent = `# Hallo, TypeScript!Dies ist **fetter Text** und `Code`.- Listenelement- Noch eines`;

const html = marked.parse(markdownContent);console.log(html);// Ausgabe: <h1>Hallo, TypeScript!</h1>// <p>Dies ist <strong>fetter Text</strong> und <code>Code</code>.</p>// <ul><li>Listenelement</li><li>Noch eines</li></ul>

Für asynchrone Arbeit verwenden Sie marked.parseAsync(). Dies ist nützlich beim Laden von Dateien aus dem Netzwerk.

Beispiel 2: Benutzerdefinierter Renderer mit Typisierung

Manchmal muss das Standardverhalten geändert werden. Zum Beispiel das Hinzufügen von Klassen zu Links oder die Verarbeitung von Bildern. Erstellen wir einen benutzerdefinierten Renderer in 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 = 'Besuche [PythonLib](https://pythonlib.ru)';const result = marked.parse(markdown);// <a href="https://pythonlib.ru" target="_blank" class="external-link">PythonLib</a>

Der Typ Partial<CustomRenderer> stellt sicher, dass wir nur die benötigten Methoden überschreiben.

Beispiel 3: Arbeiten mit AST über unified und remark

Wenn Sie die vollständige Kontrolle über die Dokumentstruktur benötigen, verwenden Sie unified und remark. Installation:

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

Beispiel für das Parsing in einen Syntaxbaum (AST) und zurück:

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

const markdown = '# ÜberschriftDies ist **wichtig**.';

const file = await unified()  .use(remarkParse)      // Parsing in AST  .use(remarkStringify)  // Zurück zu Markdown (zur Überprüfung)  .process(markdown);

console.log(String(file)); // Ursprüngliches Markdown

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