Visualizador de Markdown

O que é Markdown?

Markdown é uma linguagem de marcação leve criada por John Gruber em 2004. Ela utiliza símbolos de formatação em texto simples — asteriscos, cerquilhas e hífens — para indicar estrutura: títulos, negrito, itálico, listas, links e blocos de código. Um visualizador de Markdown renderiza esse texto simples em HTML formatado para que você veja exatamente como o documento final ficará antes de publicá-lo. A especificação original foi descrita na documentação Daring Fireball de Gruber, e o formato foi posteriormente formalizado como CommonMark.

Markdown tornou-se o formato padrão de escrita para documentação de desenvolvedores, arquivos README, geradores de sites estáticos (Jekyll, Hugo, Astro), wikis e bases de conhecimento. GitHub, GitLab, Bitbucket, Stack Overflow, Reddit e Notion oferecem suporte nativo a Markdown. Como o código-fonte é texto simples, arquivos Markdown são triviais de versionar com Git, comparar entre branches e mesclar sem conflitos em seções não sobrepostas.

Uma ferramenta de pré-visualização de Markdown analisa a entrada e a converte para HTML em tempo real. Isso permite identificar erros de formatação, links quebrados e aninhamentos inesperados antes de confirmar um arquivo ou publicar uma página. Este visualizador roda inteiramente no seu navegador sem nenhuma requisição ao servidor, portanto você pode trabalhar em documentações privadas ou sensíveis sem enviar conteúdo pela rede.

Por que usar um visualizador de Markdown online?

Escrever Markdown em um editor simples sem pré-visualização significa adivinhar o resultado final. Um visualizador ao vivo fecha esse ciclo de feedback instantaneamente.

Casos de uso da pré-visualização de Markdown

Referência de sintaxe Markdown

A tabela abaixo mapeia a sintaxe Markdown mais comum ao seu resultado renderizado e ao elemento HTML correspondente. Isso cobre a base CommonMark que praticamente todo parser Markdown suporta.

Variantes de Markdown comparadas

Diferentes plataformas estendem a especificação original do Markdown com recursos extras. Saber qual variante você está usando ajuda a evitar sintaxes que falham silenciosamente em outro renderizador.

Exemplos de código: renderizando Markdown programaticamente

Quando você precisa renderizar Markdown dentro de uma aplicação em vez de uma ferramenta do navegador, use uma dessas bibliotecas. Cada exemplo converte uma string Markdown em uma string HTML.

import { marked } from 'marked'

const md = '# Hello\n\nThis is **Markdown**.'
const html = marked(md)
// → "<h1>Hello</h1>\n<p>This is <strong>Markdown</strong>.</p>\n"

// With options
marked.setOptions({ gfm: true, breaks: true })
const gfmHtml = marked('Line one\nLine two')
// → "<p>Line one<br>Line two</p>\n"

import markdown

md = '# Hello\n\nThis is **Markdown**.'
html = markdown.markdown(md)
# → '<h1>Hello</h1>\n<p>This is <strong>Markdown</strong>.</p>'

# With extensions
html = markdown.markdown(md, extensions=['fenced_code', 'tables'])

# Convert a file
with open('README.md') as f:
    html = markdown.markdown(f.read(), extensions=['extra'])

package main

import (
	"bytes"
	"fmt"
	"github.com/yuin/goldmark"
)

func main() {
	source := []byte("# Hello\n\nThis is **Markdown**.")
	var buf bytes.Buffer
	if err := goldmark.Convert(source, &buf); err != nil {
		panic(err)
	}
	fmt.Println(buf.String())
	// → <h1>Hello</h1>
	// → <p>This is <strong>Markdown</strong>.</p>
}

# Convert Markdown file to HTML
pandoc README.md -f markdown -t html -o output.html

# Convert with GitHub Flavored Markdown
pandoc README.md -f gfm -t html --standalone -o output.html

# Pipe from stdin
echo '# Hello **world**' | pandoc -f markdown -t html
# → <h1>Hello <strong>world</strong></h1>

Perguntas frequentes