Markdown

Componente para renderizar conteúdo markdown com componentes customizados e estilos consistentes.

Título Principal

Subtítulo

Título Menor
Este é um texto em negrito e este é um texto em itálico.
  • Item da lista 1
  • Item da lista 2
  • Item da lista 3
  1. Item numerado 1
  2. Item numerado 2
  3. Item numerado 3
Aqui está um código inline e um link.

Utilização

index.tsx
import { Markdown } from "@convertcompany/ui/markdown";

Exemplos

Títulos

O componente Markdown suporta diferentes níveis de títulos usando #, ##, ###, etc.

Título H1

Título H2

Título H3

Título H4

Título H5
Título H6

Listas

Suporte para listas ordenadas e não ordenadas.

Lista não ordenada:
  • Item 1
  • Item 2
  • Item 3
Lista ordenada:
  1. Primeiro item
  2. Segundo item
  3. Terceiro item

Links são renderizados com o componente Link customizado.

Aqui está um link simples. Você também pode usar links com texto descritivo: Visite nossa documentação para mais informações.

Conteúdo misto

Exemplo de conteúdo markdown com diferentes elementos combinados.

Documentação do Projeto

Introdução

Este é um exemplo de documentação usando o componente Markdown.
Funcionalidades
  • Renderização de markdown com componentes customizados
  • Suporte a links e código inline
  • Listas ordenadas e não ordenadas
  • Diferentes níveis de títulos
Para mais informações, visite nossa documentação completa.

Props

PropriedadeTipo
childrenO conteúdo markdown a ser renderizado.
string
idID único para o componente (opcional, será gerado automaticamente se não fornecido).
string
classNameClasse CSS adicional para customização do container.
string
componentsObjeto com componentes customizados para sobrescrever a renderização padrão dos elementos markdown.
Partial<Components>

Componentes Padrão

O componente Markdown usa os seguintes componentes padrão para renderizar elementos markdown:

  • h1, h2, h3: Componentes Title com tamanhos apropriados
  • p: Elemento span para parágrafos
  • strong: Elemento strong para texto em negrito
  • u: Elemento u para texto sublinhado
  • a: Componente Link com variante "arrow" e target="_blank"
  • code: Componente InlineCode para código inline
  • ol, ul: Listas ordenadas e não ordenadas com estilos apropriados
  • li: Itens de lista
  • pre: Container para blocos de código (renderiza apenas os children)

Performance

O componente Markdown é otimizado para performance:

  • Memoização: O componente principal e os blocos individuais são memoizados
  • Parsing eficiente: Usa a biblioteca marked para parsing do markdown
  • Renderização por blocos: Divide o conteúdo em blocos para renderização mais eficiente
  • Re-renderização controlada: Só re-renderiza quando o conteúdo muda