Menu

Editor de Markdown

Escreva Markdown com visualização dividida ao vivo.

Última atualização

Exibir
MarkdownDigite Markdown para começar
Pré-visualização
O Markdown renderizado aparece aqui — tabelas, listas, código e mais.

O que é um editor de Markdown?

Um editor de Markdown é um ambiente de escrita lado a lado: você digita o Markdown em texto puro de um lado e o preview renderizado se atualiza em tempo real do outro. É o formato por trás dos READMEs no GitHub, dos portais de documentação, dos geradores de sites estáticos, das plataformas de blog, de apps de notas como o Obsidian e de ferramentas de chat como Discord e Slack.

A graça do Markdown é justamente essa: continuar legível em texto puro e virar HTML estruturado quando renderizado. Você gasta menos tempo brigando com barra de formatação e mais tempo escrevendo de fato — e é exatamente por isso que redatores técnicos e devs preferem essa abordagem.

A maioria dos editores modernos suporta o *GitHub-Flavored Markdown* (GFM), que adiciona tabelas, listas de tarefas, code fences com indicação de linguagem, autolinks e texto riscado por cima da spec original do CommonMark.

O que você vai aprender usando um editor de Markdown

  • Markdown é texto puro — legível no seu editor *e* renderizável como HTML, sem barra de ferramentas nem formatação invisível.
  • Títulos, listas, links e ênfase já dão conta de 90% da escrita do dia a dia. Tabelas e code fences resolvem boa parte dos 10% restantes.
  • Code fences com indicação de linguagem ( js , python ) ativam o destaque de sintaxe em vários renderizadores.

Como usar um editor de Markdown passo a passo

  1. Comece a digitar no painel da esquerda

    Use # para títulos, * ou _ para ênfase e - para listas. O painel da direita atualiza enquanto você digita.

  2. Adicione estrutura

    Insira títulos, code fences e tabelas para organizar o documento. A maioria dos editores tem atalhos de teclado (Ctrl+B, Ctrl+I) para a formatação mais comum.

  3. Veja o HTML renderizado

    Compare o preview ao vivo com a fonte. Quando algo não renderiza como você esperava, normalmente é uma linha em branco faltando ou uma fence mal fechada.

  4. Copie ou baixe

    Copie o Markdown e cole direto no seu README, ou copie o HTML para usar em e-mail, CMS ou qualquer lugar que não entenda Markdown.

Cheat sheet de sintaxe do Markdown

Os 80% do Markdown que você vai usar todo dia. O resto é só uma busca no Google. Specs: CommonMark e GitHub-Flavored Markdown.

ElementoMarkdownRenderiza como
Título 1# TítuloTítulo de nível superior
Título 2## SeçãoTítulo de seção
Negrito**forte****forte**
Itálico*ênfase* ou _ênfase_*ênfase*
Código inline code code
Bloco de códigoEnvolva o código em uma fence de três crases, opcionalmente com a linguagemBloco com destaque de sintaxe
Link`texto`Link clicável
Imagem`!alt`Imagem incorporada
Lista- itemLista com marcadores
Lista numerada1. itemLista ordenada
Lista de tarefas (GFM)- [x] feitoCheckbox marcada
Tabela (GFM)| a | b |\n|---|---|\n| 1 | 2 |Tabela de duas colunas
Citação> citaçãoCitação recuada

Exemplos de Markdown para testar

Início típico de um README

Fonte
# Project Name
A short description in one or two sentences.
## Install
```bashnpm install project-name```
## Quick start
- Step 1- Step 2- Step 3

Título, parágrafo, comando de instalação dentro de um code fence e uma lista com marcadores — essa é a espinha dorsal de qualquer README decente.

Tabelas (GitHub-Flavored)

Fonte
| Feature | Free | Pro ||---------|:----:|:---:|| Editor  |||| Export  |      ||

As barras (|) separam as colunas. A linha de traços alinha as colunas e os caracteres : definem o alinhamento (esquerda, centro, direita). Tabelas GFM não exigem largura de coluna precisa — só a estrutura importa.

Lista de tarefas

Fonte
- [x] Draft the post- [x] Add screenshots- [ ] Publish

O GitHub renderiza isso como checkboxes interativas dentro de issues e PRs. Útil para checklists no próprio documento e para um acompanhamento de projeto bem leve.

Erros comuns ao escrever Markdown

  • Esquecer das linhas em branco em volta de listas, tabelas e code fences. A maioria dos renderizadores precisa de uma linha em branco para começar um novo bloco.
  • Misturar tabs e espaços dentro de uma lista — alguns renderizadores quebram a indentação em silêncio.
  • Colocar HTML cru dentro de um code fence esperando que ele renderize. Code fences são *literais* — é exatamente esse o propósito.

Perguntas frequentes sobre o editor de Markdown

O que é Markdown?
Markdown é uma linguagem de marcação leve que converte uma sintaxe simples em texto puro (# título, **negrito**, `link`) em HTML formatado. Foi pensada para continuar legível na própria fonte.
Como converto Markdown para HTML?
Cole seu Markdown em um editor e copie o HTML renderizado, ou rode um conversor como marked, markdown-it ou pandoc. A maioria dos geradores de sites estáticos faz isso automaticamente no momento do build.
Qual a diferença entre Markdown e GitHub-Flavored Markdown?
O GitHub-Flavored Markdown (GFM) acrescenta tabelas, code fences com indicação de linguagem, listas de tarefas, autolinks e texto riscado em cima do Markdown padrão. É o dialeto usado pelo GitHub, GitLab e várias plataformas de documentação.
Posso usar HTML dentro do Markdown?
Pode — a maioria dos renderizadores deixa o HTML cru passar. É útil para embutir coisas que o Markdown não suporta nativamente (layouts customizados, tags de vídeo), mas isso prende o seu documento a uma saída HTML.
O editor de Markdown é privado?
Sim. O editor do Coddy renderiza o Markdown inteiramente no seu navegador — seu texto não é enviado para lugar nenhum.

Outras ferramentas para desenvolvedores

Aprenda a programar com o Coddy

COMEÇAR