Analyse native du Markdown avec Bun

Si vous avez déjà assemblé unified, remark-parse, remark-rehype et rehype-stringify simplement pour convertir une chaîne Markdown en HTML, vous connaissez la complexité que cela implique. Bun 1.3.8 (publié en janvier 2026) intègre un analyseur Markdown natif qui remplace toute cette chaîne par un seul appel d’API — sans installation, sans imports, sans configuration de plugins.

Voici ce que fait la nouvelle API Bun.markdown, comment elle fonctionne et où elle s’intègre dans votre flux de travail.

Qu’est-ce que l’analyseur Markdown de Bun ?

Bun.markdown est un analyseur Markdown natif intégré directement dans le runtime Bun. Il suit la spécification CommonMark et est implémenté comme un portage en Zig de la bibliothèque C md4c — un analyseur utilisé dans des environnements sensibles aux performances tels que Qt.

Parce qu’il s’exécute en tant que code Zig compilé plutôt qu’en JavaScript, il évite la surcharge des pipelines d’analyse basés sur JavaScript comme unified et remark. Au lieu d’enchaîner plusieurs packages, Bun expose une API runtime unique pour le traitement du Markdown.

Remarque : L’API Bun.markdown est actuellement marquée comme instable dans la documentation officielle de Bun. L’interface fonctionne aujourd’hui, mais certaines options et signatures de méthodes peuvent changer dans les futures versions de Bun. Consultez les notes de version de Bun avant de mettre à jour en production.

Conversion Markdown vers HTML avec Bun : la méthode html()

Le cas d’usage le plus simple — convertir du Markdown en chaîne HTML — ne nécessite aucune configuration :

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

Passez des options comme second argument. L’option headings est utile pour les sites de documentation et la génération de tables des matières :

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

Les extensions GitHub Flavored Markdown (GFM) sont activées par défaut, incluant les tableaux, le texte barré (~~text~~), les listes de tâches (- [x] done) et les liens automatiques permissifs. Des options supplémentaires telles que wikiLinks, latexMath et la création automatique de liens pour les titres sont également prises en charge.

Rendu personnalisé avec Bun.markdown.render()

Lorsque vous avez besoin d’une sortie qui n’est pas du HTML standard — balisage stylisé, sortie ANSI pour terminal ou texte brut — render() accepte des callbacks JavaScript pour chaque type d’élément :

// Ajouter des classes CSS aux éléments
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>`,
})

// Supprimer tout formatage pour obtenir du texte brut
const plain = Bun.markdown.render("# Title\n\n**bold** text", {
  heading: (children) => children + "\n",
  strong: (children) => children,
  paragraph: (children) => children + "\n",
})

// Retourner null pour omettre complètement certains éléments
const noImages = Bun.markdown.render("# Title\n\n![logo](img.png)", {
  image: () => null,
  heading: (children) => `<h1>${children}</h1>`,
})

Cela rend render() utile pour les outils CLI, la génération d’emails ou tout pipeline où le HTML n’est pas le format cible.

Rendu React du Markdown avec Bun via react()

Bun.markdown.react() retourne des éléments React qui peuvent être utilisés directement dans un arbre de composants :

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

// Mapper les éléments Markdown vers des composants personnalisés
const element = Bun.markdown.react("# Hello", {
  h1: ({ children }) => <h1 className="page-title">{children}</h1>,
})

// Fonctionne avec le rendu côté serveur
import { renderToString } from "react-dom/server"
const html = renderToString(Bun.markdown.react("# Hello **world**"))

Si vous utilisez React 18 ou une version antérieure, vous pouvez passer une option de compatibilité :

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

Quand utiliser Bun.markdown plutôt que Remark

Conclusion

Si vous utilisez déjà Bun 1.3.8 ou une version ultérieure, Bun.markdown est disponible globalement — aucune installation nécessaire. Commencez avec Bun.markdown.html() pour des pipelines de contenu simples, et utilisez render() ou react() lorsque vous avez besoin de plus de contrôle sur la sortie.

Étant donné que l’API est encore marquée comme instable, épinglez votre version de Bun et testez la sortie de rendu par rapport à votre HTML attendu avant de déployer en production.

FAQ

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.