Pré-visualização de Markdown e conversão para HTML

Escreva ou cole Markdown e a pré-visualização muda enquanto você digita. Copie o HTML ou baixe como arquivo.

Pré-visualização

A pré-visualização aparece aqui.

Roda inteiramente no seu navegador. Nada do que você digita é enviado ou armazenado.

Como usar

  1. Digite ou cole Markdown na caixa da esquerda.
  2. Confira o resultado à direita; ele atualiza enquanto você digita.
  3. Clique em “Copiar HTML” ou “Baixar HTML” para levar o HTML.

Markdown é o formato de texto simples usado em arquivos README, issues do GitHub, wikis, apps de notas e muitos blogs. Aqui você confere como um documento vai ficar antes de publicá-lo, ou converte Markdown em HTML para colar em um CMS ou modelo de e-mail. A pré-visualização atualiza assim que você para de digitar.

A renderização usa markdown-it 12.3.2 com HTML, quebras de linha e links automáticos ativados, além do plugin markdown-it-emoji. Como as quebras de linha estão ativadas, um único Enter vira <br>; o CommonMark estrito e muitos sites juntariam essas linhas em um parágrafo, então o resultado pode ser diferente de onde você publicar. Blocos de código são coloridos pelo highlight.js 11.4.0, que traz 34 linguagens comuns; as demais aparecem sem cor.

Tudo passa pelo DOMPurify 3.2.6 antes de ser exibido ou copiado, então scripts e atributos de evento no HTML colado são removidos. O download é um fragmento HTML sem estilos, pronto para entrar em uma página que já tem CSS próprio. A conversão acontece no navegador e o texto não é enviado, mas imagens indicadas por URL são carregadas dos servidores delas, como em qualquer página da web.

Perguntas frequentes

Qual sintaxe de Markdown é suportada?

CommonMark com markdown-it, além de tabelas, tachado (~~texto~~), códigos de emoji como :smile: e links automáticos para URLs. Uma quebra de linha simples vira <br>.

Posso usar HTML dentro do Markdown?

Sim. HTML é permitido, mas o resultado é limpo com DOMPurify: tags <script>, atributos de evento on… e links javascript: são removidos, então nada do texto é executado.

O código é destacado?

Sim. Blocos de código cercados são coloridos com highlight.js. Informe a linguagem após as crases (```js) ou deixe a detecção automática.

Ferramentas relacionadas