§

Colar HTML

§

Bruto

§

Pré-visualização

A pré-visualização é sanitizada via DOMPurify — tags script, manipuladores de eventos e URIs javascript: são removidos antes da renderização.

Markdown é a língua franca da documentação de software nos EUA e no Reino Unido. Cada README do GitHub, resposta do Stack Overflow e comentário do Reddit passa por um analisador Markdown, e os mais de 100 milhões de posts de desenvolvedores no Stack Overflow dependem do CommonMark para renderização confiável. Laboratórios federais dos EUA executam pipelines MkDocs e Sphinx que convertem arquivos-fonte Markdown em portais de documentação estática, enquanto os designers de conteúdo do GOV.UK redigem páginas de serviço em Markdown antes da publicação. Notion, Obsidian e Bear oferecem tomada de notas Markdown-first a milhões de trabalhadores do conhecimento nos EUA e no Reino Unido, e newsletters do Substack compilam rascunhos Markdown em e-mails HTML. Converter HTML exportado de volta para Markdown é trabalho diário para redatores técnicos, mantenedores open-source e engenheiros de plataforma em ambos os mercados.

O que é a conversão HTML para Markdown?

HTML é o marcado renderizado que o navegador exibe — <h1>, <ul>, <table>, <a> e o resto. Markdown é um formato leve de texto puro que usa pontuação mínima (# para cabeçalhos, * para ênfase, - para itens de lista) para codificar a mesma estrutura. GitHub Flavored Markdown (GFM) estende a especificação CommonMark original com tabelas, riscado, listas de tarefas e autolinks. Converter HTML para Markdown traz HTML renderizado ou exportado de volta para Markdown de texto puro editável — exatamente o que uma migração de conteúdo de um CMS ou uma limpeza de README precisa.

Quais recursos do GitHub Flavored Markdown a saída suporta?

O motor turndown@7.2.0 embutido com a extensão turndown-plugin-gfm emite o superconjunto GFM completo a partir do seu HTML: cabeçalhos estilo ATX # a ###### de <h1><h6>, listas ordenadas e não ordenadas com aninhamento, negrito **texto** e itálico *texto*, riscado ~~texto~~ de <del>, links inline [texto](url) e imagens ![alt](src), blocos de código com cercas e dicas de linguagem (```js), spans de código inline `code`, tabelas com barras de <table>, listas de tarefas GFM - [ ] / - [x] de inputs checkbox, citações > e regras horizontais ---. O painel de pré-visualização re-renderiza o Markdown emitido com marked@12.0.2 para que você possa confirmar a conversão visualmente.

Como funciona a conversão HTML para Markdown?

Cada conversão roda localmente no seu navegador usando três bibliotecas embutidas — sem CDN, sem fetch, sem telemetria. Os passos principais são:

  1. Sanitizar: o HTML colado é primeiro executado através de DOMPurify.sanitize(html, { USE_PROFILES: { html: true } }) para remover elementos <script>, todos os manipuladores de eventos on* e URIs javascript: antes que qualquer coisa percorra o marcado. DOMPurify é o mesmo sanitizador XSS usado pela Mozilla MDN, Atlassian e Microsoft 365.
  2. Converter: turndownService.turndown percorre o DOM limpo e emite GitHub Flavored Markdown — cabeçalhos tornam-se prefixos #, listas tornam-se itens - / 1., <table> torna-se uma tabela com barras, e assim por diante. O Markdown é escrito no <textarea> somente leitura via value (nunca innerHTML), portanto é inerentemente seguro.
  3. Renderizar: o Markdown emitido é re-analisado por marked.parse, sanitizado novamente por DOMPurify e atribuído ao innerHTML do painel de pré-visualização para que você obtenha uma confirmação visual de que o Markdown faz o round-trip para a estrutura esperada. O modo ao vivo aplica debounce de 150 ms à entrada para que a saída atualize enquanto você cola sem sobrecarregar o parser.

Por que converter HTML para Markdown com esta ferramenta?

  • Privacidade: cada passagem de sanitização, conversão e renderização acontece no seu navegador. O HTML — incluindo posts de CMS exportados, documentação interna e código-fonte de páginas confidenciais — nunca chega aos nossos servidores.
  • Seguro contra XSS por padrão: o HTML colado é executado através do DOMPurify antes que o turndown o percorra, e o painel de pré-visualização executa o HTML re-renderizado através do DOMPurify novamente antes de innerHTML, portanto colar marcado que contém tags <script> ou manipuladores onerror= produz uma pré-visualização inerte e Markdown limpo.
  • GFM completo: elementos <table> convertem para tabelas Markdown com barras, <del> para riscado e listas de checkbox para listas de tarefas GFM. A maioria dos conversores online perde tabelas no caminho HTML → Markdown — a extensão embutida turndown-plugin-gfm as preserva.

Quais são as aplicações comuns da conversão HTML para Markdown?

Converter HTML para Markdown aparece em migração de conteúdo, documentação e arquivamento:

  • Migração de CMS: exportar um post do WordPress ou Ghost como HTML e convertê-lo para Markdown para uma reconstrução com Hugo / Jekyll / 11ty / Astro. A conversão preserva níveis de cabeçalho, links, listas e ênfase inline.
  • Limpeza de README: colar o HTML renderizado de uma página wiki ou artigo web e trazê-lo de volta para Markdown editável para um README de projeto ou site de documentação, em vez de redigitar a estrutura manualmente.
  • Arquivamento e notas: capturar um e-mail HTML ou recorte web e convertê-lo para Markdown para armazenamento no Obsidian, Notion ou uma base de conhecimento em texto puro — Markdown é compatível com diff e sobrevive à mudança de formato.

Como se parece um exemplo de HTML para Markdown?

Colar <h2>Cabeçalho</h2><ul><li>a</li><li>b<ul><li>aninhado</li></ul></li></ul> produz Markdown com ## Cabeçalho, uma lista aninhada com marcadores e um painel de pré-visualização que re-renderiza a mesma estrutura aninhada. Colar um <table> com uma linha de cabeçalho e duas linhas de dados produz a tabela com barras equivalente | col | col | — confirmando que a conversão preserva cabeçalhos, listas e tabelas.

Este conversor HTML para Markdown roda inteiramente no meu navegador?

Sim. Cada passagem de sanitização, conversão e renderização roda localmente como JavaScript dentro da aba do seu navegador. As três bibliotecas embutidas — turndown@7.2.0 (com turndown-plugin-gfm@1.0.2), marked@12.0.2 e DOMPurify@3.1.7 — são entregues da mesma origem que a página, então não há dependência de CDN, nem fetch, nem XMLHttpRequest, nem navigator.sendBeacon sobre a entrada. A ferramenta também funciona offline depois que a página carrega, porque é um bundle estático HTML/CSS/JS com as bibliotecas vendor copiadas ao lado. Posts exportados, documentos internos e código-fonte de páginas confidenciais permanecem no seu dispositivo.

O painel de pré-visualização renderizada é seguro contra XSS?

Sim. O HTML colado é executado através de DOMPurify.sanitize antes que o turndown o percorra, e cada string HTML atribuída ao innerHTML da pré-visualização passa por DOMPurify.sanitize(html, { USE_PROFILES: { html: true } }) também. DOMPurify é o sanitizador XSS open-source mantido pela Cure53; é a mesma biblioteca usada pela Mozilla MDN, Atlassian e Microsoft 365 para reforçar HTML fornecido pelo usuário. O perfil html padrão remove elementos <script>, todo atributo manipulador de evento on* (onerror, onclick, etc.) e esquemas URI javascript:. Colar <img src=x onerror=alert(1)> produz uma pré-visualização onde document.querySelector('#output-preview img[onerror]') retorna null e nenhum alerta dispara.

Tabelas GFM são convertidas do HTML?

Sim. A direção HTML → Markdown usa turndown-plugin-gfm, que adiciona uma regra turndown customizada que percorre nós <table> e emite o Markdown de tabela com barras equivalente — uma linha de cabeçalho, uma linha de alinhamento |---|---| e depois linhas de dados. A maioria dos conversores online perde tabelas neste caminho; este preserva. Riscado (<del>texto</del>~~texto~~) e listas de tarefas (<input type="checkbox">- [ ] / - [x]) convertem da mesma forma.

Meu HTML será convertido corretamente?

Para o conjunto canônico de recursos GFM — cabeçalhos h1 a h6, listas ordenadas e não ordenadas com aninhamento, negrito / itálico / riscado, links inline, imagens inline, blocos de código com cercas e tags de linguagem, spans de código inline, tabelas com barras, listas de tarefas, citações, regras horizontais e autolinks — a conversão é limpa e previsível. Casos limite: comentários HTML (<!-- ... -->) são removidos (Markdown não tem sintaxe de comentário); estilo inline e atributos de classe são descartados porque Markdown não tem equivalente; e tags inline incomuns como <sub> / <sup> são convertidas para texto puro. Estes são comportamentos documentados do turndown, não bugs.

O destaque de sintaxe em blocos de código com cercas é suportado?

Não na v1. Blocos de código com cercas renderizam na pré-visualização com fonte monoespaçada e um fundo sutil, mas sem destaque de tokens por linguagem. Adicionar destaque de sintaxe exigiria incluir Prism ou highlight.js, cada um adicionando 15–40 KB mais um arquivo de gramática por linguagem e uma matriz de temas que precisaria alinhar com a paleta Workshop Terminal. Por enquanto, o renderizador foca em correção e segurança XSS; se houver demanda dos usuários por destaque inline, um interruptor opcional é um próximo passo viável.

Este Conversor HTML para Markdown vem com turndown@7.2.0 (+ turndown-plugin-gfm@1.0.2), marked@12.0.2 e DOMPurify@3.1.7 embutidos na mesma origem, emite o conjunto completo de recursos GFM e sanitiza cada string HTML renderizada antes que toque no DOM. Sem upload, sem CDN, sem telemetria — cada byte permanece no seu navegador.