Visualização de Markdown
Escreva Markdown e visualize o HTML ao vivo
Rascunho Markdown
Visualização ao Vivo
O que é Visualização de Markdown?
A Visualização de Markdown é uma ferramenta de renderização em tempo real que mostra exatamente como seu código-fonte Markdown aparecerá quando convertido para HTML. Usando uma interface de painel dividido, você escreve Markdown bruto no lado esquerdo enquanto o lado direito exibe a saída renderizada instantaneamente. Esse feedback visual imediato elimina as suposições sobre formatação — você pode ver como títulos aparecem, se links funcionam, como blocos de código são renderizados e se a sintaxe de tabelas está correta, tudo sem sair do editor.
CommonMark é a especificação padrão do Markdown que a maioria das ferramentas de visualização segue, garantindo renderização consistente entre plataformas. Esta ferramenta implementa parsing compatível com CommonMark, então a visualização que você vê corresponde a como seu conteúdo será renderizado em qualquer plataforma. Para recursos específicos do GitHub como listas de tarefas, tachado e autolinks, a visualização inclui suporte para extensões do GitHub Flavored Markdown.
Ferramentas de visualização são valiosas para qualquer criador de conteúdo que trabalha com Markdown. Redatores técnicos podem validar listas aninhadas complexas e formatação de blocos de código. Mantenedores de projetos open source podem garantir que tabelas de recursos são renderizadas corretamente. Desenvolvedores escrevendo mensagens de commit, descrições de pull request e comentários de issues podem formatá-los adequadamente antes de enviar. Blogueiros podem ver a tipografia e ênfase como seus leitores verão.
Como Usar a Visualização de Markdown
Siga estes passos para visualizar Markdown como HTML em tempo real. Cada passo usa os botões e painéis reais desta página.
Colar, Enviar ou Carregar Exemplo
Digite ou cole Markdown no painel esquerdo Rascunho Markdown, ou clique em Enviar para carregar um arquivo .md. Clique em Exemplo para ver docs de API de exemplo. Suporta CommonMark e GFM (tabelas, listas de tarefas, blocos de código).
Ver Visualização ao Vivo
O painel direito Visualização ao Vivo atualiza conforme você digita. Veja títulos, listas, tabelas e blocos de código renderizados. Sem atraso — feedback instantâneo.
Copiar ou Baixar HTML
Clique em Copiar HTML ou Baixar HTML para usar a saída. Use Limpar para recomeçar. Todo o processamento ocorre no seu navegador.
Quando Você Realmente Usaria Isso
Escrita e Edição de Documentação
Repositórios GitHub, projetos ReadTheDocs e sites de documentação construídos com MkDocs ou Hugo usam Markdown. Ferramentas de visualização permitem que você elabore e aperfeiçoe documentação sem esperar builds ou deploys.
Compondo Issues e PRs no GitHub
Ao escrever issues detalhadas ou descrições de pull request no GitHub, ferramentas de visualização permitem formatar sua mensagem perfeitamente. Use a visualização para verificar tabelas, blocos de código e formatação antes de enviar.
Criando Notas de Release e Changelogs
Releases de software requerem notas claras e bem formatadas. Use a visualização de Markdown para elaborar changelogs com formatação adequada, cabeçalhos de versão, listas de recursos e avisos de mudanças. Verifique que seu changelog está claro antes de adicioná-lo à release.
Perguntas Frequentes (FAQ)
A visualização mostra exatamente como meu conteúdo será renderizado em todos os lugares?
A visualização usa parsing compatível com CommonMark mais extensões GitHub Flavored Markdown, representando com precisão como seu conteúdo aparecerá na maioria das plataformas modernas. No entanto, algumas plataformas têm estilos CSS personalizados ou extensões adicionais. Verifique a documentação da plataforma de destino se precisar de correspondência visual exata.
Quais extensões Markdown são suportadas?
Esta visualização suporta sintaxe core CommonMark mais extensões GitHub Flavored Markdown: tabelas, listas de tarefas, tachado (~~texto~~), autolinks e sintaxe de menção. Não suporta todos os sabores possíveis de Markdown, mas cobre os recursos mais usados.
Posso copiar o HTML gerado?
Sim. Clique em "Copiar HTML" para copiar a saída HTML renderizada para sua área de transferência. Você pode então colá-lo em qualquer editor HTML, cliente de email ou formulário web que aceite HTML. O HTML é limpo e semanticamente correto.
Caracteres especiais são escapados corretamente na saída?
Sim. O parser escapa automaticamente caracteres especiais HTML (&, <, >, ", ') no conteúdo de texto, prevenindo ataques de injeção e erros de renderização. Se seu Markdown contém esses caracteres em texto regular, eles aparecerão corretamente na saída renderizada.
Como a ferramenta lida com quebras de linha?
A ferramenta segue as regras CommonMark: uma quebra de linha simples na fonte se torna um espaço na saída. Para criar uma quebra de linha real (<br>), use dois espaços no final da linha seguidos de uma nova linha, ou use uma barra invertida antes da nova linha. Para quebras de parágrafo, use uma linha em branco. A especificação CommonMark tem exemplos detalhados.
Posso incluir HTML bruto no meu Markdown?
Sim. Markdown permite blocos de HTML bruto e HTML inline. Se você escrever HTML diretamente no seu Markdown, ele será incluído como está na saída. Isso é útil para recursos que o Markdown não suporta nativamente. No entanto, reduz a portabilidade do seu código-fonte.