TK TaskKit
Ferramentas para programadores

Pré-visualização Markdown

Escreve Markdown, vê HTML. CommonMark mais tabelas e rasurado, com HTML cru escapado e links saneados.

Markdown
Pré-visualização
Escreve Markdown à esquerda para ver a pré-visualização renderizada.

As entradas ficam neste dispositivo. Cada ferramenta para programadores no TaskKit corre inteiramente no teu navegador. Tokens, payloads e texto colado não são transmitidos para servidores do TaskKit nem para terceiros.

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 &lt;script&gt;, 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:).

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