Exportar Markdown para HTML

Markdown é a forma mais rápida de escrever conteúdo estruturado, mas a web roda em HTML. A ponte entre os dois deveria ser instantânea e segura. Abra o Editor Markdown para escrever Markdown, ver o HTML renderizar em tempo real e exportar uma saída limpa e sanitizada — tudo no seu navegador.

TL;DR

Escreva Markdown, veja o HTML na hora, copie ou baixe.

• Previsualização em tempo real enquanto digita — três modos de exibição (Dividido, Editor, Previsualizacao) para editar, ler ou fazer as duas coisas ao mesmo tempo.
• HTML limpo e seguro — a saída é sanitizada com DOMPurify, então é segura para colar num CMS ou email.
• Copiar ou baixar — leve o HTML para a área de transferência ou salve um arquivo .html independente localmente.

O que é Markdown

Markdown é uma linguagem de marcação leve para formatar texto com símbolos simples e legíveis. Um # cria um título, traços fazem uma lista, asteriscos fazem ênfase, e uma URL comum pode virar um link. O código-fonte fica perto de texto puro, por isso as pessoas recorrem a ele assim que escrevem mais do que um parágrafo de conteúdo estruturado.

É usado em todo lugar onde se escreve conteúdo técnico — arquivos README, sites de documentação, posts de blog, notas de versão e wikis internos. O motivo é simples: dá para escrever e ler Markdown sem nenhuma ferramenta, e ele vira HTML enriquecido quando você precisa.

Por baixo dos panos, esta ferramenta renderiza Markdown com o motor markdown-it seguindo a especificação CommonMark — a interpretação padronizada e bem definida de Markdown. Isso significa uma saída previsível e consistente, em vez das surpresas de dialeto em dialeto que as antigas variantes de Markdown tinham.

A previsualização e os modos de exibição

Conforme você digita, o HTML renderiza em tempo real na previsualização. Três modos de exibição controlam o quanto você vê:

• Dividido — editor à esquerda, previsualização renderizada à direita. O padrão, e o melhor modo enquanto escreve, porque vê a fonte e o resultado juntos.
• Editor — só a entrada Markdown, na largura total. Útil quando está concentrado em escrever e não precisa da previsualização.
• Previsualizacao — só o HTML renderizado. Útil para ler o resultado final ou mostrá-lo a alguém.

Troque de modo a qualquer momento. Nos modos Dividido e Previsualizacao, a saída renderizada é atualizada a cada tecla.

Passo a passo: exportar HTML

O Editor Markdown roda totalmente no seu navegador. O fluxo é este:

1. Digite ou cole seu Markdown na área de entrada. Use Exemplo para carregar um exemplo se quiser começar de um modelo, ou Limpar para apagar tudo.
2. Escolha um modo de exibição. Selecione Dividido, Editor ou Previsualizacao conforme queira ver a fonte, o resultado ou ambos.
3. Ative as quatro opções. Cada uma muda como o Markdown é renderizado:
   • Quebras suaves — quebras de linha simples no seu texto viram <br> na saída, em vez de serem recolhidas.
   • Vincular URLs — URLs soltas como https://example.com viram automaticamente links clicáveis.
   • Tipografia — substitui aspas retas por tipografia inteligente (aspas curvas, traços).
   • HTML bruto — permite embutir HTML embutido no Markdown. Nota: mesmo ativado, a saída é sanitizada (veja abaixo), então tags e manipuladores perigosos são removidos antes de você vê-los ou copiá-los.
4. Confira o painel de estatísticas. Ele mostra caracteres, palavras, linhas, títulos, links e blocos de codigo — uma forma rápida de confirmar que a estrutura saiu como você queria.
5. Exporte. Clique em Copiar HTML para levar o HTML renderizado para a área de transferência, ou Baixar HTML para salvar um documento .html independente. Você também pode Copiar Markdown ou Baixar Markdown para exportar a fonte .md.

Sanitização e segurança

Esta é a parte que torna a saída de fato segura para colar num CMS, email ou wiki. Cada pedaço do HTML renderizado — tenha vindo da sintaxe Markdown ou do HTML bruto que você embutiu — passa pelo DOMPurify antes de chegar à previsualização ou à área de transferência.

O DOMPurify (configurado com USE_PROFILES: { html: true }) remove as partes perigosas: tags <script>, manipuladores de evento embutidos como onclick, e outros vetores que poderiam executar código. Ele também proíbe a tag e o atributo style, então truques de estilo não passam. Se o próprio DOMPurify falhar, um sanitizador de reserva baseado em regex captura os piores casos para que você nunca receba HTML bruto e inseguro.

Quando a entrada bruta difere da saída sanitizada, a ferramenta mostra “HTML inseguro foi removido da previsualizacao.” — uma contagem do conteúdo removido. Esse aviso é o sinal de que algo foi retirado, exatamente o que você quer antes de colar em qualquer lugar sensível.

Limites e honestidade

Algumas restrições honestas para você saber exatamente o que está recebendo:

• CommonMark, não GitHub Flavored Markdown. Esta ferramenta segue CommonMark via markdown-it. Ela não renderiza extensões específicas do GitHub como tabelas ou tachado (~~texto~~) só com a sintaxe Markdown. Se precisa de uma tabela ou texto tachado, ative HTML bruto e escreva o HTML diretamente — ele ainda será sanitizado.
• style é removido. Como o DOMPurify proíbe a tag e o atributo style, o estilo embutido no seu HTML bruto não sobrevive na saída.
• O HTML bruto é opcional e ainda assim sanitizado. A opção HTML bruto deixa o HTML embutido passar pelo analisador de Markdown, mas o resultado renderizado é sanitizado depois. É seguro, mas não é um jeito de executar marcação arbitrária.

Perguntas frequentes

A saída HTML é segura?

Sim. Todo HTML renderizado passa pelo DOMPurify antes de chegar à previsualização, ao botão de copiar ou ao download. Scripts, manipuladores de evento e a tag e atributo style são removidos. Se algo foi retirado, você verá um aviso de “HTML inseguro foi removido”.

Suporta tabelas do GitHub?

Não pela sintaxe Markdown. A ferramenta segue CommonMark, que não tem sintaxe nativa de tabela. Para incluir uma tabela, ative HTML bruto e escreva a marcação <table> diretamente — ela será renderizada e sanitizada como qualquer outro HTML.

Posso baixar o arquivo HTML?

Sim. Baixar HTML salva um documento .html independente com estilo básico, pronto para abrir em qualquer navegador. Você também pode Copiar HTML para a área de transferência se quiser colar em outro lugar.

O que é CommonMark?

CommonMark é uma especificação padronizada para Markdown que elimina a ambiguidade dos dialetos antigos. Esta ferramenta usa o motor markdown-it para renderizar CommonMark, então a mesma entrada produz de forma confiável a mesma saída. Não é GitHub Flavored Markdown — recursos como tabelas e tachado não fazem parte da especificação central.