Visualizador de Markdown
Veja o seu Markdown renderizado enquanto digita, no seu navegador, com todo HTML bruto escapado em vez de executado.
Roda inteiramente no seu navegador. Nada é enviado, registrado ou armazenado.
O HTML que isto produz
Escreva Markdown à esquerda e leia à direita. Tudo acontece no seu navegador, então um rascunho que você ainda não quer mostrar a ninguém não precisa ser mostrado a um servidor primeiro.
Como funciona
O documento é lido linha a linha para dentro de blocos — títulos, parágrafos, listas, citações, código, tabelas — e depois o texto de cada bloco é lido em busca dos elementos inline: ênfase, trechos de código, links e imagens. O que o renderizador não reconhece continua sendo texto.
HTML bruto é escapado em vez de repassado. Se você escrever uma tag, você vê a tag. É um afastamento deliberado da maioria dos renderizadores, que permitem um subconjunto curado — e o motivo é que curar esse subconjunto corretamente é um trabalho que deu errado em projetos bem maiores, repetidas vezes.
Um link só é criado quando o endereço dele começa por um esquema de uma lista curta, verificada na forma decodificada do endereço, e não no que foi digitado. Quando é recusado, o texto fica e o link não, para que você veja que havia algo ali.
Exemplos
| Caso | Entrada | Resultado |
|---|---|---|
| Ênfase e código na linha | **bold**, *italic* and `code`. | <p><strong>bold</strong>, <em>italic</em> and <code>code</code>.</p> |
Perguntas frequentes
O meu documento é enviado para algum lugar?
Não. O renderizador é JavaScript rodando nesta página. Nada é enviado, nada é registrado e nada é armazenado — você pode desligar a sua conexão de rede e a ferramenta continua funcionando.
Por que o meu HTML aparece como texto?
Porque ele é escapado de propósito. O Markdown permite que um documento contenha HTML, e deixar esse HTML passar significa decidir quais tags e atributos são seguros — uma decisão sutil, que muda conforme os navegadores mudam, e que projetos bem financiados já erraram mais de uma vez. Escapar tudo não tem esse modo de falha. O custo é que um documento apoiado em HTML inline não vai ficar como fica no GitHub, e essa é a troca que está sendo feita.
Isto é exatamente CommonMark?
Não, e seria enganoso dizer que sim. É um subconjunto, mais tabelas, listas de tarefas e texto riscado do sabor do GitHub. Ele cobre títulos, parágrafos, ênfase, trechos e blocos de código, links, imagens, listas aninhadas, citações e réguas. Links por referência, notas de rodapé e blocos de HTML não estão implementados.
Por que imagens remotas não aparecem?
Porque esta página não se permite carregar imagens de outros sites. Buscar uma diria àquele servidor que você está lendo este documento, e a que horas, que é precisamente o vazamento que uma pré-visualização local existe para evitar. A tag da imagem está no HTML de saída, então ela funciona onde quer que você cole — só não dispara daqui.
O que acontece com um link como javascript:…?
Ele não vira link. O esquema é conferido contra uma lista curta — http, https, mailto, tel, ftp, ou esquema nenhum para um caminho relativo — e a conferência roda sobre o endereço decodificado, porque um navegador resolve as entidades de um atributo antes de agir sobre ele. O texto do link continua visível para que você veja o que havia ali.
Bom saber
- O HTML que a pré-visualização mostra é o HTML que a ferramenta entrega. Há uma saída só, não uma segura para exibir e outra diferente para copiar.
- Os títulos não recebem atributo id. Um id tirado do seu documento dividiria espaço de nomes com os desta página, e uma colisão quebraria a página em volta da pré-visualização.
- Links para outros sites levam rel="nofollow noopener noreferrer", então uma página aberta a partir daqui não ganha controle sobre esta.
Todas as ferramentas de Código