Como Usar Markdown em Qualquer Framework Um Utilitário Que Resolve o Problema de Indentação

O Problema da Indentação no Markdown

Se você já tentou escrever markdown dentro de um componente ou template literal, provavelmente esbarrou no clássico problema de espaços em branco. A maioria dos parsers de markdown trata indentação além de quatro espaços como bloco de código. Então, quando você escreve:

Este é um parágrafo
    Este é um segundo parágrafo

O resultado é <p>Este é um parágrafo</p><pre><code>Este é um segundo parágrafo</code></pre> em vez de dois parágrafos limpos.

Isso te obriga a remover toda a indentação, tornando o código difícil de ler e manter. Mas existe uma solução melhor.

A Solução: Um Utilitário de Markdown Personalizado

Criei um utilitário que resolve isso normalizando os espaços em branco antes do parsing. Ele detecta a indentação base e a remove, para que você possa escrever markdown naturalmente indentado sem quebrar a saída.

Aqui está a lógica central:

import { unified } from 'unified'
import remarkParse from 'remark-parse'
import remarkRehype from 'remark-rehype'
import rehypeStringify from 'rehype-stringify'

export function markdown(content, { inline = false } = {}) {
  // Remove a indentação base do conteúdo
  const lines = content.split('\n')
  const baseIndent = getBaseIndent(lines)
  const normalized = lines.map(line => line.slice(baseIndent)).join('\n')

  const processor = unified()
    .use(remarkParse)
    .use(remarkRehype)
    .use(rehypeStringify)

  if (inline) {
    // Envolve em uma divisão para parse apenas elementos inline
    const html = processor.processSync(normalized).toString()
    return html.replace(/^<p>|<\/p>$/g, '')
  }

  return processor.processSync(normalized).toString()
}

function getBaseIndent(lines) {
  const nonEmpty = lines.filter(l => l.trim())
  const indents = nonEmpty.map(l => l.match(/^\s*/)[0].length)
  return Math.min(...indents)
}

Pontos-chave:

• O utilitário calcula a indentação mínima entre todas as linhas não vazias e a remove.
• Para conteúdo inline, remove as tags <p> que envolvem o texto.
• Funciona com qualquer parser de markdown; você pode trocar remark por marked ou markdown-it.

Usando o Utilitário no Astro

Veja como integrar isso em um componente Astro:

---
import { markdown } from '@splendidlabz/utils'

const { inline = false, content } = Astro.props
const slotContent = await Astro.slots.render('default')

// Processa o conteúdo
const html = markdown(content || slotContent, { inline })
---

<div set:html={html} />

Depois é só usar assim:

<Markdown>
  Este é um parágrafo
  Este é um segundo parágrafo
</Markdown>

Usando o Utilitário no Svelte

O Svelte não lê conteúdo dinâmico de slots, então passamos o conteúdo via prop:

<script>
  import { markdown } from '@splendidlabz/utils'
  export let content = ''
  const html = markdown(content)
</script>

{@html html}

Uso:

<Markdown content={`
  Este é um parágrafo
  Este é um segundo parágrafo
`} />

Para React e Vue

Você pode facilmente adaptar o mesmo padrão. No React, use dangerouslySetInnerHTML; no Vue, use v-html.

Limitações e Cuidados

Embora este utilitário resolva o problema de indentação, ele não é um renderizador de markdown completo. Não suporta syntax highlighting ou componentes personalizados. Para isso, você pode precisar de uma solução mais robusta como react-markdown ou plugins do remark.

Além disso, note que este utilitário é síncrono. Para documentos muito grandes, você pode querer usar a API assíncrona para evitar bloquear a thread principal.

Próximos Passos

Se você está construindo um site com muito conteúdo, considere estender este utilitário com:

• Syntax highlighting para blocos de código
• Geração de tabela de conteúdos
• Manipulação de links personalizados

Para mais dicas sobre como melhorar sua experiência de desenvolvimento, confira meus outros posts sobre Claude Opus 4.6 no Azure e NVIDIA IGX Thor. Este último é um ótimo exemplo de como plataformas de IA de borda estão avançando o processamento em tempo real.

Conclusão

O Markdown não precisa ser um problema para integrar no seu framework favorito. Com este utilitário, você pode escrever markdown limpo, indentado e obter o HTML correto toda vez. É leve, agnóstico de framework e fácil de estender.

Experimente no seu próximo projeto e diga adeus às dores de cabeça com espaços. Para mais dicas e utilitários, visite meu blog. Bora codar!