← Guias

Guia Sanctuary

Feature: Renderização Enriquecida de Markdown

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

Atualizado
renderizacaomarkdowndiscoverysanctuary
Neste guia
  1. O que é
  2. Objetivo no produto
  3. Como funciona na experiência
  4. Valor entregue
  5. Evidências no código
  6. O que essa feature revela sobre o produto
  7. Limitações e comportamento implícito
  8. Papel da feature no produto

O que é

Esta feature 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.

Objetivo no produto

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.

Valor entregue

  • 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 todas as features 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 essa feature 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 da feature 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.