Editor de Markdown online com visualização ao vivo
Escreva em Markdown de um lado e veja o resultado formatado do outro. Formate com a barra de ferramentas ou com atalhos e depois copie, baixe ou imprima. Seu texto fica no seu navegador
A visualização aparece aqui enquanto você digita
Este arquivo tem mais de 2 MB, o que é demais para o editor funcionar sem travar. Divida-o em arquivos menores.
Contado na hora no seu navegador, com tempo de leitura de 200 palavras por minuto. Nada é salvo, então baixe seu arquivo antes de fechar a aba.
Como usar esta ferramenta
- Escolha um layout: Editar, Dividido (código e visualização lado a lado) ou Visualizar. O modo foco esconde distrações.
- Digite ou cole Markdown, ou use a barra e os atalhos (Ctrl+B para negrito, Ctrl+I para itálico, Ctrl+K para um link).
- Ative Quebras de linha como
<br>se quiser manter cada quebra, como nos comentários do GitHub. - Copie, baixe ou imprima o resultado. Seu texto fica no navegador.
Exemplo prático
Uma linha que começa com ## vira um título de nível 2, e - [ ] ou - [x] inicia uma lista de tarefas. Uma tabela precisa de uma linha de cabeçalho, uma linha separadora de traços e depois as linhas de dados. O tempo de leitura usa 200 palavras por minuto e arredonda para cima: um texto de 600 palavras leva 3 minutos e um de 601 leva 4. HTML bruto nunca é inserido: digitar <b>hi</b> mostra as tags como texto, e os links se limitam a http, https, mailto e tel. O renderizador cobre o CommonMark do dia a dia e as tabelas, listas de tarefas e tachado do GitHub, mas não notas de rodapé, fórmulas nem diagramas.
Metodologia
O Markdown foi criado por John Gruber em 2004 como um atalho em texto simples para o HTML. Este editor implementa os elementos de uso diário da especificação CommonMark, além das extensões do GitHub Flavored Markdown (GFM) para tabelas, listas de tarefas, tachado e links automáticos. É um renderizador feito sob medida e sem dependências, não uma cópia completa de nenhuma das duas especificações, então casos raros como notas de rodapé, fórmulas e diagramas Mermaid não são renderizados.
O que você digita e o que a visualização mostra
Saídas reais do renderizador deste editor para algumas entradas do dia a dia.
| Você digita | A prévia mostra | Observação |
|---|---|---|
| ## Title | Título de nível 2 | h2 |
| - [x] done | Caixa marcada | As caixas são somente leitura na prévia |
| ~~old~~ | Texto riscado | del |
| line 1⏎line 2 | Um único parágrafo, sem quebra | Coloque dois espaços no fim da linha ou ative a opção de quebras de linha |
| <b>hi</b> | Texto literal <b>hi</b> | HTML bruto é escapado, nunca executado |
| [x](javascript:…) | Texto "x", sem link | Só http, https, mailto e tel viram link |
| [x](https://…) | Link que abre em nova aba | Marcado como nofollow |
| Term[^1] / $x^2$ | Mostrado sem alteração | Notas de rodapé e fórmulas não são renderizadas |
Leia a coluna Observação como os limites do editor: se uma linha surpreender você, quase sempre é por um deles, e não por erro de digitação. Confira o que a tabela marca como não renderizado na ferramenta onde o texto será publicado.
Perguntas frequentes
O texto que escrevo aqui é enviado ou salvo em algum lugar? ▼
O texto não é enviado a um servidor nem armazenado, nem mesmo no armazenamento local (a página só lembra seu tema e sua escolha sobre cookies). A análise e a renderização acontecem no seu navegador, por isso atualizar a página ou fechar a aba apaga o seu texto: use “Baixar .md” para guardá-lo. A página pede confirmação antes de você sair com texto não salvo. Uma exceção: se o seu Markdown aponta para uma imagem por endereço web, o navegador a solicita ao servidor dela para exibi-la, e esse servidor pode ver o seu endereço IP. Texto simples e imagens em base64 não fazem requisições.
Por que meu HTML bruto, como uma tag div ou script, não aparece renderizado na visualização? ▼
Por segurança, o HTML digitado no editor é mostrado como texto em vez de ser executado. O GitHub também filtra bastante o HTML bruto, então depender dele é frágil. Use a sintaxe do Markdown para formatar, ou copie o HTML gerado e adicione sua própria marcação no seu site.
Por que apertar Enter uma vez não cria uma nova linha na visualização? ▼
No Markdown, uma única quebra de linha dentro de um parágrafo é tratada como um espaço, então linhas seguidas viram um só parágrafo. Deixe uma linha em branco para começar outro parágrafo, termine a linha com dois espaços ou uma barra invertida para forçar uma quebra, ou marque a opção de quebras de linha acima do editor para manter todas.
Como colo meu Markdown com formatação no Word, no Google Docs ou em um e-mail? ▼
Use o botão “Texto formatado” em “Copiar” e cole no seu documento. Títulos, negrito, listas e tabelas chegam como formatação de verdade em vez de símbolos de Markdown. Use o botão HTML se precisar da marcação bruta para um site ou um CMS.
Como salvo o resultado em PDF? ▼
Clique em “Imprimir / PDF” e escolha “Salvar como PDF” como destino na janela de impressão do navegador. Só a visualização renderizada é impressa, sem a barra de ferramentas nem o resto da página, em preto sobre branco mesmo com o modo escuro ligado.