Analisando Markdown Nativamente com Bun

Se você já precisou conectar unified, remark-parse, remark-rehype e rehype-stringify apenas para converter uma string Markdown em HTML, você conhece a sobrecarga envolvida. O Bun 1.3.8 (lançado em janeiro de 2026) inclui um parser de Markdown integrado que substitui toda essa cadeia com uma única chamada de API — sem instalações, sem imports, sem configuração de plugins necessária.

Veja o que a nova API Bun.markdown faz, como funciona e onde se encaixa no seu fluxo de trabalho.

O Que É o Parser de Markdown do Bun?

Bun.markdown é um parser de Markdown nativo integrado diretamente ao runtime Bun. Ele segue a especificação CommonMark e é implementado como um port em Zig da biblioteca C md4c — um parser usado em ambientes sensíveis a performance como Qt.

Por ser executado como código Zig compilado em vez de JavaScript, ele evita a sobrecarga de pipelines de análise baseados em JavaScript como unified e remark. Em vez de encadear múltiplos pacotes, o Bun expõe uma única API de runtime para processamento de Markdown.

Nota: A API Bun.markdown está atualmente marcada como instável na documentação oficial do Bun. A interface funciona hoje, mas opções específicas e assinaturas de métodos podem mudar em versões futuras do Bun. Consulte as notas de lançamento do Bun antes de atualizar em produção.

Bun Markdown para HTML: O Método html()

O caso de uso mais simples — converter Markdown para uma string HTML — não requer configuração:

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

Passe opções como segundo argumento. A opção headings é útil para sites de documentação e geração de índice:

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

Extensões do GitHub Flavored Markdown (GFM) são habilitadas por padrão, incluindo tabelas, tachado (~~text~~), listas de tarefas (- [x] done) e autolinks permissivos. Opções adicionais como wikiLinks, latexMath e autolinking de cabeçalhos também são suportadas.

Renderização Personalizada com Bun.markdown.render()

Quando você precisa de uma saída que não seja HTML padrão — marcação estilizada, saída ANSI para terminal ou texto simples — render() aceita callbacks JavaScript para cada tipo de elemento:

// Adicionar classes CSS aos elementos
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>`,
})

// Remover toda formatação para texto simples
const plain = Bun.markdown.render("# Title\n\n**bold** text", {
  heading: (children) => children + "\n",
  strong: (children) => children,
  paragraph: (children) => children + "\n",
})

// Retornar null para omitir elementos específicos completamente
const noImages = Bun.markdown.render("# Title\n\n![logo](img.png)", {
  image: () => null,
  heading: (children) => `<h1>${children}</h1>`,
})

Isso torna render() útil para ferramentas CLI, geração de emails ou qualquer pipeline onde HTML não seja o formato de destino.

Renderização React de Markdown do Bun com react()

Bun.markdown.react() retorna elementos React que podem ser usados diretamente em uma árvore de componentes:

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

// Mapear elementos Markdown para componentes personalizados
const element = Bun.markdown.react("# Hello", {
  h1: ({ children }) => <h1 className="page-title">{children}</h1>,
})

// Funciona com renderização do lado do servidor
import { renderToString } from "react-dom/server"
const html = renderToString(Bun.markdown.react("# Hello **world**"))

Se você estiver usando React 18 ou anterior, pode passar uma opção de compatibilidade:

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

Quando Usar Bun.markdown vs. Remark

Conclusão

Se você já está executando Bun 1.3.8 ou posterior, Bun.markdown está disponível globalmente — nenhuma instalação necessária. Comece com Bun.markdown.html() para pipelines de conteúdo diretos, e use render() ou react() quando precisar de mais controle sobre a saída.

Dado que a API ainda está marcada como instável, fixe sua versão do Bun e teste a saída de renderização contra o HTML esperado antes de implantar em produção.

Perguntas Frequentes

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.