MyDevTools
PT

Visualizador Markdown

Escreva Markdown com pré-visualização HTML ao vivo lado a lado: tabelas GFM, listas de tarefas e tachado. Copie HTML sanitizado ou baixe um arquivo .html.

Os dados inseridos e arquivos ficam no navegador

Escreva ou cole Markdown aqui, ou carregue um exemplo.

Pré-visualização

A pré-visualização aparece aqui enquanto você digita.

Nesta página

Digite Markdown de um lado e veja o resultado renderizado do outro enquanto escreve — prático para rascunhar READMEs, comentários de issues, documentação e notas de versão e depois exportá-los como HTML.

Funcionalidade detalhada

A renderização usa a biblioteca marked com GitHub Flavored Markdown: tabelas, listas de tarefas - [x], tachado ~~text~~, blocos de código cercados e links automáticos para URLs soltas. Uma única quebra de linha vira <br>, como nos comentários do GitHub, então as linhas não se juntam em um só parágrafo. Blocos de código aparecem em fonte monoespaçada, sem coloração de sintaxe.

O HTML bruto dentro do Markdown é sanitizado: scripts, iframes, formulários, estilos e atributos de evento como onclick são removidos e links javascript: são bloqueados, enquanto tags inofensivas como <kbd>, <details> ou <sub> são mantidas. Os links abrem em nova aba. Na pré-visualização, os títulos aparecem um nível abaixo para não competir com o título da página; Copiar HTML e Baixar HTML mantêm os <h1>–<h6> originais.

A barra de ferramentas insere sintaxe de negrito, itálico, título, link, imagem, código inline e lista no cursor, e Sincronizar Rolagem mantém os dois painéis na mesma posição relativa. Tudo roda no navegador e a ferramenta não salva seu texto — copie-o antes de fechar a página.

Exemplos práticos

Lista de tarefas: - [x] tests e - [ ] docs são exibidos como uma caixa marcada e outra desmarcada.

Quebras de linha: as duas linhas line one e line two ~~old~~ viram <p>line one<br>line two <del>old</del></p>.

Tabela: as linhas | A | B |, |---|---|, | 1 | 2 | viram uma tabela HTML com linha de cabeçalho.

HTML inseguro: <script>alert(1)</script><b onclick=x>hi</b> é exportado apenas como <b>hi</b>.

Como usar esta ferramenta

  1. Escreva em Markdown

    Digite no Editor Markdown. Um documento de exemplo aparece na primeira abertura; clique em Limpar para começar do zero.

  2. Formate com a barra de ferramentas

    Selecione um texto e use os botões de Formatação (negrito, itálico, título, link, imagem, código, lista) para inserir a sintaxe.

  3. Confira a pré-visualização

    O painel Pré-visualização se atualiza a cada tecla; ative Sincronizar Rolagem para rolar os dois painéis juntos.

  4. Exporte

    Use Copiar HTML ou Copiar Markdown, ou Baixar HTML para salvar markdown-preview.html com estilos básicos.

Dicas e melhores práticas

  • Caminhos relativos de imagem como img/logo.png não podem ser resolvidos aqui; use URLs https:// completas para ver as imagens.
  • Imagens de outros sites são carregadas pelo seu navegador diretamente desses servidores.
  • Recursos exclusivos do GitHub — @mentions, atalhos de emoji como :smile:, diagramas Mermaid e fórmulas matemáticas — aparecem como texto simples.
  • HTML inline como <kbd>Ctrl</kbd> ou <details> funciona, mas os atributos style e class são removidos.
  • O arquivo baixado é uma página independente com estilos claros, pronta para imprimir ou anexar.