Pré-visualização Markdown

Pré-visualize Markdown como HTML renderizado

Markdown
Pré-visualização

Hello, Markdown

A quick bold word and some italics.

  • Bullet one
  • Bullet two
    • Nested
  • Bullet three
const greeting = 'hello world';
console.log(greeting);

Block quotes work too.

Col A Col B
1 2
3 4

Link

Qual tipo de Markdown é suportado?

A pré-visualização usa o parser `marked` configurado para Markdown do GitHub-Flavored (GFM): tabelas com `|` separadores, blocos de código cercados com marcadores ``` e dicas de linguagem, links automáticos para URLs, caixas de seleção de lista de tarefas (`- [ ]`), e riscado com `~~texto~~`.

A saída HTML é sanitizada antes da renderização, então colar Markdown não confiável não pode injetar tags de script ou folhas de estilo no seu navegador. Se você precisar de saída HTML bruta não sanitizada, use um parser dedicado localmente.

Casos de uso

  • Pré-visualizar README antes de commitar — veja como o GitHub renderizará títulos, blocos de código e listas.
  • Redigir documentação — escreva documentos de API em markdown e pré-visualize a formatação antes de colar no Notion ou em um wiki.
  • Compor postagens de newsletter — escreva em markdown e pré-visualize para Substack ou Beehiiv antes de colar.
  • Formatar respostas do Stack Overflow — pré-visualize cercas de código, listas e links antes de enviar.

Exemplos

Headings and emphasis
Entrada
# Title

**bold** and *italic* text.

- list item
- another
Saída
<h1>Title</h1>
<p><strong>bold</strong> and <em>italic</em> text.</p>
<ul><li>list item</li><li>another</li></ul>

Perguntas frequentes

Quais extensões de Markdown são suportadas?

Markdown do GitHub-Flavored: tabelas, blocos de código cercados, links automáticos, listas de tarefas, riscado. Notas de rodapé e advertências não são suportadas.

HTML é permitido dentro do Markdown?

Sim, mas a saída é sanitizada — `<script>`, `<style>`, e atributos de evento são removidos antes da renderização.

Posso exportar o HTML renderizado?

Use a visualização de código-fonte do seu navegador ou DevTools para copiar o HTML renderizado. Clique com o botão direito na pré-visualização e 'Ver Fonte do Quadro' se disponível.

Os blocos de código têm destaque de sintaxe?

Não — blocos de código cercados são renderizados com estilo monoespaçado, mas sem destaque de cor de linguagem. Adicione um processador Markdown como `markdown-it` + `highlight.js` localmente para isso.

A entrada é enviada para um servidor?

Não. A análise e a renderização acontecem no seu navegador.