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.
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.
<table><tr><th>Part</th><th>Qty</th></tr>
<tr><td>Bolt | M6</td><td>12</td></tr></table>| 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.
<ol><li><p>First para</p>
<p>Still item one</p></li></ol>1. First para
Still item oneDuas 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