Pré-visualização de Markdown

O que é um renderizador de Markdown?#

Markdown é a abreviatura de texto simples que os programadores usam para escrever texto rico: **negrito**, # cabeçalhos, - listas, `código`. Um renderizador é o programa que transforma essas marcas abreviadas no HTML que um navegador efetivamente exibe. Ficheiros README, sites de documentação, comentários em issue-trackers, apps de chat e geradores de sites estáticos todos passam Markdown por um renderizador antes de lho mostrar.

Esta página é um renderizador de Markdown com uma prioridade de desenho específica: é seguro por construção, não por filtragem. A maioria dos renderizadores primeiro transforma Markdown em HTML e depois tenta limpar as tags perigosas do resultado — um modelo em que um regex esquecido significa uma vulnerabilidade de XSS. Esta ferramenta funciona ao contrário: cada caráter da fonte é HTML-escaped antes de qualquer formatação ser aplicada, e as únicas tags que emite alguma vez vêm de uma lista de permissão fixa e hardcoded (p, h1–h6, ul, ol, li, blockquote, pre, code, hr, a, img, strong, em, del, br). Não há caminho de código que possa emitir uma tag <script> da sua entrada, porque o < em bruto na fonte é escapado para < antes de o formatador alguma vez o ver. É o que o torna adequado para um site estático de CSP estrita como este.

Implementa um subconjunto focado de CommonMark mais essenciais do GitHub-Flavored Markdown: blocos de código vedados, cabeçalhos ATX, parágrafos, listas ordenadas e não ordenadas, blockquotes, quebras temáticas (---), código inline, negrito, itálico, rasurado, imagens, links e auto-links angulares. A mesma entrada dá-lhe duas saídas lado a lado — a pré-visualização renderizada e o HTML em bruto — para que se veja exatamente o que o renderizador produziu.

Como usar#

1. Escreva Markdown no painel esquerdo, ou clique em Exemplo para carregar um documento interno que exercita todas as funcionalidades suportadas.
2. Troque a saída com os dois botões por cima do painel direito:
   • Pré-visualização mostra o resultado formatado como apareceria numa página web.
   • HTML mostra o HTML exato que o renderizador emitiu, que é o que se colaria num template ou se entregaria a uma auditoria de sanitizer.
3. Clique em Copiar HTML para recolher o HTML gerado para uso noutro lado — colar num CMS, embutir num template, ou passar por uma revisão.
4. Clique em Limpar para esvaziar ambos os painéis.
5. A linha de estado reporta o comprimento em bytes renderizado ou nota quando a entrada está vazia.

Principais recursos#

• Seguro por construção. Todo o texto-fonte é HTML-escaped antes da formatação, e o renderizador emite apenas uma lista de permissão fixa de tags. Não há passo de “depois retirar as partes perigosas” para errar.
• Esquemas de URL perigosos descartados. URLs de links e imagens são verificados por esquema; javascript:, vbscript:, data:, file: e about: são bloqueados, e o texto ofensivo é mostrado literalmente em vez de se tornar um link ativo.
• Duas vistas, uma fonte. Alterne entre a pré-visualização renderizada e o HTML em bruto sem reescrever, para que se possa verificar tanto o resultado visual como o markup que produziu.
• Essenciais GFM incluídos. Rasurado (~~texto~~), blocos de código vedados com indicação de linguagem e listas amigáveis a tarefas comportam-se como o GitHub-Flavored Markdown.
• Zero dependências, 100% do lado do cliente. O renderizador é auto-implementado — sem biblioteca de análise embutida — e corre inteiramente no seu navegador. Nada é enviado, e não há backend para injetar nada.

Exemplo detalhado#

Clique em Exemplo e o painel esquerdo preenche-se com um documento que exercita a sintaxe central:

# Heading

A paragraph with **bold**, *italic*, ~~strike~~ and `inline code`.

- bullet one
- bullet two

1. first
2. second

> A blockquote.

[a link](https://example.com)

\`\`\`
const x = 42;
console.log(x);
\`\`\`

Mude para HTML e vê exatamente o que o renderizador emitiu. O parágrafo torna-se:

<p>A paragraph with <strong>bold</strong>, <em>italic</em>,
<del>strike</del> and <code>inline code</code>.</p>

O link torna-se um alvo rígido com rel/attributes seguros:

<a href="https://example.com" rel="noopener noreferrer" target="_blank">a link</a>

e o bloco vedado torna-se um <pre><code> escapado que preserva a fonte verbatim — const x = 42; aparece como texto, não como script executado. Esse último ponto é toda a história de segurança em miniatura: mesmo que colasse <script>alert(1)</script> na fonte, seria renderizado como o texto literal <script>alert(1)</script>, porque o < é escapado para < antes de o formatador alguma vez decidir o que é uma tag.

Perguntas frequentes#

Porque usaria isto em vez de escrever HTML diretamente?#

Porque Markdown é mais rápido de escrever, mais fácil de ler na forma de fonte, e deixa contribuidores não peritos em HTML criar conteúdo. Este renderizador é para quando se quer essa comodidade sem confiar que uma biblioteca de análise genérica seja também segura — a segurança aqui vem da arquitetura, não de um sanitizer aparafusado no fim.

Colei uma tag <script> e ela apareceu como texto. É um bug?#

Não — esse é o comportamento pretendido e a garantia central de segurança. Cada caráter da sua entrada é HTML-escaped antes da formatação, pelo que qualquer texto parecido com tags na fonte é renderizado como texto inerte visível. Não há forma por este renderizador de obter um <script> ativo na saída.

Porque é que o meu link javascript: foi mostrado como texto simples?#

O renderizador verifica o esquema de cada link e URL de imagem. Esquemas como javascript:, vbscript:, data:, file: e about: são bloqueados porque são os vetores clássicos para ataques de injeção. Quando um URL é bloqueado, o renderizador deixa a fonte Markdown original como texto literal em vez de emitir uma âncora perigosa.

Suporta tabelas, listas de tarefas ou notas de rodapé?#

Não — este é um subconjunto deliberado e focado de CommonMark mais essenciais GFM (código vedado, rasurado, auto-links). Tabelas e notas de rodapé precisam de um analisador mais rico e uma superfície de ataque maior para vigiar; estão propositadamente fora do âmbito aqui. Limite-se às construções suportadas listadas nas funcionalidades acima.