Editor Markdown — Escrita com Pré-visualização
Editor Markdown com pré-visualização ao vivo, realce de sintaxe e exportação para HTML. Escreva documentação e READMEs no navegador sem cadastro ou instalação.
O que é o Editor Markdown?
O Editor Markdown é um ambiente de escrita online gratuito que renderiza uma pré-visualização ao vivo do seu Markdown enquanto você digita. O editor e a pré-visualização ficam lado a lado: digite à esquerda, veja a saída formatada à direita — instantaneamente, sem necessidade de atualizar a página. Ele lida com tudo, desde títulos e texto em negrito até blocos de código delimitados, tabelas e citações em bloco.
A ferramenta foi criada para desenvolvedores que escrevem READMEs, documentação técnica, rascunhos de blog e notas de versão — em qualquer lugar onde Markdown seja o formato de autoria. Em vez de enviar alterações para um repositório e aguardar um render de pré-visualização, ou instalar um plugin de editor local, você obtém uma pré-visualização renderizada com precisão no navegador. Quando terminar, exporte o arquivo como um arquivo .md para controle de versão ou como um arquivo .html completo e estilizado, pronto para uma página web. Sem conta, sem upload para servidor, sem configuração.
Recursos principais
- Pré-visualização Markdown ao vivo — Alimentado por
@uiw/react-md-editor, o editor renderiza a pré-visualização em tempo real usando o mesmo parsing de Markdown que a biblioteca inclui. As alterações aparecem na pré-visualização no momento em que você para de digitar um caractere. - Realce de sintaxe — Blocos de código delimitados (
javascript,python, etc.) renderizam com saída colorida por sintaxe no painel de pré-visualização. A própria visão de Markdown bruto do editor também aplica coloração de sintaxe para diferenciar títulos, links, negrito e trechos de código. - Exportar para HTML — "Download HTML" produz um documento
<!DOCTYPE html>completo com estilos CSS incorporados cobrindo fonte do corpo, blocos de código, citações em bloco e tabelas. O arquivo é baixado comodocument.htmle abre corretamente em qualquer navegador sem dependências externas. - Baixar como arquivo .md — "Download MD" salva o código-fonte Markdown bruto como
document.md, pronto para fazer commit em um repositório ou anexar a um ticket. - Copiar Markdown — Copia o texto Markdown bruto para a área de transferência para colar no GitHub, GitLab, Confluence, Notion ou qualquer campo que aceite Markdown.
- Copiar HTML — Copia o HTML interno renderizado do painel de pré-visualização. Útil quando você precisa colar conteúdo formatado em um editor de texto rico que aceita HTML.
- Barra de ferramentas de formatação comum — A barra de ferramentas do
@uiw/react-md-editorfornece botões para negrito, itálico, títulos, listas, links, imagens, código e muito mais. Não é necessário memorizar atalhos de teclado. - Painel de referência rápida — Uma folha de dicas de sintaxe abaixo do editor cobre as nove construções Markdown mais usadas: títulos, negrito, itálico, links, imagens, código inline, listas, citações em bloco e blocos de código delimitados.
Como usar o Editor Markdown
Passo 1: Começar a escrever ou carregar seu conteúdo
Quando a página carrega, o editor contém um documento de exemplo demonstrando títulos, texto em negrito e itálico, uma lista não ordenada, um bloco de código JavaScript delimitado, uma tabela, uma citação em bloco e um link. O painel de pré-visualização à direita mostra a saída renderizada desse exemplo.
Limpe o editor clicando no botão "Clear" na barra de ações, ou simplesmente selecione tudo e comece a digitar. A altura do editor é fixada em 600px com rolagem vertical habilitada para documentos mais longos.
Passo 2: Escrever Markdown usando a barra de ferramentas ou teclado
A barra de ferramentas na parte superior do editor inclui botões para as operações de formatação mais comuns. Clique em N para envolver o texto selecionado em asteriscos duplos para negrito, ou clique em I para envolvê-lo em asterisco simples para itálico. Os botões de título inserem prefixos #, ## ou ###. Os botões de bloco de código inserem um bloco de crase tripla com um marcador de linguagem.
Para blocos de código delimitados com realce de sintaxe, escreva:
def greet(name: str) -> str: return f"Hello, {name}!"
print(greet("world"))
A pré-visualização renderiza isso como um bloco de código colorido. O painel de referência rápida na parte inferior da página mostra todos os nove padrões de sintaxe de uma vez.
Passo 3: Verificar a saída renderizada no painel de pré-visualização
O painel direito é atualizado enquanto você digita. Role-o independentemente do editor para revisar o documento completo. O atributo data-color-mode="auto" significa que o editor e a pré-visualização se adaptam automaticamente à preferência de modo claro ou escuro do seu sistema operacional.
Verifique se:
- As tabelas renderizam com bordas e estilo de cabeçalho alternado
- Os links são clicáveis (eles usam atributos
hrefno HTML renderizado) - Os blocos de código têm as cores de sintaxe corretas para a linguagem que você especificou
- As imagens aparecem (se você referenciou URLs de imagens publicamente acessíveis)
Passo 4: Exportar seu documento
Escolha a exportação que corresponde ao seu caso de uso:
- Copiar Markdown — cole o código-fonte bruto em descrições de PR do GitHub, comentários do Jira, páginas do Notion ou qualquer campo Markdown
- Copiar HTML — cole o markup renderizado em editores de texto rico que aceitam entrada HTML
- Download MD — salva
document.mdna sua pasta de Downloads - Download HTML — salva
document.htmlcom estilos incorporados, pronto para hospedar como uma página web estática
O documento HTML exportado inclui um bloco <style> com padrões sensatos: pilha de fontes do sistema, layout centralizado max-width: 800px, fundo de código #f4f4f4, borda esquerda de citação em bloco e tabela de largura total com células com borda.
Passo 5: Recuperar trabalho anterior com o histórico
Os apoiadores premium podem usar o painel de Histórico abaixo do editor para restaurar qualquer documento salvo automaticamente anteriormente. Os usuários não premium devem copiar ou baixar seu trabalho antes de navegar para fora, pois o conteúdo do editor não é persistido entre sessões.
Exemplos práticos
Escrever um README de projeto
Um desenvolvedor está criando um README para uma nova ferramenta CLI. Ele escreve:
# my-cli
A command-line tool for batch file renaming.
## Installation
npm install -g my-cli
## Usage
my-cli --pattern "*.log" --prefix "archive-"
## Options
| Flag | Description | Default |
|------|-------------|---------|
| `--pattern` | Glob pattern for matching files | `*` |
| `--prefix` | String prepended to filenames | `""` |
| `--dry-run` | Preview changes without renaming | `false` |A pré-visualização ao vivo mostra a tabela com cabeçalhos de coluna, os blocos de código bash com realce de sintaxe e a hierarquia de títulos. Ele clica em "Download MD" para salvar o arquivo diretamente na raiz do projeto.
Criar uma página HTML estilizada a partir de documentação
Um redator técnico tem um documento Markdown descrevendo um endpoint de API. Ele cola o conteúdo, verifica a pré-visualização e clica em "Download HTML". O document.html resultante inclui CSS incorporado e renderiza corretamente quando aberto em um navegador ou enviado como anexo de e-mail — sem necessidade de folha de estilo externa.
Redigir um registro de alterações de versão
Um desenvolvedor escrevendo um registro de alterações da versão 2.4.0 usa o editor para estruturar o documento com títulos ## para "Breaking Changes", "New Features" e "Bug Fixes", usando listas não ordenadas sob cada um. Ele clica em "Copy HTML" para colar o conteúdo formatado diretamente na ferramenta de gerenciamento de versões da sua empresa, que aceita entrada HTML rica.
Dicas e boas práticas
A barra de ferramentas insere formatação ao redor do texto selecionado. Selecione uma palavra e clique no botão Negrito; a seleção se torna palavra. Se nada estiver selecionado, o botão insere um marcador como bold text no cursor.
Blocos de código delimitados requerem um identificador de linguagem para realce de sintaxe. Um bloco ` vazio renderiza como texto monoespaçado simples. Adicione o nome da linguagem imediatamente após as crases de abertura ( `typescript , `sql , `yaml ) para obter saída colorida.
Copiar HTML captura o HTML interno da pré-visualização ao vivo. A função handleCopyHtml lê document.querySelector('.w-md-editor-preview')?.innerHTML. Se a pré-visualização ainda não tiver sido renderizada (por exemplo, imediatamente após o carregamento da página), o HTML copiado pode estar vazio. Aguarde a pré-visualização ser populada antes de clicar em "Copy HTML".
O HTML baixado é autossuficiente. O arquivo document.html inclui todos os estilos necessários inline. Você pode enviá-lo por e-mail, hospedá-lo em um servidor de arquivos estáticos ou anexá-lo a um ticket sem ativos adicionais.
Limpar não pede confirmação. Clicar em "Clear" esvazia o editor imediatamente. Se você tiver trabalho não salvo, baixe ou copie primeiro.
Problemas comuns e solução de problemas
"O editor mostra um indicador de carregamento." O componente @uiw/react-md-editor é carregado de forma preguiçosa para evitar problemas de renderização do lado do servidor. O indicador aparece brevemente enquanto o bundle do editor carrega. Deve desaparecer em um ou dois segundos com uma conexão normal.
"Copiar HTML produziu saída vazia." A função lê o innerHTML do contêiner de pré-visualização. Se a pré-visualização ainda não tiver sido renderizada (incomum, mas possível em conexões muito lentas), isso pode retornar uma string vazia. Role o painel de pré-visualização para acionar uma renderização e tente novamente.
"Minha tabela não está renderizando." As tabelas Markdown requerem uma linha separadora de hífens entre a linha de cabeçalho e as linhas de dados: |------|------|. Certifique-se de que cada célula na linha de cabeçalho tenha uma célula separadora correspondente. Os caracteres de barra vertical (|) no início e no fim são opcionais, mas recomendados para consistência.
"O código delimitado não tem realce de sintaxe." Verifique se o identificador de linguagem está na mesma linha das crases de abertura sem espaço: `javascript e não ` javascript . Confirme também que o nome da linguagem está em minúsculas e corretamente digitado (python, não Python).
"O arquivo MD baixado não tem extensão no macOS." O macOS às vezes remove a extensão .md para arquivos que não reconhece como tipo padrão. Renomeie o arquivo para adicionar .md após baixá-lo, ou configure seu navegador para sempre perguntar onde salvar os downloads.
Privacidade e segurança
Toda a renderização de Markdown, conversão de HTML e exportação de arquivos acontece inteiramente no seu navegador. Nenhum conteúdo que você digita é transmitido para os servidores do Glyph Widgets ou a terceiros. O editor funciona offline uma vez que a página tenha carregado. Isso o torna seguro para documentação interna, especificações técnicas proprietárias e rascunhos contendo detalhes confidenciais de projetos.
Perguntas frequentes
O Editor Markdown é gratuito? Sim, completamente gratuito sem limites de uso. Não é necessário cadastro, assinatura ou pagamento de qualquer tipo.
Funciona offline? Uma vez que a página carrega e o bundle do editor é inicializado, todos os recursos de escrita, pré-visualização e exportação funcionam sem conexão de rede.
Meus dados estão seguros? Tudo que você digita permanece na memória do seu navegador. Nenhum conteúdo é enviado a um servidor. É seguro escrever documentação confidencial, referências de API internas ou notas privadas.
Qual variante de Markdown é suportada? O editor usa @uiw/react-md-editor, que é baseado em remark e suporta sintaxe CommonMark com extensões GitHub Flavored Markdown, incluindo tabelas, listas de tarefas e blocos de código delimitados com identificadores de linguagem.
Posso incorporar imagens? Sim, usando a sintaxe padrão de imagem Markdown: !alt text. A imagem deve ser publicamente acessível — caminhos de arquivos locais não funcionam em um contexto de navegador. A imagem renderiza na pré-visualização ao vivo imediatamente.
Quais linguagens são suportadas em blocos de código delimitados? A pré-visualização renderiza realce de sintaxe para qualquer linguagem que o pipeline subjacente remark/highlight.js suporte. Linguagens comuns — JavaScript, TypeScript, Python, Java, Go, Rust, SQL, Bash, YAML, JSON e muitas outras — funcionam com o identificador de linguagem adicionado ao delimitador de abertura.
O arquivo HTML baixado precisa de conexão à internet? Não. O document.html exportado contém todos os estilos inline em um bloco <style>. Nenhum framework CSS externo, recurso CDN ou fonte é carregado. Renderiza de forma idêntica offline.
Posso usar atalhos de teclado? O componente @uiw/react-md-editor suporta atalhos padrão de edição de texto (Ctrl/Cmd+B para negrito, Ctrl/Cmd+I para itálico) dependendo da plataforma. Os botões da barra de ferramentas são a maneira mais confiável de inserir formatação se os atalhos se comportarem de forma diferente no seu sistema operacional.
Como crio uma lista de tarefas? Use - [ ] para um item não marcado e - [x] para um item marcado:
- [x] Write first draft
- [ ] Review with team
- [ ] PublishO que acontece com meu conteúdo quando limpo o editor? O editor é redefinido para uma string vazia imediatamente. O conteúdo não é recuperável da própria ferramenta, a menos que você tenha usado anteriormente o painel de Histórico (recurso premium) ou copiado/baixado o conteúdo de antemão.
Ferramentas relacionadas
JSON Formatter — Formate dados JSON antes de incorporá-los na documentação Markdown.
Diff Checker — Compare duas versões de um documento Markdown para encontrar o que mudou entre os rascunhos.
Text Diff — Uma ferramenta de comparação focada em texto para auditar alterações de prosa na documentação.
Experimente o Editor Markdown agora: Markdown Editor