Softonic

Visualizador de Markdown

Etapa 1 / 2
Próximo

Digite à esquerda, veja a renderização HTML à direita. O visualizador fala Markdown com estilo GitHub: tabelas, listas de tarefas, blocos de código cercados com destaque de sintaxe, tachado, URLs autolinkadas e HTML inline. Útil para redigir um README antes de enviar, verificar como um comentário ficará em um PR ou apenas aprender a sintaxe Markdown observando cada tecla ser renderizada.

Como usar o visualizador

  1. 1

    Escreva Markdown

    O painel esquerdo recebe Markdown bruto. Cada alteração re-renderiza instantaneamente o painel direito.

  2. 2

    Veja a pré-visualização HTML

    O painel direito mostra a saída renderizada estilizada como o GitHub.

  3. 3

    Alternar modo

    Visualização lado a lado, apenas pré-visualização ou apenas fonte para escrita sem distrações.

  4. 4

    Copie o HTML

    Pegue o HTML renderizado se precisar colá-lo em um cliente de email ou CMS.

O que este visualizador suporta

  • CommonMark: cabeçalhos, parágrafos, ênfase, listas, citações, blocos de código, links, imagens, regras horizontais.
  • Extensões GFM: tabelas com alinhamento de coluna, listas de tarefas (- [ ] e - [x]), tachado com ~~, URLs autolinkadas e blocos de código cercados com dicas de linguagem.
  • Destaque de sintaxe: mais de 100 idiomas via highlight.js, JavaScript, Python, Go, Rust, SQL, YAML, etc.
  • HTML bruto: HTML inline é passado (sanitizado para segurança).
  • Matemática (opcional): $...$ inline e $$...$$ bloco se você habilitar a extensão de matemática.

Não suportado

  • Links wikilinks estilo Obsidian personalizados ([[Página]]), esses são exclusivos do Obsidian.
  • Divisões cercadas do Pandoc (:::), exclusivos do Pandoc.
  • Includes do lado do servidor ou tags de template {% ... %}.

Usos típicos

  • Redigir um README fora do IDE e colar a versão final.
  • Verificar a formatação de comentários de PR antes de postar, a caixa de comentários do GitHub não pré-visualiza blocos de código corretamente.
  • Converter notas em HTML quando você precisa colar conteúdo estilizado em um email ou em um CMS que aceita HTML bruto.
  • Ensinar Markdown, a visualização lado a lado torna a sintaxe óbvia.

Desempenho

A renderização usa um parser Markdown-it com o plugin GFM, funcionando inteiramente no navegador. Documentos de algumas centenas de KB renderizam em milissegundos; documentos muito grandes (um livro inteiro em um único arquivo) podem engasgar enquanto você digita, divida-os em capítulos se isso acontecer.

Exportando

  • Copiar HTML obtém o <div> com o conteúdo renderizado, incluindo classes estilizadas.
  • Baixar .md salva a fonte.
  • Imprimir para PDF a partir do diálogo de impressão do seu navegador produz uma cópia PDF estilizada da visualização renderizada.

Perguntas frequentes

O GitHub aplica seu próprio CSS sobre o GFM. A saída HTML deve corresponder; o estilo (fontes, espaçamento) é deles. Para paridade exata, use o alternador de tema “renderizado no GitHub”.

Sim, se você habilitar a extensão de matemática, inline $...$ e bloco $$...$$ renderizam com KaTeX. Está desativado por padrão para manter o peso da página baixo.

É sanitizado, tags seguras como <div>, <span>, <table>, <img> passam; <script> e manipuladores de eventos inline são removidos.

Centenas de KB funcionam suavemente. Para arquivos muito grandes, desative a renderização ao vivo e renderize sob demanda.

A renderização é totalmente do lado do cliente. O conteúdo não é enviado a lugar nenhum. Se você atualizar a página, os rascunhos são perdidos, a menos que o navegador preserve o estado do formulário.

Ferramentas relacionadas

Gerador de cards CSS

Crie um card com seu título, texto e link opcional. Ajuste cores, borda, espaçamento, sombra e efeito ao passar o mouse. Depois copie ou baixe o HTML e o CSS.

Contador de FPS

Meça o FPS do navegador com requestAnimationFrame: suavização, taxa de quadros mínima e máxima, limite de alerta e gráfico opcional. Roda localmente, sem upload nem API.

Gerador de textura de ruído

Gere uma textura de ruído em SVG que se repete sem emendas, com opacidade, frequência do grão, tipo de ruído e cor de fundo ajustáveis, e copie o CSS já pronto.

Gerador de Configuração Webpack

Crie um webpack.config.js para webpack 5 a partir de um formulário curto: defina o entry, a pasta de saída e o modo, e ative TypeScript, Babel, um loader CSS, HtmlWebpackPlugin e um servidor de desenvolvimento.

Desofuscador de JavaScript

Desofusque JavaScript minificado ou empacotado com renomeação de variáveis, decodificação de arrays de strings, reversão de achatamento de fluxo de controle e embelezamento.

Conversor de base numérica

Converta números entre binário, octal, decimal, hexadecimal e qualquer base personalizada de 2 a 36, com o detalhamento posicional.

Ferramenta disponível em outros idiomas