Como converter entre HTML e Markdown

Cole o HTML ou o Markdown no campo e pressione HTML para Markdown ou Markdown para HTML. O texto convertido aparece no painel de resultado abaixo dos botões, pronto para Copiar, e Limpar esvazia os dois painéis antes do próximo documento. A entrada é um único campo de texto e a saída também é texto: não há upload de arquivo nem modo em lote. A conversão roda no navegador: o texto não é enviado e a página continua funcionando quando a rede cai.

O Markdown gerado é GitHub Flavored Markdown (tabelas com barras, blocos de código com cercas, listas aninhadas) e o HTML devolvido é HTML simples, sem estilos. A conversão reescreve a marcação; ela não copia a página renderizada, então classes CSS, estilos inline e scripts não fazem parte do resultado.

  1. Cole o HTML ou o Markdown no campo no topo da página. Exemplo de Markdown preenche o campo com uma amostra curta se você quiser ver os dois sentidos antes de usar o seu próprio texto.
  2. Pressione HTML para Markdown para transformar marcação em Markdown, ou Markdown para HTML para o sentido oposto. Os dois botões leem o mesmo campo, então um documento pode ser convertido nos dois sentidos sem recarregar a página.
  3. Leia o painel de resultado abaixo dos botões: ele contém apenas o texto convertido, e Copiar coloca tudo na área de transferência.
  4. Pressione Limpar para esvaziar o campo e o resultado. Se você pressionar um botão de conversão com o campo vazio, a página mostra um aviso no próprio idioma em vez de apagar o resultado anterior.
  5. Guarde o texto original até conferir a saída: níveis de título, tabelas, blocos de código e listas são reescritos por regra, e o escape nem sempre é visível a olho nu.

O que o conversor reescreve, descarta e escapa

De HTML para Markdown

Títulos h1 a h6 viram # até ######, parágrafos são separados por uma linha em branco, <strong> e <b> viram **, <em> e <i> viram _, <del> vira ~~, e um link vira [texto](href) com o atributo title entre aspas. Uma imagem vira ![alt](src) com o seu title; uma imagem sem src mantém o texto alternativo em vez de interromper a conversão, e um link sem href mantém o texto. Um <br> é escrito como quebra de linha com dois espaços e um <hr> como * * *.

As listas mantêm o aninhamento e o marcador: os itens continuam com -, uma lista ordenada mantém os números e o atributo start, e um item com dois parágrafos é escrito como item solto em vez de ser achatado. Um bloco <pre><code> vira um bloco com cercas; a linguagem é lida de uma classe como language-js, lang-js ou brush: js, a cerca fica maior quando o próprio código contém crases, e um <code> inline vira um par de crases.

Comentários, <script>, <style>, <head>, <title>, <meta>, <noscript>, <iframe>, <svg> e controles de formulário como <input>, <select>, <textarea> e <button> são descartados junto com o conteúdo, porque não têm significado em Markdown. <div> e <span> vazios também desaparecem, o texto dentro de uma tag desconhecida ou não fechada é mantido, e a marcação malformada não lança mais o erro que deixava o painel de resultado vazio.

De Markdown para HTML

No sentido oposto a página renderiza títulos, parágrafos, ênfase, links, imagens, citações, linhas horizontais e listas aninhadas como HTML. Um bloco com cercas vira <pre><code> com a linguagem como classe, uma tabela GFM com barras vira uma <table> de verdade com o alinhamento aplicado, e um trecho de código inline vira <code>, de modo que uma amostra como <div> continua visível como texto em vez de desaparecer na página.

O HTML escrito dentro do Markdown passa intacto (a página não escapa nem remove um <div> ou um <script> que você mesmo escreveu) e links por referência ([texto][1] com [1]: url abaixo) são resolvidos. Uma lista com marcadores seguida de uma lista numerada continua sendo duas listas, em vez de virar uma só, então os números são preservados.

Tabelas, escape e limites práticos

Uma <table> vira uma tabela GFM com barras: a primeira linha é usada como cabeçalho (de <th>, ou de <td> quando a tabela não tem linha de cabeçalho), o alinhamento das colunas vem do atributo align ou de um estilo text-align, e uma barra dentro de uma célula é escapada com uma barra invertida. Um <br> dentro de uma célula é escrito como <br> para a linha continuar em uma só linha.

O texto que seria lido como Markdown é escapado na saída: * _ [ ] e crases recebem uma barra invertida, uma linha que começa com #, -, + ou um número e um ponto é escapada, e < vira &lt;. Entidades HTML são decodificadas, então &amp; chega como &, enquanto &nbsp; continua sendo um espaço duro. Os usos comuns são transformar um trecho de HTML em Markdown para um README ou uma pasta de documentação, e o contrário quando o Markdown precisa entrar em um CMS ou site estático. Tudo roda no seu dispositivo, então um documento muito grande é limitado pela memória do navegador e não por uma cota de upload; acima de 50.000 caracteres o painel de resultado mostra texto escapado sem cores de sintaxe.

Ferramentas recentes: