Conversor de Markdown para HTML
Converta Markdown para HTML no navegador — GFM completo, pré-visualização ao vivo, realce de sintaxe. Exporte fragmento, documento completo ou HTML inline para e-mail. 100% privado, sem upload.
CSS personalizado
O que é a conversão de Markdown para HTML?
A conversão de Markdown para HTML transforma um documento de texto puro escrito em Markdown — com `#` para cabeçalhos, `**negrito**`, `- ` para listas e `[texto](url)` para links — no HTML que navegadores, sistemas de gerenciamento de conteúdo e clientes de e-mail de fato exibem. O Markdown é projetado para ser legível como está e fácil de escrever, mas um navegador não entende `# Cabeçalho`; ele entende <h1>Cabeçalho</h1>. A conversão preenche essa lacuna.
Por baixo dos panos, um processador de Markdown primeiro analisa a sua fonte numa árvore de sintaxe abstrata (AST) — uma representação estruturada onde um cabeçalho, um parágrafo, uma lista e um bloco de código são nós distintos, com seu conteúdo e atributos. Ele então serializa essa árvore em HTML, emitindo as tags e o aninhamento corretos. Trabalhar através de uma AST, em vez de trocar texto com expressões regulares, é o que permite ao conversor lidar com listas aninhadas, tabelas e HTML embutido de forma correta e previsível. As duas gramáticas reconhecidas são o CommonMark, o padrão preciso, e o GitHub Flavored Markdown (GFM), que o estende com tabelas, listas de tarefas, texto riscado e autolinks.
A razão pela qual você converte é que quase todo destino de publicação quer HTML, não Markdown. Um gerador de site estático, um campo de texto rico de um CMS, um template de e-mail e uma aba de navegador renderizam todos HTML. Então o fluxo de trabalho típico é escrever no confortável Markdown — um README, documentação, um rascunho de blog, notas — e converter para HTML no momento da publicação. Esta ferramenta faz essa conversão localmente e mostra uma pré-visualização ao vivo, então você vê o resultado renderizado e pode copiar o HTML exato no formato que precisa: um fragmento, uma página completa ou marcação com estilos inline pronta para e-mail.
A operação inversa — HTML de volta para Markdown — é igualmente útil quando você está migrando conteúdo web existente para um sistema baseado em Markdown. Para isso, mude para a aba HTML → Markdown ou abra o conversor de HTML para Markdown dedicado.
Markdown in:
# Release Notes
We shipped **tables** and `code`:
| Feature | Status |
| ------- | ------ |
| GFM | Done |
- [x] Parse to an AST
- [ ] Profit
HTML out:
<h1>Release Notes</h1>
<p>We shipped <strong>tables</strong> and <code>code</code>:</p>
<table>
<thead><tr><th>Feature</th><th>Status</th></tr></thead>
<tbody><tr><td>GFM</td><td>Done</td></tr></tbody>
</table>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" checked disabled> Parse to an AST</li>
<li class="task-list-item"><input type="checkbox" disabled> Profit</li>
</ul> Recursos Principais
Pré-visualização ao Vivo em Painel Dividido
Digite Markdown à esquerda e veja-o renderizar à direita em tempo real, com a saída HTML sendo construída abaixo conforme você avança. A pré-visualização renderiza num iframe em sandbox, então o que você vê é o que um navegador mostrará — e scripts colados não podem rodar.
GitHub Flavored Markdown Completo
Não apenas CommonMark — o superconjunto completo do GFM: tabelas com pipes, listas de tarefas (`- [x]`), texto riscado (`~~`), URLs com autolink e blocos de código cercados. Um README ou issue escrito para o GitHub renderiza aqui exatamente como faz lá.
Realce de Sintaxe
Rotule um bloco de código cercado com a sua linguagem (```js, ```python, ```sql) e o conversor o realça, envolvendo os tokens em spans com uma classe de linguagem no elemento <code>. Combine com uma folha de estilos de realce na sua página para a cor.
Três Formatos de Saída
Exporte um fragmento HTML (marcação do corpo para um template ou CMS), um Documento completo (uma página autônoma que você pode salvar como .html), ou HTML E-mail inline com os estilos movidos para cada elemento para que o Outlook e outros clientes o renderizem corretamente.
Painel de CSS Personalizado
Injete o seu próprio CSS na pré-visualização ao vivo para combinar com a tipografia de um site ou imitar o estilo de README do GitHub. Digite regras como h1 { color: #0969da; } e a pré-visualização atualiza instantaneamente, sem tocar no HTML limpo que você copia.
Folha de Referência de Sintaxe GFM
Uma referência rápida da sintaxe que produz HTML: `# H1` → cabeçalho, `**negrito**` → <strong>, `*itálico*` → <em>, `- item` → lista, `1. item` → lista ordenada, `[texto](url)` → link, `` `código` `` → código inline, ` ```lang ` → código cercado, `> citação` → blockquote, `| a | b |` → tabela, `- [ ]` → lista de tarefas, `~~texto~~` → riscado.
100% Privado, no Navegador
Cada conversão roda localmente com JavaScript — o seu Markdown e HTML nunca saem do seu dispositivo, nunca atingem um servidor e funcionam offline após o carregamento da página. Seguro para documentação não publicada, READMEs internos e notas de lançamento sob embargo.
Exemplos
Tabela GFM para um <table> em HTML
| Ferramenta | Velocidade | | ---------- | ---------- | | GFM | Rápida |
<table> <thead><tr><th>Ferramenta</th><th>Velocidade</th></tr></thead> <tbody><tr><td>GFM</td><td>Rápida</td></tr></tbody> </table>
As tabelas com pipes do GitHub Flavored Markdown não fazem parte do CommonMark puro, mas este conversor as compreende e emite um <table> semântico apropriado com <thead> e <tbody> — pronto para estilizar ou colar num CMS.
Lista de tarefas para HTML com checkbox
- [x] Escrever o README - [ ] Convertê-lo para HTML
<ul class="contains-task-list"> <li class="task-list-item"><input type="checkbox" checked disabled> Escrever o README</li> <li class="task-list-item"><input type="checkbox" disabled> Convertê-lo para HTML</li> </ul>
A sintaxe de lista de tarefas do GFM `- [x]` / `- [ ]` torna-se inputs checkbox reais e desabilitados, exatamente como o GitHub renderiza uma checklist — então um README copiado parece igual na sua própria página.
Bloco de código cercado para <pre><code> realçado
```js const html = md.render(src) ```
<pre><code class="language-js"><span class="hljs-keyword">const</span> html = md.render(src) </code></pre>
Adicione uma linguagem após a cerca de abertura e o conversor aplica realce de sintaxe, envolvendo os tokens em spans com a classe language-js no elemento <code>. Combine isso com uma folha de estilos de realce e o código fica colorido.
Um README para um documento HTML completo
# Meu Projeto Uma breve descrição e um [link](https://example.com).
<!doctype html> <html lang="pt"> <head><meta charset="utf-8"><title>Meu Projeto</title></head> <body> <h1>Meu Projeto</h1> <p>Uma breve descrição e um <a href="https://example.com">link</a>.</p> </body> </html>
Mude a saída para Documento completo e o conversor envolve o HTML renderizado numa página completa, com um <head> e charset — um arquivo .html autônomo que você pode abrir em qualquer navegador ou baixar diretamente.
Como Converter Markdown para HTML
- 1
Digite ou cole o seu Markdown
Coloque o seu Markdown — um README, notas de lançamento, o corpo de uma issue — no painel de entrada. Há suporte completo para GitHub Flavored Markdown: tabelas, listas de tarefas, texto riscado, autolinks e blocos de código cercados. A pré-visualização ao vivo e a saída HTML atualizam conforme você digita, tudo no seu navegador.
- 2
Escolha um formato de saída
Escolha Fragmento HTML para colar num template ou CMS, Documento completo para uma página .html autônoma, ou E-mail inline para HTML com estilos inline que sobrevive ao Outlook. Adicione tags de linguagem às cercas de código para realce de sintaxe e use o painel CSS personalizado para estilizar a pré-visualização.
- 3
Copie ou baixe
Clique em Copiar para pegar o HTML, ou Baixar para salvá-lo como arquivo. Para reverter a conversão, mude para a aba HTML → Markdown e cole o seu HTML para obter Markdown limpo de volta.
Armadilhas Comuns
HTML Não Escapado Engolido na Prosa
O Markdown deixa o HTML bruto passar, então um sinal de menor que você pretendia como texto — como escrever sobre um <Component> ou um genérico List<T> — é analisado como uma tag HTML e desaparece da saída. Escape o sinal com uma barra invertida ou uma entidade HTML, ou envolva o texto num span de código para que seja renderizado literalmente.
Use o componente <Header> para envolver páginas. <!-- <Header> é analisado como uma tag e some -->
Use o componente `<Header>` para envolver páginas. <!-- crases o mantêm literal: renderiza <Header> -->
Pipes de Tabela Desalinhados ou Malformados
Uma tabela GFM precisa de uma linha de cabeçalho, uma linha delimitadora de traços e pelo menos um pipe por linha. Esquecer a linha delimitadora, ou ter um número de colunas diferente do cabeçalho, quebra a tabela — ela cai para um parágrafo simples de pipes. As células não precisam se alinhar visualmente, mas toda linha deve ter o mesmo número de colunas.
| Nome | Função | | Alice | Admin | <!-- sem a linha delimitadora |---|---|: não é uma tabela -->
| Nome | Função | | ---- | ------ | | Alice | Admin | <!-- linha delimitadora presente: renderiza uma tabela -->
Cerca de Código Sem uma Linguagem
Um bloco de código cercado sem info string de linguagem renderiza como um bloco <pre><code> sem classe de linguagem, então não recebe realce de sintaxe. O código ainda aparece, apenas monocromático. Adicione a linguagem imediatamente após os crases de abertura para habilitar o realce; um espaço entre os crases e o nome o desabilita.
``` const x = 1 ``` <!-- sem linguagem → sem realce -->
```js const x = 1 ``` <!-- language-js → realçado -->
Usar um Fragmento Onde um Documento Completo é Necessário
Copiar a saída de fragmento HTML e salvá-la diretamente como um arquivo .html produz uma página sem doctype, sem charset e sem <html>/<head>/<body>. Os navegadores geralmente a renderizam mesmo assim, mas o modo quirks e a falta de charset podem quebrar caracteres acentuados e o layout. Quando o HTML precisa ser autônomo, mude para o formato Documento completo.
<h1>Título</h1> <p>Salvo como page.html — sem doctype, sem charset.</p>
<!doctype html> <html lang="pt"><head><meta charset="utf-8"><title>Título</title></head> <body><h1>Título</h1><p>Página completa e autônoma.</p></body></html>
Casos de Uso Comuns
- Publicar num site estático ou CMS
- Escreva o seu conteúdo em Markdown, converta para um fragmento HTML e cole-o num template de site estático ou num campo de texto rico de um CMS. Você obtém marcação semântica limpa — cabeçalhos, listas, tabelas — sem que o invólucro da página atrapalhe.
- Pré-visualizar um README antes do push
- Cole o seu README.md e veja a pré-visualização ao vivo renderizá-lo com GFM completo — tabelas, listas de tarefas, código cercado — para que você pegue uma tabela quebrada ou uma cerca de código faltando antes do commit, não depois que o GitHub a mostrar ao mundo.
- Transformar notas numa página web compartilhável
- Notas de reunião, um documento de design ou um rascunho escrito em Markdown torna-se uma página HTML completa em um clique. Escolha Documento completo, baixe o arquivo .html e você terá algo que pode abrir em qualquer navegador ou hospedar em qualquer lugar.
- Criar HTML com estilos inline seguro para e-mail
- Clientes de e-mail removem blocos <style>, então escreva a sua mensagem em Markdown e exporte o formato E-mail inline, que move o CSS para cada elemento como um atributo style. O resultado renderiza corretamente no Outlook e em outros clientes que ignoram estilos no nível do documento.
- Converter um arquivo .md para um .html baixável
- Precisa de uma versão HTML offline e autocontida de um documento Markdown? Cole-o, escolha Documento completo e Baixe — você obtém um arquivo .html autônomo com um doctype e charset adequados, sem ferramenta de build ou linha de comando.
- Incorporar documentação renderizada num app
- Gerando documentação, changelogs ou conteúdo de ajuda a partir de Markdown armazenado no seu repositório? Use esta ferramenta para ver exatamente que HTML uma dada fonte Markdown produz, para que você possa combinar com o renderizador do seu app e estilizar a saída para se ajustar.
Detalhes Técnicos
- CommonMark vs GitHub Flavored Markdown
- O CommonMark é a especificação estrita e inequívoca do Markdown que define exatamente como cabeçalhos, ênfase, listas, links e blocos de código são analisados. O GitHub Flavored Markdown (GFM) é um superconjunto estrito: ele mantém tudo o que o CommonMark define e adiciona quatro extensões — tabelas com pipes, itens de lista de tarefas (`- [x]`), texto riscado (`~~texto~~`) e URLs nuas com autolink. Como o GFM apenas adiciona recursos, qualquer documento CommonMark válido também é GFM válido. Este conversor implementa o superconjunto GFM, então documentos escritos para qualquer uma das gramáticas renderizam corretamente.
- Renderização em Sandbox Segura contra XSS
- O Markdown intencionalmente permite HTML bruto embutido, o que significa que um documento Markdown pode conter uma tag <script> ou um event handler como onerror. A pré-visualização ao vivo se defende disso renderizando dentro de um <iframe sandbox=""> com scripting desabilitado, então conteúdo ativo na sua entrada não pode ser executado enquanto você o visualiza — importante quando você está convertendo Markdown de uma fonte não confiável. O HTML serializado que a ferramenta gera é a renderização fiel da sua entrada; se você planeja publicar HTML derivado de Markdown não confiável, passe-o por um sanitizador como o DOMPurify no seu servidor antes de servi-lo.
- Compatibilidade de HTML de E-mail
- O e-mail HTML é renderizado por um mosaico de motores com suporte a CSS notoriamente limitado. O Outlook no Windows usa o motor de renderização do Word e ignora blocos <style> no cabeçalho do documento, então qualquer estilização baseada em classes desaparece silenciosamente; a abordagem confiável são atributos style inline em cada elemento, que é o que a saída E-mail inline produz. As imagens são outra armadilha: muitos clientes bloqueiam imagens remotas até que o destinatário opte por recebê-las, então incorporar imagens pequenas como data URIs as renderiza imediatamente, enquanto imagens remotas grandes podem não aparecer de jeito nenhum. Mantenha a marcação simples e teste nos seus clientes de destino.
- Realce Síncrono no Navegador
- Quando um bloco de código cercado carrega uma info string de linguagem (```js), o conversor roda um realçador síncrono sobre seu conteúdo, tokenizando a fonte e envolvendo cada token num <span> com uma classe como hljs-keyword ou hljs-string, mais uma classe language-js no elemento <code>. O realce é apenas estrutural — ele adiciona classes, não cores — então a página de destino precisa de uma folha de estilos de realce correspondente para renderizar a paleta. Como roda de forma síncrona no navegador, o HTML realçado aparece no instante em que você digita, sem chamada de rede.
Boas Práticas
- Escolha o Formato de Saída para o Destino
- Combine o formato com o lugar para onde o HTML vai. Um campo de CMS ou template já tem um invólucro de página, então cole um fragmento HTML. Um arquivo que você quer abrir diretamente num navegador precisa de um Documento completo com doctype e charset. Um e-mail precisa de E-mail inline para que os estilos sobrevivam a clientes que removem blocos <style>. Colar o formato errado é o erro evitável mais comum.
- Sempre Rotule Cercas de Código com uma Linguagem
- Escreva a linguagem logo após os crases de abertura — ```js, ```python, ```sql — sem espaço, para que o conversor possa realçar o bloco e adicionar a classe de linguagem correta. Uma cerca simples produz código sem estilo e sem realce. Use uma linguagem que o realçador reconheça; um nome desconhecido ou com erro de digitação cai para texto puro.
- Sanitize Antes de Publicar Markdown Não Confiável
- A pré-visualização está em sandbox, mas o HTML que a ferramenta emite é uma renderização fiel — incluindo qualquer HTML bruto ou <script> na entrada. Se esse Markdown veio de usuários ou de outra fonte não confiável e você pretende servir o resultado a outras pessoas, passe o HTML por um sanitizador como o DOMPurify no seu servidor primeiro. O sandbox protege você durante a conversão, não os seus visitantes depois que você publica.
- Mantenha o HTML de E-mail Simples e Inline
- Para e-mail, prefira o formato E-mail inline, mantenha o seu layout simples e evite recursos de CSS que o Outlook e outros clientes descartam. Incorpore imagens pequenas como data URIs para que elas renderizem mesmo quando imagens remotas são bloqueadas, e sempre envie um teste a si mesmo antes de um envio mais amplo — a renderização de e-mail é o destino menos tolerante que o HTML tem.
- Escape Caracteres HTML Literais no Texto
- Se você quer que um < ou & literal apareça como texto em vez de ser interpretado como tag ou entidade, escape-o com uma barra invertida (\<) ou uma entidade HTML (<). O Markdown deixa o HTML bruto passar, então um <example> não escapado na prosa pode ser engolido como uma tag desconhecida e sumir da saída renderizada.
Perguntas Frequentes
Ele suporta GitHub Flavored Markdown (GFM)?
Como obtenho HTML com estilos inline seguro para e-mail?
Qual é a diferença entre um fragmento HTML e um documento completo?
O HTML renderizado é seguro contra XSS na pré-visualização?
Posso adicionar meu próprio CSS à pré-visualização?
Meus arquivos ou texto são enviados para um servidor?
Funciona offline?
Como converto um arquivo Markdown (.md) para um arquivo HTML?
Por que meu bloco de código não está realçado?
Posso converter HTML de volta para Markdown?
Ferramentas relacionadas
Ver todas as ferramentas →Decodificador e Codificador Base64
Codificação e Formatação
Decodifique e codifique Base64 online gratuitamente. Conversão em tempo real com suporte completo a UTF-8 e emoji. 100% privado — executa no seu navegador. Sem necessidade de cadastro.
Conversor de Base64 para Imagem
Codificação e Formatação
Decodifique uma string Base64 ou data URI de volta para imagem no navegador. Pré-visualize, leia dimensões e MIME, e baixe como PNG, JPG, GIF, SVG. Sem upload.
Conversor CSV para JSON
Codificação e Formatação
Converta CSV para JSON no navegador. RFC 4180, inferência de tipos, cabeçalho, seguro para inteiros grandes. 100% privado, sem upload.
Conversor de HTML para Markdown
Codificação e Formatação
Converta HTML em Markdown limpo no seu navegador — tabelas GFM, listas de tarefas e links. Escolha cabeçalhos ATX/Setext e links inline ou de referência. Ótimo para migrar conteúdo web ou alimentar LLMs. 100% privado, sem upload.
Conversor de Imagem para Base64
Codificação e Formatação
Converta imagens em data URIs Base64 no seu navegador — PNG, JPG, GIF, WebP, SVG, ICO. Copie a saída em HTML, CSS, Markdown e JSON. 100% privado, sem upload.
JSON Diff (Comparar)
Codificação e Formatação
Compare dois arquivos JSON instantaneamente no navegador. Destaque lado a lado, saída JSON Patch (RFC 6902), ignore campos ruidosos como timestamps e IDs. 100% privado, sem upload.