Pré-visualização Markdown

O que esta ferramenta faz

Um editor Markdown com pré-visualização HTML em direto. Escreves CommonMark à esquerda, vês a saída renderizada à direita. O renderizador suporta os elementos block e inline padrão mais tabelas e strikethrough do GitHub. O HTML de saída é sanitizado — HTML em bruto na fonte é escapado, e URLs javascript:/data: são descartadas antes de chegarem à página.

Quando usar

• Esboçar um README antes de o publicar no GitHub.
• Pré-visualizar uma descrição de issue ou PR sem sair do navegador.
• Colar Markdown de algum lado e confirmar que renderiza como esperas.
• Produzir HTML limpo para colar num CMS que não fala Markdown.

Como funciona

O renderizador é escrito à mão, ~340 linhas, sem dependência de Markdown ou sanitizador de terceiros. O parsing de blocos lida com cabeçalhos ATX, parágrafos, código fenced e indented, listas (ordenadas e não ordenadas), blockquotes, regras horizontais e tabelas pipe GFM. O parsing inline cobre ênfase, strong, code spans, strikethrough, links, imagens, autolinks e quebras de linha duras.

A segurança é aplicada em duas camadas. Primeiro, cada run de texto passa por escape de entidades HTML antes de chegar ao buffer de saída — por isso um literal <script> na fonte torna-se <script>, nunca uma tag em execução. Segundo, cada URL num link ou imagem corre por uma allow-list (http(s), mailto, tel, âncora, caminho relativo) — qualquer outra é descartada. Isto apanha javascript:, data:, vbscript:, esquemas com maiúsculas e minúsculas misturadas (JaVaScRiPt:) e splicing de caracteres de controlo (java\tscript:).

Diagramas Mermaid

Blocos fenced marcados como mermaid são passados à biblioteca Mermaid e renderizados como SVG ao vivo na pré-visualização. A biblioteca é importada dinamicamente na primeira vez que um diagrama aparece — quem não escreve um gráfico nunca a descarrega. O Mermaid corre com securityLevel: "strict" — sem JavaScript inline, sem HTML em <foreignObject>, sem fetches externos de imagens.

Tipos totalmente suportados: flowchart, sequence, class, state, ER, journey, gitGraph, timeline, mindmap, gantt, pie. As variantes architecture-beta e icon-pack renderizam a geometria e o layout mas perdem os ícones (os icon-packs vêm de CDNs por defeito — incompatível com a postura de privacidade desta ferramenta, que nunca faz chamadas de rede durante render ou export).

Exportação para PDF

O botão Exportar PDF produz um PDF real para descarregar — não um atalho para a caixa de impressão — através de:

1. Clonar o DOM da pré-visualização em direto (com os SVG do Mermaid já renderizados).
2. Rasterizar cada <svg> para um <img> PNG plano.
3. Paginação consciente dos elementos — inserem-se espaçadores para que parágrafos, tabelas e diagramas não sejam cortados a meio por uma quebra de página.
4. html2canvas-pro captura o palco fora do ecrã; pdf-lib monta o PDF.
5. O download do navegador é acionado.

Sem upload, sem window.open, sem caixa de impressão. Todo o pipeline corre apenas no navegador e é importado dinamicamente no primeiro export.

Notas

Porque é que não há syntax highlighting nos blocos de código? Um destacador a sério (Prism, highlight.js, Shiki) são 50–500 KB enviados a cada página. Deixámo-lo de fora para manter o bundle pequeno. A tag de linguagem ainda se torna um nome de classe (language-js), por isso podes acrescentar destaque por cima do HTML copiado se precisares.

Renderiza imagens? Sim, mas só com URLs sanitizadas. Caminhos de ficheiro local (./image.png) são permitidos; URIs de imagem data: não.

Quão próximo do CommonMark é? Próximo nos 90% comuns. Casos limite — definições de referência de link, cabeçalhos setext, listas aninhadas com linhas em branco — podem diferir da especificação completa.

Ferramentas relacionadas

• Escape de HTML e CSS em Base64 — quando precisas de embeber HTML em JSON
• Comparador — compara dois rascunhos de Markdown