Toolbox Hub
Todas as ferramentas

Markdown Preview

Live Markdown preview

Live Markdown preview Executa localmente no seu navegador

About the

O Markdown Preview renderiza seu Markdown conforme você digita, em uma visualização lado a lado, seguindo CommonMark com as extensões GitHub que a maioria das pessoas realmente usa: tabelas, listas de tarefas, blocos de código protegidos, tachados e links automáticos. É a maneira mais rápida de verificar um README antes de enviá-lo, porque as diferenças entre a aparência de Markdown no código-fonte e a aparência renderizada não são óbvias, e a sintaxe da tabela em particular falha silenciosamente quando um único pipe ou traço está errado. O HTML renderizado também pode ser copiado se você precisar dele em algum lugar que não processe o próprio Markdown.

Where people use the

  • Verificar se um README é renderizado corretamente antes de enviá-lo.
  • Elaboração de notas de lançamento ou de um changelog com visualização ao vivo do resultado.
  • Convertendo um documento Markdown em HTML para um CMS que não aceita Markdown.
  • Revendo a solicitação pull Markdown de outra pessoa e vendo como ficará.

How to use the

  1. 1

    Cole ou escreva seu Markdown

    O editor aceita qualquer coisa, desde um único parágrafo até um documento completo com títulos, listas, links e limites de código.

  2. 2

    Assista ao painel renderizado

    A visualização é atualizada a cada pressionamento de tecla, portanto, uma tabela quebrada ou uma cerca não fechada aparece imediatamente, e não após uma etapa de publicação.

  3. 3

    Corrija a fonte, não a visualização

    A visualização é somente leitura. Quando algo é renderizado incorretamente, a causa quase sempre é uma linha em branco ausente antes de uma lista ou cabeçalho de tabela sem uma linha delimitadora.

  4. 4

    Copie o HTML se precisar

    Mude para a visualização HTML para obter a marcação gerada, o que é útil para colar em um CMS que espera HTML em vez de Markdown.

Dicas e práticas recomendadas

  • Deixe uma linha em branco antes e depois de cada elemento do bloco; os bugs de renderização mais misteriosos são uma linha em branco faltando.
  • Use blocos de código protegidos com um nome de idioma para que o código seja destacado em vez de tratado como texto simples.
  • Mantenha uma frase por linha em documentos longos; torna as diferenças legíveis mais tarde.

Perguntas frequentes

Qual especificação Markdown é usada?

CommonMark como base, além das extensões Markdown com sabor do GitHub para tabelas, listas de tarefas, código protegido e tachado. Essa combinação cobre o formato README no GitHub, GitLab e na maioria dos sites de documentação.

Por que minha tabela não está sendo renderizada?

Uma tabela precisa de uma linha de cabeçalho seguida imediatamente por uma linha delimitadora de travessões, com uma linha em branco antes do bloco. Cada linha deve ter o mesmo número de tubos que o cabeçalho. Qualquer um dos que faltam transforma tudo em um parágrafo de texto com barras verticais.

Por que os itens da minha lista se fundiram em um parágrafo?

Markdown precisa de uma linha em branco entre um parágrafo e uma lista que o segue. Sem ele, os marcadores de lista são tratados como texto comum.

Suporta LaTeX ou matemática?

A renderização matemática precisa de uma biblioteca separada, como KaTeX ou MathJax, e uma sintaxe diferente. Uma expressão de cifrão aqui será renderizada como texto simples.

O HTML bruto é permitido?

Sim, o HTML embutido passa direto, que é o que o GitHub também faz. Se você publicar a saída em qualquer lugar público, limpe-a primeiro, porque o HTML bruto também é a forma como os scripts são injetados.

Para onde vai meu texto?

Em lugar nenhum. A análise e a renderização acontecem no seu navegador com uma biblioteca JavaScript Markdown. Nada é salvo ou transmitido, então o rascunho desaparece quando você fecha a guia, a menos que você o copie.

Ferramentas relacionadas