DecoToolkit Logo

Conversor de Markdown para HTML

Cole ou escreva Markdown à esquerda e veja o HTML renderizado à direita — ao vivo, no seu navegador. Suporta GitHub Flavoured Markdown completo: tabelas, listas de tarefas, tachado, blocos de código, imagens e links. Copie o HTML ou baixe um arquivo .html completo.

Link copied to clipboard

Markdown

Markdown to HTML Converter

Convert GitHub Flavoured Markdown to HTML instantly — no server, no sign-up.

Features

  • Supports italic, bold, and strikethrough
  • Fenced code blocks with language hints
  • Tables, task lists, and blockquotes

Code Example

function greet(name) {
  return `Hello, ${name}!`;
}

Task List

  • Paste your Markdown
  • See the rendered Preview
  • Copy or download the HTML

Table

Format Example Output
Bold **text** text
Italic _text_ text
Strike ~~text~~ text

Switch to HTML Source to see the generated markup.

Experimente um Exemplo Rápido

Clique em qualquer exemplo para carregá-lo no editor.

Como usar esta ferramenta

  1. Cole seu Markdown no editor à esquerda ou escreva diretamente. O painel direito é atualizado em tempo real.
  2. O painel direito exibe uma Pré-visualização renderizada por padrão — títulos formatados, texto em negrito, listas, tabelas e blocos de código.
  3. Clique em 'Código HTML' no painel direito para alternar da pré-visualização para o código HTML bruto.
  4. Clique em 'Copiar HTML' para copiar o HTML gerado para a área de transferência.
  5. Clique em 'Baixar .html' para salvar um documento HTML completo e independente no seu dispositivo.
  6. Use 'Experimente um Exemplo Rápido' abaixo do editor para carregar um modelo — README, post de blog, changelog, página de documentação, FAQ ou tabela comparativa.
  7. Limpe o editor com o ícone de lixeira e comece do zero, ou carregue outro exemplo.
  8. Cole o HTML copiado no seu CMS, plataforma de blog, sistema de documentação, template de e-mail ou qualquer ferramenta que aceite HTML.

Por que usar nosso Conversor de Markdown para HTML?

Markdown é o formato de escrita padrão para arquivos README, documentação, changelogs e conteúdo de CMS — mas a maioria dos destinos de publicação requer HTML. Este conversor preenche essa lacuna instantaneamente, rodando totalmente no seu navegador sem chamadas ao servidor. Seu texto permanece privado, a conversão é imediata e o resultado é HTML limpo e compatível com padrões que você pode usar em qualquer lugar.

Guia de Sintaxe Markdown

Uma referência completa da sintaxe Markdown — entrada Markdown à esquerda, saída HTML à direita.

Títulos
Markdown
# Heading 1
## Heading 2
### Heading 3
HTML
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>

Use # para H1, ## para H2, ### para H3, até ###### para H6.

Negrito
Markdown
**Bold text**
__Also bold__
HTML
<strong>Bold text</strong>
<strong>Also bold</strong>

Envolva o texto em **duplos asteriscos** ou __duplos underscores__.

Itálico
Markdown
*Italic text*
_Also italic_
HTML
<em>Italic text</em>
<em>Also italic</em>

Envolva o texto em *asterisco simples* ou _underscore simples_.

Negrito e Itálico
Markdown
***Bold and italic***
HTML
<strong><em>Bold and italic</em></strong>

Use ***triplos asteriscos*** para negrito e itálico juntos.

Tachado
Markdown
~~Struck through~~
HTML
<del>Struck through</del>

Envolva o texto em ~~duplos tils~~ — apenas GitHub Flavored Markdown.

Código Inline
Markdown
Use `console.log()` here.
HTML
Use <code>console.log()</code> here.

Envolva o texto em `crases` para código inline.

Bloco de Código
Markdown
```javascript
const x = 42;
console.log(x);
```
HTML
<pre><code class="language-javascript">
const x = 42;
console.log(x);
</code></pre>

Use cercas de crases triplas. Adicione um nome de linguagem para dicas de sintaxe.

Citação
Markdown
> This is a blockquote.
> It can span multiple lines.
HTML
<blockquote>
<p>This is a blockquote.
It can span multiple lines.</p>
</blockquote>

Prefixe uma linha com > para criar uma citação em bloco.

Lista Ordenada
Markdown
1. First item
2. Second item
3. Third item
HTML
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>

Inicie linhas com números seguidos de ponto. Os números são corrigidos automaticamente.

Lista Não Ordenada
Markdown
- Apple
- Banana
- Cherry
HTML
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Cherry</li>
</ul>

Use -, + ou * para criar marcadores.

Lista Aninhada
Markdown
- Parent item
  - Child item
  - Another child
HTML
<ul>
<li>Parent item
<ul>
<li>Child item</li>
<li>Another child</li>
</ul>
</li>
</ul>

Indente com 2 ou 4 espaços para criar sub-listas.

Lista de Tarefas
Markdown
- [x] Completed task
- [ ] Pending task
HTML
<ul>
<li><input checked disabled type="checkbox"> Completed task</li>
<li><input disabled type="checkbox"> Pending task</li>
</ul>

Use - [ ] para não marcado e - [x] para marcado — apenas GitHub Flavored Markdown.

Links
Markdown
[Visit DecoToolkit](https://decotoolkit.com)
HTML
<a href="https://decotoolkit.com">Visit DecoToolkit</a>

Use [texto do link](URL) — adicione um título com [texto](URL "Título").

Imagens
Markdown
![Alt text](https://example.com/image.png)
HTML
<img src="https://example.com/image.png" alt="Alt text">

Use ![texto alternativo](URL) — igual a um link mas com o prefixo !.

Tabelas
Markdown
| Name  | Role   |
|-------|--------|
| Alice | Dev    |
| Bob   | Design |
HTML
<table>
<thead><tr><th>Name</th><th>Role</th></tr></thead>
<tbody>
<tr><td>Alice</td><td>Dev</td></tr>
<tr><td>Bob</td><td>Design</td></tr>
</tbody></table>

Use barras verticais | e hífens --- para criar tabelas. Use dois-pontos para alinhamento.

Linha Horizontal
Markdown
---
HTML
<hr>

Use três ou mais hífens (---), asteriscos (***) ou underscores (___) em uma linha sozinha.

Escapando Caracteres
Markdown
\*not italic\*
HTML
<p>*not italic*</p>

Prefixe qualquer caractere Markdown com \ para renderizá-lo literalmente.

Recursos Markdown Suportados

Este conversor usa a biblioteca marked com GitHub Flavored Markdown (GFM) habilitado. Todos os recursos abaixo são totalmente suportados.

✓Títulos H1–H6
✓Parágrafos e Quebras de Linha
✓Negrito e Itálico
✓Negrito + Itálico combinados
✓Tachado (GFM)
✓Código Inline
✓Blocos de Código Cercados
✓Citações
✓Listas Ordenadas
✓Listas Não Ordenadas
✓Listas Aninhadas
✓Listas de Tarefas (GFM)
✓Links
✓Imagens
✓Tabelas (GFM)
✓Linhas Horizontais
✓Passagem de HTML bruto

Erros Comuns em Markdown

Evite estas armadilhas comuns ao escrever Markdown.

Falta linha em branco antes de uma lista
❌ Errado
Some text here
- Item one
- Item two
✅ Correto
Some text here

- Item one
- Item two
Falta linha separadora na tabela
❌ Errado
| A | B |
| 1 | 2 |
✅ Correto
| A | B |
|---|---|
| 1 | 2 |
Sintaxe de link incorreta
❌ Errado
[Click here]https://example.com
✅ Correto
[Click here](https://example.com)
Cerca de código não fechada
❌ Errado
```
code here
(missing closing fence)
✅ Correto
```
code here
```
Uma única quebra de linha não cria um novo parágrafo
❌ Errado
First paragraph.
Second paragraph.
✅ Correto
First paragraph.

Second paragraph.

O que é Markdown?

Markdown é uma sintaxe de formatação de texto simples projetada para ser legível como está e convertível para HTML. Criado por John Gruber e Aaron Swartz em 2004, usa caracteres de pontuação simples — como #, * e > — para indicar estrutura e ênfase. Markdown é agora o formato de escrita padrão para documentação técnica, projetos de código aberto e plataformas de conteúdo focadas em desenvolvedores.

  • Arquivos README no GitHub, GitLab e Bitbucket
  • Documentação gerada por ferramentas como MkDocs, Docusaurus e Jekyll
  • Posts de blog em plataformas como Ghost, Hashnode e Dev.to
  • Notas em aplicativos como Obsidian, Notion e Bear
  • Mensagens de chat no Slack, Discord e Microsoft Teams
  • Geradores de sites estáticos incluindo Hugo, Eleventy e Astro

Casos de Uso Comuns para um Conversor de Markdown para HTML

Um conversor de Markdown para HTML é útil sempre que você tem conteúdo escrito em Markdown mas precisa de saída HTML. Aqui estão os cenários mais comuns:

  • Publicar posts de blog ou artigos em um CMS que aceita HTML
  • Converter um README do projeto em uma página de site de documentação
  • Gerar templates de e-mail HTML a partir de rascunhos em Markdown
  • Exportar notas Markdown de aplicativos como Obsidian ou Typora para HTML
  • Incorporar conteúdo formatado em ferramentas que suportam apenas HTML (Mailchimp, HubSpot, etc.)
  • Criar trechos HTML para inclusão em sites estáticos ou aplicações de página única
  • Verificar qual HTML um documento Markdown produzirá antes de implantar

Melhores Práticas ao Escrever Markdown

Seguir convenções consistentes de Markdown previne problemas de renderização e mantém seus documentos portáteis entre ferramentas e plataformas.

  • Sempre adicione uma linha em branco antes de uma lista, bloco de código ou citação
  • Prefira títulos ATX (# H1) ao estilo Setext — são mais fáceis de visualizar e suportados em todo lugar
  • Use blocos de código cercados (``` lang) em vez de indentação de 4 espaços — mais legíveis e suportam dicas de linguagem
  • Escape caracteres especiais (*, _, [, ]) com barra invertida quando quiser que apareçam literalmente
  • Mantenha colunas de tabela alinhadas com espaços de preenchimento — não afeta a saída mas melhora a legibilidade
  • Use URLs relativas para links internos em projetos de documentação
  • Teste seu Markdown na plataforma de destino além de um conversor — pequenas diferenças de renderização existem entre parsers

Perguntas Frequentes

O que é Markdown?

Markdown é uma linguagem de formatação de texto simples criada por John Gruber em 2004. Ela usa caracteres de pontuação simples — como # para títulos, **negrito** e *itálico* — para indicar formatação. A ideia é que o Markdown seja legível como texto simples e também se converta facilmente em HTML. Hoje é usado em arquivos README do GitHub, sistemas de documentação, plataformas de blog, aplicativos de notas e muito mais.

O que é HTML e como o Markdown se relaciona com ele?

HTML (HyperText Markup Language) é a linguagem padrão que os navegadores usam para renderizar páginas da web. Markdown e HTML servem ao mesmo propósito — texto estruturado e formatado — mas o Markdown é mais fácil de escrever e ler. Um conversor de Markdown transforma seu código-fonte Markdown nas tags HTML equivalentes: ## vira <h2>, **negrito** vira <strong>, e assim por diante.

O que é o GitHub Flavoured Markdown (GFM)?

GitHub Flavoured Markdown é um superconjunto da especificação original do Markdown, criado pelo GitHub. Ele adiciona tabelas, listas de tarefas (caixas de seleção), tachado (~~texto~~), blocos de código cercados com dicas de linguagem e vinculação automática de URLs. O GFM se tornou o padrão de fato usado pela maioria das ferramentas e plataformas Markdown, e este conversor o suporta completamente.

Quais recursos Markdown são suportados?

Este conversor suporta a especificação completa do GitHub Flavoured Markdown: títulos (H1–H6), negrito, itálico, negrito+itálico, tachado, código inline, blocos de código, citações, listas ordenadas, listas não ordenadas, listas aninhadas, listas de tarefas, links, imagens, tabelas, réguas horizontais e passagem de HTML bruto. Um guia de referência completo está disponível mais abaixo nesta página.

Meu Markdown é enviado para um servidor?

Não. Toda a conversão acontece totalmente no seu navegador usando a biblioteca de código aberto marked. Nada que você digita é enviado a um servidor ou armazenado em qualquer lugar. Você pode até usar esta ferramenta offline após o carregamento da página.

Posso usar o arquivo .html baixado diretamente no navegador?

Sim. O arquivo baixado é um documento HTML completo e independente com declaração DOCTYPE e tags <html>, <head> e <body>. Você pode abri-lo diretamente em qualquer navegador. Observe que ele não inclui CSS, portanto será renderizado com os estilos padrão do navegador, a menos que você adicione uma folha de estilos manualmente.

Posso converter um arquivo README.md para HTML com esta ferramenta?

Sim. Abra seu arquivo README.md, copie o conteúdo e cole no editor. A ferramenta renderiza o GitHub Flavoured Markdown de forma idêntica ao GitHub — títulos, blocos de código, tabelas, listas de tarefas e imagens funcionam corretamente. Você pode então copiar o HTML para uso em sites de documentação, wikis ou qualquer outro lugar.

Posso usar o HTML gerado no WordPress, Ghost ou outras plataformas de CMS?

Sim. O HTML gerado é limpo, compatível com padrões e funciona com qualquer CMS ou plataforma que aceite HTML. No WordPress, cole no bloco HTML ou no bloco HTML Personalizado. No Ghost, use o card HTML. A maioria dos geradores de sites estáticos (Hugo, Jekyll, Eleventy) também aceita parciais HTML diretamente.

O que acontece com HTML inline dentro do meu Markdown?

O HTML inline é passado sem alterações. Se você escrever uma <div> ou <span> dentro do seu Markdown, ela aparecerá como está na saída. Esse é o comportamento padrão do Markdown e é útil para adicionar estilos ou elementos que a sintaxe Markdown não suporta nativamente.

Esta ferramenta adiciona destaque de sintaxe a blocos de código?

O conversor adiciona atributos de classe de linguagem a blocos de código cercados (ex.: <code class="language-javascript">) que são reconhecidos por bibliotecas populares de destaque de sintaxe como Prism.js ou highlight.js. No entanto, a ferramenta em si não inclui um destacador — você precisará incluir um na sua página final se quiser saída com cores.

Como adiciono imagens em Markdown?

Use a sintaxe ![Texto alternativo](URL) — por exemplo, ![Logo](https://example.com/logo.png). O texto alternativo é importante para acessibilidade. Para adicionar um título de dica, use ![Texto alternativo](URL "Título aqui"). As imagens devem estar hospedadas em algum lugar; esta ferramenta não faz upload de arquivos.

Como criar caixas de seleção em listas de tarefas?

Use - [ ] para um item não marcado e - [x] para um item marcado. Por exemplo, `- [x] Escrever o README` cria uma caixa de seleção marcada e `- [ ] Implantar em produção` cria uma não marcada. Esta é uma extensão do GitHub Flavoured Markdown não disponível no Markdown básico.

Como criar uma tabela em Markdown?

Use caracteres de barra vertical para separar colunas e hífens para definir a linha de cabeçalho: `| Coluna 1 | Coluna 2 |` na primeira linha, `|----------|----------|` na segunda, depois `| Valor 1 | Valor 2 |` para cada linha de dados. Alinhe colunas com dois-pontos: `|:------|` para esquerda, `|------:|` para direita, `|:------:|` para centro.

Qual é a diferença entre as visualizações Pré-visualização e Código HTML?

Pré-visualização renderiza seu Markdown como HTML formatado — você vê títulos, texto em negrito, tabelas e listas como apareceriam em um navegador. Código HTML mostra o código HTML bruto gerado a partir do seu Markdown, que você pode copiar e usar diretamente no seu projeto. Você pode alternar entre as duas visualizações a qualquer momento usando o botão acima do painel direito.

Ferramentas Relacionadas

Markdown Table Generator

Build Markdown tables visually or paste from Excel, Google Sheets, or CSV. Set column alignment and export GFM.

YAML to JSON Converter

Convert between YAML and JSON instantly. Auto-detects direction — all in your browser.

Base64 Encoder / Decoder

Encode and decode Base64 text quickly and easily.

Color Picker & Converter

Pick colors and convert between HEX, RGB, HSL, HSV, and CMYK instantly. Check WCAG contrast ratios.

Ferramentas Visitadas Recentemente

Text Diff

Developer

Compare two texts and highlight additions and deletions line by line.

URL Encoder / Decoder

Developer

Encode URLs to percent-encoded format or decode encoded URLs back to readable text.

YAML to JSON Converter

Developer

Convert between YAML and JSON instantly. Auto-detects direction — all in your browser.