Pré-visualização de Markdown
Funciona inteiramente no seu navegador. Seus arquivos e dados nunca saem do seu dispositivo.
Markdown preview
A live preview with support for emphasis, lists, tables, and code.
- First item
- Second item
- Third item
| Feature | Supported |
|---|---|
| Tables | Yes |
| Code fences | Yes |
console.log("Hello, Markdown!");
Sobre esta ferramenta
Digite ou cole Markdown do lado esquerdo e veja o HTML renderizado do lado direito, atualizado a cada tecla. Títulos, negrito e itálico, listas, tabelas, citações e blocos de código com cercas aparecem na hora, incluindo extras do GitHub Flavored Markdown como tabelas e tachado.
Como funciona a pré-visualização ao vivo?
A análise roda com a biblioteca marked e suporte a GFM ligado, o mesmo parser usado pelo conversor de Markdown para HTML deste site. Cada tecla reanalisa o texto inteiro e redesenha o painel de pré-visualização, então não existe um botão separado de “renderizar” nem atraso entre digitar um título e vê-lo aparecer do outro lado. Antes de o HTML tocar a página, ele passa por sanitização com DOMPurify, uma biblioteca feita justamente para remover marcação perigosa de HTML não confiável. Isso impede que um conteúdo colado dispare uma tag script ou um handler onerror pelo preview, o que importa porque o Markdown permite colocar HTML bruto direto no texto, e esse HTML bruto seria renderizado do jeito que veio.
O que eu digito é enviado a algum servidor?
Não. Análise, renderização e sanitização acontecem todas no seu navegador, com JavaScript embutido na página. Nenhum texto digitado sai da sua máquina, o que importa para rascunhos ainda não publicados, anotações com algo privado, ou um documento que você ainda não quer salvar em lugar nenhum. Como nada é enviado a um servidor, também não fica histórico para apagar depois: basta fechar a aba.
Para que serve isso?
Use para conferir como um README vai ficar antes de fazer o commit, pré-visualizar um comentário ou uma issue antes de postar no GitHub ou GitLab, ou revisar o alinhamento de colunas de uma tabela sem precisar mandar para uma plataforma que renderiza Markdown por você. Também é uma forma rápida de checar se um bloco de HTML bruto colado num arquivo Markdown, como um <iframe> embutido ou uma <div> estilizada, renderiza do jeito esperado, ou de ver se uma lista aninhada está indentada corretamente antes de publicar em qualquer lugar.
Veja a especificação do CommonMark para a sintaxe base, a especificação GFM do GitHub para as extensões de tabelas e tachado, e o projeto DOMPurify para entender melhor como funciona a etapa de sanitização.