Editor Markdown
Exemplo de Editor Markdown
Cabeçalho 2
Negrito Itálico Tachado
- Item de lista 1
- Item de lista 2
- Lista ordenada 1
- Lista ordenada 2
Citação
Código inline
// Bloco de código
console.log('Olá, Mundo!');
| Col1 | Col2 | Col3 |
|---|---|---|
| Dados | Dados | Dados |
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.
Ferramentas Relacionadas
Ferramenta de Deduplicação de Texto
Ferramenta gratuita de deduplicação de texto online com modos por linha, palavra, frase e parágrafo. Remova conteúdo duplicado com opções de maiúsculas e ordem.
Ferramenta de Conversão Chinês
Conversor chinês online gratuito para conversão de Chinês Simplificado para Tradicional. Suporte a padrões da China continental, Taiwan, Hong Kong, gerencie diferenças de vocabulário regional.
Ferramenta de Conversão Pinyin
Conversor online de chinês para Pinyin. Suporta marcas de tom, números de tom e sem tom. Personalize separador e capitalização. Converta caracteres chineses para Pinyin instantaneamente.
Ferramenta de Inversão de String
Ferramenta de reversão de string online gratuita com modos de texto completo, palavra por palavra, linha por linha. Processamento de texto divertido para várias necessidades.
Ferramenta de Teste Regex
Testador de regex online gratuito com correspondência em tempo real e resultados destacados. Suporte a biblioteca de regex comum, ajude a depurar e validar expressões regulares.
Ferramenta de Contagem de Palavras
Contador de palavras online gratuito com estatísticas em tempo real para caracteres, palavras, tempo de leitura e mais. Ferramenta essencial para escritores.
