Markdown nativ mit Bun parsen

Wenn Sie jemals unified, remark-parse, remark-rehype und rehype-stringify zusammengeschaltet haben, nur um einen Markdown-String in HTML zu konvertieren, kennen Sie den Overhead. Bun 1.3.8 (veröffentlicht im Januar 2026) liefert einen integrierten Markdown-Parser, der diese gesamte Kette durch einen einzigen API-Aufruf ersetzt – keine Installationen, keine Imports, keine Plugin-Konfiguration erforderlich.

Hier erfahren Sie, was die neue Bun.markdown-API leistet, wie sie funktioniert und wo sie in Ihren Workflow passt.

Was ist der Bun Markdown Parser?

Bun.markdown ist ein nativer Markdown-Parser, der direkt in die Bun-Runtime integriert ist. Er folgt der CommonMark-Spezifikation und ist als Zig-Port der md4c-C-Bibliothek implementiert – einem Parser, der in performance-kritischen Umgebungen wie Qt eingesetzt wird.

Da er als kompilierter Zig-Code und nicht als JavaScript läuft, vermeidet er den Overhead von JavaScript-basierten Parsing-Pipelines wie unified und remark. Anstatt mehrere Pakete miteinander zu verketten, stellt Bun eine einzige Runtime-API für die Markdown-Verarbeitung bereit.

Hinweis: Die Bun.markdown-API ist derzeit in der offiziellen Bun-Dokumentation als instabil gekennzeichnet. Die Schnittstelle funktioniert heute, aber spezifische Optionen und Methodensignaturen können sich in zukünftigen Bun-Releases ändern. Prüfen Sie die Bun Release Notes vor einem Upgrade in der Produktion.

Bun Markdown zu HTML: Die html()-Methode

Der einfachste Anwendungsfall – die Konvertierung von Markdown in einen HTML-String – erfordert keine Einrichtung:

const html = Bun.markdown.html("# Hello **world**")
// "<h1>Hello <strong>world</strong></h1>\n"

Übergeben Sie Optionen als zweites Argument. Die headings-Option ist nützlich für Dokumentationsseiten und die Generierung von Inhaltsverzeichnissen:

const html = Bun.markdown.html("## Getting Started", {
  headings: { ids: true }
})
// '<h2 id="getting-started">Getting Started</h2>\n'

GitHub Flavored Markdown (GFM)-Erweiterungen sind standardmäßig aktiviert, einschließlich Tabellen, Durchstreichungen (~~text~~), Aufgabenlisten (- [x] done) und permissive Autolinks. Zusätzliche Optionen wie wikiLinks, latexMath und automatische Überschriften-Verlinkung werden ebenfalls unterstützt.

Benutzerdefiniertes Rendering mit Bun.markdown.render()

Wenn Sie eine Ausgabe benötigen, die kein Standard-HTML ist – gestyltes Markup, ANSI-Terminal-Ausgabe oder Plain Text – akzeptiert render() JavaScript-Callbacks für jeden Elementtyp:

// CSS-Klassen zu Elementen hinzufügen
const html = Bun.markdown.render("# Title\n\nHello **world**", {
  heading: (children, { level }) => `<h${level} class="title">${children}</h${level}>`,
  paragraph: (children) => `<p class="body">${children}</p>`,
  strong: (children) => `<b>${children}</b>`,
})

// Alle Formatierungen zu Plain Text entfernen
const plain = Bun.markdown.render("# Title\n\n**bold** text", {
  heading: (children) => children + "\n",
  strong: (children) => children,
  paragraph: (children) => children + "\n",
})

// Null zurückgeben, um bestimmte Elemente vollständig wegzulassen
const noImages = Bun.markdown.render("# Title\n\n![logo](img.png)", {
  image: () => null,
  heading: (children) => `<h1>${children}</h1>`,
})

Dies macht render() nützlich für CLI-Tools, E-Mail-Generierung oder jede Pipeline, bei der HTML nicht das Zielformat ist.

Bun Markdown React-Rendering mit react()

Bun.markdown.react() gibt React-Elemente zurück, die direkt in einem Komponentenbaum verwendet werden können:

function Markdown({ text }: { text: string }) {
  return Bun.markdown.react(text)
}

// Markdown-Elemente auf benutzerdefinierte Komponenten mappen
const element = Bun.markdown.react("# Hello", {
  h1: ({ children }) => <h1 className="page-title">{children}</h1>,
})

// Funktioniert mit serverseitigem Rendering
import { renderToString } from "react-dom/server"
const html = renderToString(Bun.markdown.react("# Hello **world**"))

Wenn Sie React 18 oder älter verwenden, können Sie eine Kompatibilitätsoption übergeben:

Bun.markdown.react(markdownText, undefined, { reactVersion: 18 })

Wann Bun.markdown vs. Remark verwenden

Fazit

Wenn Sie bereits Bun 1.3.8 oder neuer ausführen, ist Bun.markdown global verfügbar – keine Installation erforderlich. Beginnen Sie mit Bun.markdown.html() für unkomplizierte Content-Pipelines und greifen Sie zu render() oder react(), wenn Sie mehr Kontrolle über die Ausgabe benötigen.

Da die API noch als instabil markiert ist, sollten Sie Ihre Bun-Version fixieren und die Rendering-Ausgabe gegen Ihr erwartetes HTML testen, bevor Sie in Produktion gehen.

FAQs

Gain Debugging Superpowers

Unleash the power of session replay to reproduce bugs, track slowdowns and uncover frustrations in your app. Get complete visibility into your frontend with OpenReplay — the most advanced open-source session replay tool for developers. Check our GitHub repo and join the thousands of developers in our community.