← Guias

Guia Sanctuary

Renderizar Markdown com Mermaid, tabelas e código no navegador

Veja como o Sanctuary Reader renderiza Markdown com destaque de sintaxe, tabelas e diagramas Mermaid diretamente no navegador, sem plugins ou instalação.

Atualizado
renderizacaomarkdownmermaidsyntax-highlightingtabelas
Neste guia
  1. Como o Markdown é renderizado
  2. Para que serve
  3. Como funciona na experiência
  4. Benefícios
  5. Evidências no código
  6. O que esse recurso revela sobre o produto
  7. Limitações e comportamento implícito
  8. Papel do recurso no produto

Como o Markdown é renderizado

A renderização transforma texto Markdown bruto em uma experiência de leitura visual completa. O Sanctuary não apenas “mostra HTML”; ele adiciona semântica de navegação, realce de código e tratamento especial para diagramas Mermaid.

Para que serve

O objetivo é tornar documentos estruturados mais legíveis e mais úteis para estudo. Isso é especialmente importante quando o material contém exemplos de código, headings profundos ou diagramas.

Como funciona na experiência

  1. O texto carregado entra em loadMd.
  2. O app identifica headings para preparar TOC e métricas.
  3. O Markdown é renderizado com marked.
  4. Blocos de código recebem destaque automático com highlight.js.
  5. Blocos mermaid viram diagramas renderizados em SVG.
  6. Depois disso, o documento passa a servir de base para TOC, foco, leitura guiada, apresentação e editor.

Benefícios

  • leitura mais confortável de documentação técnica;
  • melhor compreensão de blocos de código;
  • suporte nativo a diagramas, importante para material de arquitetura, processo e fluxo;
  • base consistente para todos os recursos de navegação e modos de leitura.

Evidências no código

  • src/layouts/AppLayout.astro carrega marked, highlight.js e mermaid a partir de /vendor/, auto-hospedados no próprio domínio.
  • src/scripts/reader/reader-core.js prepara o documento, extrai headings e renderiza o Markdown no Reader.
  • src/scripts/sanitize-html.js sanitiza o HTML gerado antes da montagem final no Reader e no editor.

O que esse recurso revela sobre o produto

O Sanctuary foi pensado para documentos mais ricos que texto puro. Diagramas com zoom e fullscreen mostram que conteúdo visual faz parte do caso de uso principal, não é um extra superficial.

Também fica claro que a leitura depende de estrutura Markdown bem formada. Headings, blocos e seções são a matéria-prima das demais experiências do produto.

Limitações e comportamento implícito

  • as bibliotecas de renderização são auto-hospedadas no próprio domínio, reduzindo dependência de CDNs externas durante o uso;
  • a renderização aceita Markdown rico, mas escapa HTML cru e bloqueia links e imagens com protocolos inseguros;
  • Mermaid roda com securityLevel: 'strict', reduzindo a superfície para diagramas maliciosos;
  • headings sem boa estrutura reduzem a qualidade da navegação e dos slides;
  • a renderização final depende de JavaScript habilitado no navegador.

Papel do recurso no produto

A renderização enriquecida é o núcleo técnico do Sanctuary. Sem ela, não existiriam TOC útil, leitura guiada coerente, apresentação por seção, análise por parágrafo nem edição com preview confiável.

Recursos relacionados

ArtigoMermaid em Markdown onlineCrie e visualize diagramas Mermaid no navegador.ArtigoEditor Markdown com previewEdite e valide a renderização do Markdown em tempo real.Caso de usoRevisar documentação técnicaLeia documentação técnica com código, tabelas e diagramas renderizados.