Visualizando em Português Ver em inglês

Markdown para HTML

Cole Markdown à esquerda, veja o HTML renderizado (ou seu código-fonte) à direita. Roda ao vivo no seu navegador.

  1. Digite ou cole Markdown no painel à esquerda.
  2. A prévia à direita é atualizada conforme você digita.
  3. Mude Exibição para Fonte HTML para ver as tags em vez do resultado renderizado.
  4. Clique em Copiar HTML para colocar a fonte na área de transferência, ou Baixar .html para um arquivo autônomo.
O que ele faz?

Esta ferramenta converte Markdown em HTML usando CommonMark mais GitHub Flavored Markdown (GFM), com quebras dentro de parágrafo renderizadas como <br>. Você pode ver a prévia renderizada ou alternar para a visão Fonte HTML e inspecionar as tags geradas. O resultado pode ser colado em plataformas de blog, editores de e-mail ou qualquer lugar que aceite HTML.

Exemplo

Markdown de entrada:

# Release notes

We shipped **three** things this week:

- [x] Faster cold start
- [ ] Dark mode (next week)

See the [docs](https://example.com/docs) for details.

```js
console.log("hello");
```

Fonte HTML renderizada:

<h1>Release notes</h1>
<p>We shipped <strong>three</strong> things this week:</p>
<ul>
<li><input type="checkbox" checked disabled> Faster cold start</li>
<li><input type="checkbox" disabled> Dark mode (next week)</li>
</ul>
<p>See the <a href="https://example.com/docs">docs</a> for details.</p>
<pre><code class="language-js">console.log("hello");
</code></pre>

Erros comuns e armadilhas

A maioria das surpresas na renderização de Markdown vem de algumas poucas armadilhas de sintaxe. Se a prévia parece estranha, geralmente a causa é uma destas.

  • Falta linha em branco antes de uma lista. "Texto introdutório\n- item" é renderizado como um único parágrafo. Deixe uma linha em branco entre a introdução e o primeiro item da lista.
  • Bloco de código indentado quando você queria um parágrafo. Quatro espaços iniciais transformam qualquer linha em bloco de código. Remova a indentação ou use um bloco ``` explícito.
  • Tabela quebrada. Toda tabela GFM precisa de uma linha separadora (| --- | --- |) com ao menos três traços por coluna e o mesmo número de pipes em cada linha.
  • Link com espaços na URL. [clique](minha pagina.html) quebra o parser. Codifique o espaço como %20 ou use sinais de menor/maior: <minha pagina.html>.
  • Asteriscos dentro de palavras. wild*card pode ou não renderizar como ênfase, dependendo do contexto. Escape com uma barra invertida: wild\*card.
  • Escape de HTML dentro de blocos de código. Trechos colados com &lt; aparecem literalmente porque já estão escapados. Cole a fonte crua antes de escapar.
Perguntas frequentes

Qual variante de Markdown é suportada?

CommonMark mais GitHub Flavored Markdown (GFM). Isso cobre tabelas, blocos de código delimitados, listas de tarefas, tachado e URLs com link automático. Quebras dentro de parágrafos viram tags <br> porque a opção breaks está ligada — o mesmo comportamento dos comentários no GitHub e da maioria dos apps de chat.

O HTML dentro do meu Markdown é sanitizado?

Não. A prévia renderizada passa o HTML bruto por padrão, para que coisas como <details> e <kbd> continuem funcionando. Não cole Markdown não confiável e copie a saída para um site público sem antes rodar em um sanitizador como o DOMPurify.

Notas de rodapé, matemática ou diagramas são suportados?

Não. Isto é GFM puro. Notas de rodapé, matemática (KaTeX/MathJax) e diagramas Mermaid são extensões do GitHub ou de plataformas e não são renderizados aqui. Se precisar, use um renderizador de Markdown configurado com os plugins certos, ou cole a saída em uma plataforma que os renderize.

O que acontece quando clico em Copiar HTML?

A fonte HTML renderizada é escrita na sua área de transferência via Clipboard API. Você recebe o HTML sem o cromado da página — apenas as tags que representam seu Markdown. Cole em um CMS, editor de e-mail ou direto em um arquivo. Nenhum arquivo é criado em disco.

Por que minhas tabelas aparecem desalinhadas?

Tabelas GFM precisam de uma linha de cabeçalho, uma linha separadora com pelo menos três traços por coluna e pipes entre as células. Um pipe faltando ou uma separadora com apenas dois traços falha silenciosamente. Mude para a visão Fonte HTML para conferir se uma <table> foi realmente gerada.

Vocês salvam o Markdown que eu colo aqui?

Não. Não guardamos o Markdown que você digita ou cola, nem o HTML renderizado que você baixa. Tudo é descartado assim que você fecha ou atualiza a aba — sem logs, sem registro do que você escreveu. Pode conferir nas ferramentas de desenvolvedor do seu navegador.