Preview Markdown

Markdown e uma linguagem de marcacao leve para criar texto formatado usando sintaxe de texto simples. Popular para documentacao, arquivos README e anotacoes, renderiza para HTML para exibicao. Esta ferramenta previsualize Markdown com renderizacao ao vivo, extrai estrutura do documento (titulos, links, imagens) e pode converter para HTML.

Especificacoes

Casos de Uso Comuns

  • Previsualizar arquivos README.md antes de comitar
  • Revisar formatacao de documentacao
  • Extrair todos os links de um documento para validacao
  • Converter Markdown para HTML para incorporacao
  • Analisar estrutura e navegacao do documento

Funcionalidades

  • Preview ao vivo com renderizacao HTML
  • Extrair estrutura do documento (titulos como sumario)
  • Listar todos os links e imagens no documento
  • Detectar e exibir blocos de codigo com dicas de linguagem
  • Analisar frontmatter (metadados YAML)
  • Converter para saida HTML limpa
  • Estatisticas de contagem de palavras e caracteres

Exemplos

README com Funcionalidades

Experimente →

Um README de projeto tipico com titulos, listas e codigo.

# My Project

A brief description of what this project does.

## Installation

```bash
npm install my-project
```

## Features

- **Fast** - Optimized for speed
- **Simple** - Easy to use API
- **Flexible** - Works with any framework

## Links

- [Documentation](https://docs.example.com)
- [GitHub](https://github.com/example/project)

Dicas

  • Use # para titulos (# H1, ## H2, ### H3, etc.).
  • Blocos de codigo usam tres crases com um identificador de linguagem opcional.
  • Links usam sintaxe [texto](url); imagens usam ![alt](url).
  • Frontmatter entre linhas --- pode conter metadados YAML.

Entendendo Preview Markdown

Markdown e uma linguagem de marcacao leve criada por John Gruber em 2004, projetada para ser legivel como texto simples enquanto converte de forma limpa para HTML. Sua sintaxe usa caracteres de pontuacao que visualmente sugerem sua formatacao: # para titulos, * para enfase, - para listas e crases para codigo. Arquivos Markdown permanecem uteis mesmo sem renderizacao, razao pela qual o formato domina para documentacao, arquivos README e escrita tecnica.

A especificacao CommonMark (2014) abordou as muitas ambiguidades do Markdown original. CommonMark define precisamente como casos limite sao tratados, e a maioria dos parsers modernos o implementa. GitHub Flavored Markdown (GFM) estende CommonMark com tabelas, listas de tarefas, tachado, URLs com autolink e blocos de codigo cercados com destaque de sintaxe.

GFM e o padrao de fato para arquivos README, descricoes de pull request, comentarios de issues e sites de documentacao. A maioria das plataformas de documentacao (Notion, Docusaurus, MkDocs, GitBook) suporta GFM ou um superconjunto dele.

Frontmatter e uma convencao comum para adicionar metadados estruturados a arquivos Markdown. Um bloco YAML delimitado por linhas --- no topo do arquivo pode conter titulo, data, autor e tags usados por geradores de sites estaticos (Astro, Hugo, Jekyll, Next.js) para construir navegacao e layouts de pagina.

Na pratica, "Markdown" quase sempre se refere a CommonMark ou GFM. A especificacao original do Markdown deixou muitos casos limite indefinidos, e CommonMark resolveu essas ambiguidades com uma especificacao estrita. GFM estende CommonMark com tabelas, listas de tarefas, tachado e URLs com autolink. Ao avaliar um parser ou renderizador Markdown, verificar sua conformidade com CommonMark e um indicador confiavel de quao bem trata casos limite.

Tabelas em GFM usam pipes (|) para separar colunas e hifens (-) para a linha divisoria do cabecalho. Alinhamento de colunas e controlado com dois pontos no divisor: :--- para alinhado a esquerda, :---: para centralizado e ---: para alinhado a direita. Tabelas sao uma extensao GFM e nao fazem parte da sintaxe Markdown original. Frontmatter, delimitado por linhas --- no inicio do arquivo, e um bloco de metadados YAML usado por geradores de sites estaticos para metadados de pagina como titulo, data, layout e tags. GitHub renderiza frontmatter como uma tabela no topo do arquivo, embora nem todos os renderizadores o processem.

Blocos de codigo cercados usam tres crases com um identificador de linguagem opcional apos as crases de abertura — por exemplo, uma linha com tres crases seguida de "javascript" inicia um bloco JavaScript com destaque de sintaxe. Os identificadores de linguagem disponiveis dependem da plataforma de renderizacao. Indentar codigo por quatro espacos tambem cria um bloco de codigo, mas sem a capacidade de especificar uma linguagem para destaque.

← Voltar para todas as ferramentas