Guia · HTML → Markdown

HTML para Markdown

O HTML consegue expressar muito mais que o Markdown. Então essa conversão é sobretudo uma questão do que fazer com tudo que não tem equivalente.

Três respostas, dependendo da tag: mapear, tirar a tag e manter o texto, ou tirar as duas coisas. Qual delas se aplica é decidido por uma lista de permissão, e vale saber o que está nela.

Abrir o conversor

Uma lista de permissão, não de bloqueio

Só sobrevivem à primeira passada as tags que significam algo em Markdown: títulos, parágrafos, listas, links, imagens, ênfase, citações, código, tabelas e o punhado de tags em linha em volta delas. Todo o resto é apagado, mantendo o texto.

A razão de ser uma lista de permissão é que uma lista de bloqueio precisa prever cada tag perigosa, e o HTML continua ganhando tags novas. Uma entrada que falta é um buraco. Assim, a resposta padrão para qualquer coisa desconhecida é não.

Scripts, manipuladores de evento e links javascript: vão embora, e em script, style, iframe, object e embed o conteúdo também vai, não só a tag. Manter o texto de um <script> colaria o código dele no seu documento como prosa visível.

Os atributos entram em lista de permissão do mesmo jeito: só href, src, alt, title, colspan, rowspan e start. Então class, id e style nunca chegam à saída. E não é só segurança: o Markdown também não tem onde colocá-los.

Por que sanitizar importa mesmo que nada seja renderizado

Esta página nunca renderiza o seu HTML, então não há nada aqui que possa executar. O sanitizador existe pelo que vem depois.

Um link escrito como [click me](javascript:alert(1)) é copiado fielmente por qualquer conversor de Markdown, e vira um ataque funcional no momento em que alguém publica esse Markdown em um site que o renderiza. O risco não é nosso, ele é entregue a quem usar a saída.

Então as URLs são checadas contra uma lista de protocolos permitidos — http, https, mailto, ftp e caminhos relativos — e qualquer outra coisa é descartada. Quando algo é removido, a saída diz o que era, em vez de limpar a sua entrada nas suas costas.

Tabelas: manter ou achatar

Por padrão uma tabela vira uma tabela de barras do Markdown. Barras dentro das células são escapadas, espaço em branco dentro de uma célula é reduzido a espaços simples, e linhas curtas são preenchidas até a largura da linha mais larga para a tabela continuar retangular.

Achatar é a alternativa, e existe para as tabelas que nunca foram tabelas. Uma página montada com uma tabela para posicionar coisas vira uma tabela de barras cheia de células vazias; achatada, cada linha vira uma linha de texto com as células unidas por um ponto médio, e lê muito melhor.

Duas coisas não sobrevivem por nenhum dos caminhos. Um <caption> é descartado, porque uma tabela de barras não tem onde colocá-lo: copie-o como uma linha acima da tabela se precisar. E conteúdo de bloco dentro de uma célula colapsa: uma lista em uma célula sai com os itens colados, porque uma linha de tabela de barras tem que ser uma única linha.

HTML
<table><tr><th>Part</th><th>Qty</th></tr>
<tr><td>Bolt | M6</td><td>12</td></tr></table>
Markdown
| Part | Qty |
| --- | --- |
| Bolt \| M6 | 12 |

As tags que mantêm o HTML delas

Sobrescrito e subscrito ficam como <sup> e <sub>. O Markdown não tem sintaxe para eles, e x2 em vez de x² muda o que uma fórmula diz: HTML puro é válido em Markdown e essas duas tags qualquer renderizador dá conta.

O sublinhado não recebe esse tratamento. Ele não tem um significado a preservar: na web um sublinhado é um link, então mantê-lo seria francamente enganoso. Texto sublinhado sai como texto normal.

O riscado vira ~~, que é Markdown do GitHub e não a especificação original, mas hoje é universal o bastante para que remover fosse a opção mais estranha.

Listas, blocos de código e as configurações

Itens de lista são escritos como «- item», com um espaço só. Quase toda cadeia de ferramentas Markdown escreve assim, e a alternativa comum — três espaços depois do marcador — gera diffs barulhentos quando um arquivo é editado pelas duas.

Listas aninhadas são recuadas até a largura do marcador, e um parágrafo que continua dentro de um item de lista é recuado para alinhar com o texto de cima em vez de sair da lista. Um <ol> com atributo start mantém a numeração.

O caractere de marcador pode ser -, * ou +, e a cerca de código ``` ou ~~~. Escolha pelo lugar em que o arquivo vai ficar; não há diferença funcional. Os títulos também podem sair no estilo sublinhado, mas só os dois primeiros níveis têm um: do terceiro para baixo eles ficam com as marcas # de qualquer forma, e vale saber disso antes de escolher.

HTML
<ol><li><p>First para</p>
<p>Still item one</p></li></ol>
Markdown
1. First para

   Still item one

Duas entradas, um caminho

Você pode colar código HTML na caixa, ou soltar um arquivo .html. Os dois são tratados igual, porque para o código eles são a mesma coisa: uma string de HTML não confiável.

O teto de 25 MB é por entrada, o que é muito mais que o código de qualquer página. Nada é enviado: a análise, a sanitização e a conversão acontecem todas na aba.

Se o resultado voltar vazio, a saída diz. Normalmente significa que a entrada era só marcação e nenhum texto: o <head> de uma página, ou um trecho que era só estilos.

Cole o código ou solte o arquivo, escolha se as tabelas continuam tabelas e copie o Markdown. Tudo roda no seu navegador.

HTML → MD