Converter HTML para Markdown

O que este conversor faz

O HTML é como as páginas web são construídas. O Markdown é uma forma mais leve de escrever a mesma estrutura com caracteres simples: # para um título, - para um item de lista, ** para negrito. As pessoas convertem de um para o outro o tempo todo. Você pode estar levando um post de um CMS para um site estático, colando uma página web em um README ou transformando anotações escritas em Markdown em HTML para um template de e-mail.

Esta página funciona nos dois sentidos. De HTML para Markdown, ela usa o Turndown, um conversor muito usado, com regras extras para tabelas e blocos de código. De Markdown para HTML, ela usa o marked com o GitHub Flavored Markdown ativado.

Como usar

1. Escolha um sentido com HTML para Markdown ou Markdown para HTML.
2. Cole na caixa da esquerda, clique em Abrir arquivo ou em Exemplo para testar. O resultado é atualizado enquanto você digita.
3. De HTML para Markdown, escolha o estilo dos Títulos (cerquilhas ou sublinhados), o caractere dos Marcadores e como escrever os Blocos de código (cercados ou com recuo).
4. De Markdown para HTML, ligue Quebras de linha viram <br> se as quebras de linha simples devem continuar como quebras, como nos comentários do GitHub.
5. Alterne entre Código e Pré-visualização para ver o resultado renderizado e depois clique em Copiar ou Baixar.

Exemplo de HTML para Markdown

Este HTML:

<h1>Notas da versão</h1>
<p>A versão <strong>2.4</strong> traz o <a href="https://example.com/docs">modo offline</a> e corrige <em>três</em> bugs.</p>
<ul>
  <li>Busca mais rápida</li>
  <li>Nova flag <code>--quiet</code></li>
</ul>
<pre><code class="language-bash">npm install [email protected]</code></pre>
<table>
  <tr><th>Plataforma</th><th>Status</th></tr>
  <tr><td>Windows</td><td>Pronto</td></tr>
</table>

vira este Markdown:

# Notas da versão

A versão **2.4** traz o [modo offline](https://example.com/docs) e corrige *três* bugs.

- Busca mais rápida
- Nova flag `--quiet`

```bash
npm install [email protected]
```

| Plataforma | Status |
| --- | --- |
| Windows | Pronto |

A classe language-bash do bloco de código vira a etiqueta de linguagem depois da cerca de abertura, então o realce de sintaxe continua funcionando no GitHub e na maioria dos geradores de sites estáticos. As listas aninhadas ganham recuo embaixo do item pai, e uma lista ordenada mantém os números.

Exemplo de Markdown para HTML

Este Markdown:

## Instalação

Rode `npm install` e abra **http://localhost:3000**.

- [x] Node 20
- [ ] Docker

dá este HTML:

<h2>Instalação</h2>
<p>Rode <code>npm install</code> e abra <strong><a href="http://localhost:3000">http://localhost:3000</a></strong>.</p>
<ul>
<li><input checked="" disabled="" type="checkbox"> Node 20</li>
<li><input disabled="" type="checkbox"> Docker</li>
</ul>

Duas extensões do GitHub estão funcionando aqui. A URL solta virou um link, e os itens da lista de tarefas viraram caixas de seleção. Tabelas com :-: na linha divisória recebem align="center" nas células.

Por padrão, uma quebra de linha simples dentro de um parágrafo continua sendo uma quebra comum no código, que os navegadores mostram como um espaço. Com Quebras de linha viram <br> ligado, Linha um e Linha dois em linhas separadas viram <p>Linha um<br>Linha dois</p>.

O que é descartado

O Markdown descreve a estrutura, e não o design. Na conversão de HTML para Markdown:

• Os blocos script, style, noscript e template são removidos.
• Classes, ids, estilos embutidos e atributos de dados são descartados.
• Elementos de agrupamento como div e span desaparecem, mas o texto deles fica.
• As células de tabela com vários parágrafos são juntadas em uma linha, porque uma linha de tabela em Markdown precisa caber em uma linha. Uma barra vertical dentro de uma célula vira \|.
• Células mescladas (colspan) são completadas com células vazias, para que todas as linhas tenham o mesmo número de colunas.

Se você precisa do layout exato, mantenha o conteúdo em HTML. A maioria dos renderizadores de Markdown aceita blocos de HTML puro.

Acentos, cedilha e entidades HTML como ç viram caracteres comuns no Markdown, então um texto em português sai legível.

Dicas

• Sempre que puder, copie do código-fonte da página, e não da página renderizada. Copiar o texto renderizado perde as tags de que o conversor precisa.
• Se o HTML estiver minificado ou bagunçado, o resultado é o mesmo, porque o conversor lê a estrutura, e não os espaços. Para ler o próprio HTML, passe-o antes pelo formatador HTML.
• Passe o Markdown pelo formatador Markdown depois, para ter tabelas alinhadas e ênfases consistentes.
• Para um documento do Word, use a ferramenta de converter Word para Markdown, que lê o arquivo .docx diretamente.

Outras formas de converter

• O Pandoc converte entre dezenas de formatos na linha de comando. pandoc page.html -o page.md é a forma básica.
• Editores: o VS Code mostra uma pré-visualização renderizada do Markdown com Ctrl+Shift+V. Várias extensões acrescentam um comando para colar HTML como Markdown.
• Código: a biblioteca Turndown em JavaScript e o pacote markdownify em Python convertem HTML em Markdown dentro dos seus próprios scripts.

Tudo nesta página roda no seu navegador. O HTML que você cola é lido como um documento inerte, então nada dele roda ou é carregado durante a conversão.