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. O que aparece na visualização
  2. Código com destaque de sintaxe
  3. Tabelas e listas de tarefas
  4. Diagramas Mermaid
  5. Estrutura ajuda a ler melhor

O que aparece na visualização

Markdown é texto simples com marcas que indicam estrutura. Ao abrir um arquivo no Sanctuary Reader, essas marcas viram uma leitura formatada: títulos, listas, links, citações, tabelas, blocos de código e tarefas aparecem como elementos visuais do documento.

Isso permite conferir o resultado sem precisar imaginar como cada trecho será exibido em outra ferramenta.

Código com destaque de sintaxe

Blocos de código delimitados por três crases são renderizados em uma área própria. Quando você informa a linguagem, o Reader aplica destaque de sintaxe para tornar exemplos mais fáceis de percorrer.

```js
const mensagem = 'Olá, Markdown';
```

Esse recurso é útil para documentação técnica, tutoriais e anotações que misturam texto e exemplos de programação.

Tabelas e listas de tarefas

Tabelas Markdown são exibidas como tabelas de leitura, e listas de tarefas aparecem como checklists. Use esses elementos quando precisar comparar informações ou acompanhar etapas de um processo.

| Recurso | Status |
| --- | --- |
| Índice | pronto |
| Revisão | pendente |

- [x] Abrir o arquivo
- [ ] Revisar a conclusão

Diagramas Mermaid

O Reader também renderiza diagramas Mermaid escritos dentro de um bloco de código marcado como mermaid. Assim, um fluxo, uma sequência ou uma relação entre componentes pode permanecer no próprio arquivo Markdown. Para ver isso funcionando com um documento de exemplo, use o visualizador de Markdown com Mermaid.

```mermaid
flowchart LR
  A[Arquivo .md] --> B[Leitura formatada]
```

Para aprender a escrever esses diagramas, veja o artigo sobre Mermaid em Markdown.

Estrutura ajuda a ler melhor

Títulos bem definidos não servem apenas para aparência. Eles também permitem criar índice automático e progresso e dão suporte aos modos de leitura do Sanctuary Reader. Antes de abrir um documento longo, vale conferir se os assuntos principais usam ## e as subdivisões usam ###.