Como pré-visualizar Markdown antes de publicar um README ou artigo

O que significa "pré-visualizar" Markdown

Resposta rápida Pré-visualizar Markdown é ver, em tempo real, como o teu texto simples (com marcadores como #, ** ou -) vai ficar depois de convertido em HTML formatado — sem precisares de publicar nada primeiro para confirmar.

Quando escreves um ficheiro README para o GitHub, um artigo de blogue ou notas de reunião em Markdown, estás a escrever texto simples com uma sintaxe específica: um # no início da linha vira um título, **texto** fica em negrito, uma linha começada por - vira um item de lista. O problema é que, a olho nu num editor de texto simples, esses marcadores continuam visíveis como caracteres — não como formatação. É aí que entra a pré-visualização: um painel ao lado (ou por baixo) do editor que mostra o resultado final em HTML, atualizado automaticamente enquanto escreves.

Isto é especialmente útil antes de submeteres um pull request no GitHub, publicares um artigo num CMS que aceita Markdown, ou enviares notas técnicas a um colega — evita surpresas como títulos que não aparecem, listas mal indentadas ou tabelas desalinhadas.

Nota: a pré-visualização não altera o teu ficheiro original — mostra apenas como o Markdown seria interpretado. O ficheiro .md continua a ser texto simples, editável em qualquer editor.

Tabelas GFM: o erro mais comum

Resposta rápida Uma tabela em GitHub Flavored Markdown (GFM) precisa de uma linha de cabeçalho, uma linha de separação com traços e dois pontos opcionais para alinhamento, e depois linhas de dados — todas separadas por barras verticais |. Se o número de colunas não bater certo entre linhas, a tabela desalinha-se na pré-visualização.

As tabelas são provavelmente o elemento onde mais erros de sintaxe acontecem, porque exigem alinhar mentalmente várias linhas de texto. Um exemplo hipotético de tabela de despesas mensais, tal como poderia aparecer num artigo:

Categoria	Valor (exemplo)	% do total
Renda	`650 €`	46%
Alimentação	`320 €`	23%
Transportes	`180 €`	13%
Outros	`250 €`	18%

Os valores acima são meramente ilustrativos, para mostrares como uma tabela GFM fica formatada — não são estatísticas reais de despesas de ninguém. O código-fonte para gerar esta tabela seria algo como | Categoria | Valor | % |, seguido de uma linha | --- | --- | ---: |, e depois cada linha de dados. Se te esqueceres de uma barra vertical ou de uma coluna numa das linhas, a tabela quebra visualmente na pré-visualização — e é exatamente esse tipo de erro que a pré-visualização ajuda a apanhar antes de publicares.

GFM (GitHub Flavored Markdown): a variante de Markdown usada pelo GitHub, que acrescenta tabelas, listas de tarefas, texto rasurado (~~texto~~) e deteção automática de ligações ao Markdown padrão.

Listas de tarefas e notas de rodapé

Resposta rápida Uma lista de tarefas escreve-se com - [ ] para pendente e - [x] para concluída, tornando-se uma caixa de verificação clicável. Uma nota de rodapé usa uma referência como [^1] no texto e a sua definição noutro ponto do documento, aparecendo numerada no fim da pré-visualização.

As listas de tarefas são muito comuns em ficheiros README e em notas de reunião — por exemplo, um checklist como "- [x] Rever orçamento" e "- [ ] Confirmar fornecedor" aparece na pré-visualização como duas caixas de verificação, uma já marcada. Numa boa ferramenta de pré-visualização, podes clicar diretamente na caixa e ver o código markdown atualizar-se sozinho.

As notas de rodapé são úteis em artigos mais longos ou textos académicos, quando queres citar uma fonte sem interromper o fluxo do texto principal. Escreves a referência onde precisas ([^fonte]) e defines o conteúdo mais abaixo no documento; a pré-visualização junta automaticamente todas as notas numa secção própria, numeradas por ordem de aparecimento, com uma ligação para voltares ao ponto de origem.

Cenário prático: imagina que estás a escrever um artigo de blogue com três referências a fontes externas e uma checklist de revisão no final. Sem pré-visualização, só saberias se a numeração das notas ficou correta e se as caixas de verificação renderizam bem depois de publicares — com pré-visualização, confirmas tudo em segundos, ainda no rascunho.

Escreve o teu Markdown e vê a pré-visualização HTML instantaneamente, com tabelas GFM, listas de tarefas e notas de rodapé — grátis e no navegador.

Experimentar a ferramenta →

Copiar, exportar e partilhar o resultado

Resposta rápida Depois de confirmares que a pré-visualização está correta, podes copiar apenas o código HTML gerado, descarregar um ficheiro .html completo ou o próprio .md, ou usar a função de imprimir do navegador para guardar como PDF.

Assim que o resultado na pré-visualização estiver como querias, os passos seguintes dependem de onde vais publicar:

Se vais colar o conteúdo num CMS ou num editor de e-mail, copia apenas o HTML gerado.
Se precisas do ficheiro fonte para o GitHub ou outro repositório, descarrega o .md original.
Se queres um documento autónomo para partilhar por e-mail ou arquivo, descarrega o .html completo ou guarda como PDF através da função de impressão.

Todo este processo pode acontecer inteiramente no navegador, sem que o texto seja enviado para nenhum servidor — o que é relevante se estiveres a rascunhar conteúdo ainda não público, como notas internas ou um artigo antes da data de publicação.

Perguntas frequentes

Como se pré-visualiza um ficheiro Markdown antes de o publicar?

Cola o texto markdown num editor com pré-visualização em direto, ou importa diretamente o ficheiro .md. A pré-visualização mostra exatamente como o título, as listas, as tabelas e os blocos de código vão aparecer depois de convertidos em HTML — sem precisares de publicar nada primeiro para verificar.

Preciso de instalar algum programa para pré-visualizar Markdown?

Não. Uma ferramenta de pré-visualização Markdown que funcione no navegador dispensa qualquer instalação, extensão ou conta. Basta abrir a página, escrever ou colar o texto, e a pré-visualização HTML atualiza-se instantaneamente enquanto escreves.

As tabelas em Markdown ficam sempre alinhadas na pré-visualização?

Só se a sintaxe GitHub Flavored Markdown (GFM) estiver correta: uma linha de cabeçalho, uma linha de separação com traços (e dois pontos opcionais para alinhamento), e depois as linhas de dados, todas separadas por barras verticais |. Se uma linha tiver menos colunas do que o cabeçalho, a tabela pode desalinhar-se — a pré-visualização ajuda precisamente a apanhar esse erro antes de publicares.

Consigo exportar a pré-visualização para HTML ou PDF?

Sim, uma boa ferramenta de pré-visualização Markdown permite copiar o código HTML gerado, descarregar um ficheiro .html completo, ou usar a função de impressão do navegador para guardar a pré-visualização como PDF — tudo sem enviar o teu texto para nenhum servidor.

O que acontece às notas de rodapé e às listas de tarefas na pré-visualização?

As notas de rodapé (escritas como [^1] no texto e definidas noutro ponto do documento) aparecem numeradas e agrupadas numa secção própria no fim da pré-visualização, com ligações de ida e volta. As listas de tarefas (- [ ] e - [x]) tornam-se caixas de verificação clicáveis, tal como aparecem no GitHub.

Nota de metodologia: este artigo é informativo e explica funcionalidades da ferramenta de pré-visualização Markdown do ToolPico. Os valores numéricos apresentados na tabela de exemplo são fictícios, apenas para ilustrar a formatação — não constituem dados financeiros reais nem aconselhamento de qualquer tipo.