Arbeiten mit Markdown in TypeScript: Bibliotheken, Parser und Werkzeuge

Einführung in Markdown und TypeScript

Markdown ist eine leichtgewichtige Auszeichnungssprache, die häufig zur Textformatierung in Dokumentationen, README-Dateien, Blogs und Chats verwendet wird. TypeScript, als streng typisierte Erweiterung von JavaScript, ermöglicht die Erstellung zuverlässiger und skalierbarer Anwendungen zur Verarbeitung von Markdown. Auf der Website pythonlib.ru betrachten wir die besten Bibliotheken und Werkzeuge für die Arbeit mit Markdown in TypeScript, ihre Funktionen und Anwendungsbeispiele.

Beliebte Bibliotheken zum Parsen von Markdown

Es gibt mehrere ausgereifte Lösungen zur Umwandlung von Markdown in HTML oder andere Formate. Betrachten wir die drei gängigsten:

\n
• marked — ein schneller und leichter Parser mit Unterstützung für GFM-Syntax (GitHub Flavored Markdown). Verfügt über integrierte Typen für TypeScript.
\n
• showdown — ein universeller Konverter von Markdown in HTML mit Erweiterungs- und Anpassungsmöglichkeiten.
\n
• unified (mit dem Paket remark) — ein modernes Ökosystem zur Verarbeitung von Markdown auf Basis eines AST (Abstrakter Syntaxbaum). Ermöglicht nicht nur das Parsen, sondern auch das Analysieren, Transformieren und Formatieren von Markdown.
\n

Installation und Konfiguration

Installieren Sie zunächst eine der Bibliotheken über npm. Beispiel für marked:

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

Für unified mit remark werden mehrere Pakete benötigt:

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

Beispiel: Markdown-Parsing mit marked

Erstellen wir eine einfache Funktion zur Konvertierung eines Markdown-Strings in HTML:

import { marked } from 'marked';\n\nfunction renderMarkdown(mdContent: string): string {\n    return marked.parse(mdContent);\n}\n\nconst md = `# Überschrift\\n\\nDies ist **fetter** Text und _kursiver_ Text.`;\nconst html = renderMarkdown(md);\nconsole.log(html);\n// Ausgabe: <h1>Überschrift</h1>\n// <p>Dies ist <strong>fetter</strong> Text und <em>kursiver</em> Text.</p>

Arbeiten mit AST über unified + remark

Die Bibliothek unified ermöglicht die Arbeit mit Markdown auf Baumebene. Dies ist nützlich für die Analyse der Dokumentstruktur, das Extrahieren von Überschriften oder das Transformieren von Links.

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 = `## Zweite Ebene\\n\\nListe:\\n- Punkt 1\\n- Punkt 2`;\nmdToHtml(md).then(console.log);\n// Ausgabe: <h2>Zweite Ebene</h2>\n// <p>Liste:</p>\n// <ul>\n// <li>Punkt 1</li>\n// <li>Punkt 2</li>\n// </ul>

Erstellung eines Markdown-Editors mit Syntax-Highlighting

Für eine Bildungswebsite ist es nützlich, einen interaktiven Editor zu implementieren, in dem der Benutzer Markdown schreibt und rechts eine HTML-Vorschau mit Syntax-Highlighting sieht. Wir verwenden marked und highlight.js für das Highlighting von Codeblöcken:

import { marked } from 'marked';\nimport hljs from 'highlight.js';\n\n// Konfiguration von marked zur Verwendung von 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; // wenn Sprache nicht angegeben oder nicht gefunden\n    }\n});\n\nfunction previewMarkdown(mdContent: string): string {\n    return marked.parse(mdContent);\n}\n\n// Beispiel für die Verwendung im Browser (input-Ereignis auf textarea)\nconst textarea = document.getElementById('editor'