Editor Markdown
O que é Markdown?
Markdown é uma linguagem de marcação leve para escrever conteúdo estruturado em texto simples e legível. Títulos, listas, links, imagens, citações, blocos de código e tabelas podem ser escritos com caracteres simples e depois renderizados como HTML ou outros formatos. Um editor Markdown ajuda a comparar fonte e prévia, encontrar erros de formatação e preparar mais rápido READMEs, documentação, posts, notas, bases de conhecimento, changelogs e textos de produto. Markdown é propositalmente simples, mas plataformas aceitam extensões diferentes, como GitHub-Flavored Markdown, frontmatter, listas de tarefas ou Mermaid. Por isso, o resultado final deve ser conferido no sistema de publicação.
Como Usar
Como usar
- Insira texto Markdown no editor à esquerda
- O painel direito exibe a pré-visualização em tempo real
- Use os botões da barra de ferramentas para inserir sintaxe comum
- A barra inferior mostra a contagem de palavras, caracteres e linhas
- O conteúdo é salvo automaticamente no armazenamento local do navegador
Recursos
Dicas de Edição
- A renderização da pré-visualização pode variar entre plataformas, então verifique a saída final no sistema de destino ao usar tabelas, HTML ou recursos Markdown estendidos.
- O auto-salvamento é útil durante a escrita, mas mantenha uma cópia separada de notas importantes antes de limpar os dados do navegador ou trocar de dispositivo.
Casos de uso
Princípio técnico
A renderização de Markdown geralmente tem três etapas: um tokenizador divide o texto em unidades sintáticas como títulos, parágrafos, listas e blocos de código; um analisador transforma o fluxo de tokens em uma árvore de sintaxe abstrata (AST) de acordo com as regras da gramática; um renderizador percorre a AST e produz o HTML correspondente. Bibliotecas JavaScript comuns incluem marked, markdown-it, remark e micromark — diferem em tamanho de pacote, velocidade e extensibilidade, mas todas seguem a especificação CommonMark. O CommonMark corrigiu as ambiguidades da gramática Markdown original (por exemplo, como indentar listas aninhadas, como encontrar o limite de código inline) para que diferentes implementações produzam o mesmo resultado. Sobre o CommonMark, o GitHub adicionou o GFM (GitHub Flavored Markdown), que inclui tabelas, listas de tarefas (- [ ]), tachado (~~), auto-links e blocos de código cercados; o GFM é o padrão de facto hoje, e a maioria das ferramentas Markdown modernas o habilita por padrão. O destaque de sintaxe em blocos de código é geralmente feito pelo highlight.js ou Prism.js, que reconhecem a tag de linguagem no momento da renderização e marcam palavras-chave, strings e comentários com classes CSS que um tema estiliza com cores. Para impedir que HTML fornecido pelo usuário dispare XSS, os renderizadores normalmente filtram a saída pelo DOMPurify ou um filtro de lista de permissões semelhante que remove script, iframe e atributos de evento on* — então colar o Markdown de outra pessoa não pode executar um script malicioso.
- Fluxo de análise: texto bruto passa por Tokenizador -> Analisador -> Renderizador para se tornar HTML, com a AST como representação intermediária.
- Padrões: CommonMark é a gramática oficial; o GFM a estende com tabelas, listas de tarefas, tachado, blocos de código cercados e auto-links.
- Comparação de bibliotecas: marked é pequeno e rápido, markdown-it possui um rico ecossistema de plugins, e remark baseia-se no ecossistema unified e é adequado para pipelines de processamento de documentos.
- Destaque de sintaxe: highlight.js ou Prism.js leem a tag de linguagem do bloco de código no momento da análise e marcam palavras-chave, strings e comentários com classes CSS.
- Proteção contra XSS: bibliotecas como DOMPurify filtram o HTML de saída contra uma lista de permissões, removendo script, iframe e atributos de evento on* para evitar injeção de scripts.
- Pré-visualização ao vivo: o editor escuta eventos de entrada, aplica debounce a cada alteração, reanálisa e atualiza o DOM do lado direito por diff para equilibrar responsividade e desempenho.
Exemplos
Títulos, listas e blocos de código
# Título 1
## Título 2
- Item de lista A
- Item de lista B
- Item de lista aninhado
```javascript
function hello() {
console.log('Hello Markdown');
}
```Tabelas
| Ferramenta | Tipo | Tamanho |
|------------|--------|---------|
| Vite | Build | Pequeno |
| Webpack | Build | Grande |
| Rollup | Bundle | Médio |Citações e links
> "Markdown permite que a escrita volte ao próprio conteúdo."
> -- John Gruber
Referência: [CommonMark Spec](https://commonmark.org)Perguntas frequentes
Qual variante de Markdown é suportada?
A maioria das implementações usa CommonMark mais as extensões do GitHub Flavored Markdown: tabelas, riscado, listas de tarefas, blocos de código com indicação de linguagem. Algumas incluem MathJax/KaTeX para blocos $math$ e Mermaid para diagramas. Confira a barra de ferramentas para ver o que está disponível.
O documento é enviado para algum servidor?
Não. A análise e renderização do Markdown acontecem no seu navegador usando uma biblioteca JS (geralmente markdown-it ou remark). Seu rascunho nunca sai do dispositivo.
Como funciona a pré-visualização ao vivo?
Conforme você digita, o painel de origem é analisado e renderizado em HTML no painel de pré-visualização. A rolagem sincronizada mantém os dois painéis alinhados combinando as posições dos parágrafos. A maioria das implementações também suporta tela cheia e alternância lado a lado.
Posso exportar o documento?
Sim — baixe como .md (o código-fonte bruto), HTML (renderizado, pronto para incorporar em uma página web) ou PDF (impresso pelo motor de impressão do navegador). A saída em PDF preserva títulos, listas, blocos de código e imagens incorporadas. Para PDFs com precisão de pixel, cole o HTML em um editor de texto profissional.
Ele salva meu rascunho se eu fechar a aba?
A maioria das implementações salva automaticamente no localStorage, então reabrir o mesmo navegador restaura o rascunho. Fechar uma janela anônima ou limpar os dados do site apaga tudo. Para uma persistência real, exporte o arquivo .md periodicamente para o seu sistema de arquivos ou repositório git.
As imagens são enviadas se eu colar?
Alguns editores armazenam imagens coladas como base64 inline (visível no código-fonte markdown). Outros enviam para um servidor de imagens — verifique o comportamento da página. Se a privacidade importa, salve as imagens primeiro no seu sistema de arquivos e referencie por caminho relativo.
Posso inserir tabelas, fórmulas matemáticas ou diagramas?
Tabelas do GitHub Flavored Markdown (| col1 | col2 |) funcionam em todo lugar. Blocos matemáticos ($x^2$) e diagramas Mermaid (```mermaid) precisam de suporte explícito; verifique os botões na barra de ferramentas. Onde houver suporte, a pré-visualização os renderiza em tempo real.