Pular para o conteúdo

Editor de Markdown

Markdown Editor

Edita Markdown com prévia ao vivo e exporta o HTML renderizado, com tabelas e listas de tarefas do GFM.

Um editor de Markdown com o resultado renderizado ao lado, o HTML por trás dele e um sumário dos títulos. O parser é a implementação própria de CommonMark deste repositório, que marca 99,8% no corpus de 652 exemplos da especificação.

🔒 Roda inteiramente no seu navegadormarkdownprevieweditorhtml

Markdown

Prévia

Exibição

Sobre o projeto

Um editor de Markdown com prévia ao vivo. Negrito, itálico, código e links.

Como começar

  1. Clone o repositório
  2. Rode o instalador
  3. Abra o aplicativo
Item Qtd. Valor
Notebook 2 2.400.000
Monitor 3 900.000

Uma citação, para dar ênfase.

const total = items.reduce((sum, item) => sum + item.price, 0);
  • [x] As listas de tarefas funcionam
  • [ ] Até as que não estão marcadas

Opções

Documento

palavras

66

caracteres

493

links

1

imagens

0

blocos de código

1

tabelas

1

Sumário

  • Sobre o projeto #sobre-o-projeto
  • Como começar #como-comecar

As âncoras são transliteradas em vez de codificadas com porcentagem, então “Instalação” vira instalacao: um link que sobrevive a ser colado no chat.

O analisador daqui é a implementação de CommonMark do próprio repositório — a mesma que o conversor para DOCX usa — e faz 99,8% nos 652 exemplos da especificação. As tabelas com barras do GFM são um acréscimo em cima dela.

Como usar

  1. Escreva ou cole o Markdown

    A prévia se atualiza enquanto você digita. Um bloco de front matter YAML no topo é reconhecido e deixado fora da prévia em vez de renderizado como uma linha horizontal.

  2. Mude para HTML quando precisar da saída

    O mesmo documento como HTML, pronto para copiar num CMS ou num modelo de e-mail. O download dá um arquivo completo.

  3. Use o sumário para conferir a estrutura de títulos

    Cada título com a âncora que vai receber. Um pulo de h2 para h4 aparece aqui na hora, e uma âncora duplicada também.

Perguntas frequentes

Por que o HTML bruto é descartado por padrão?

O CommonMark diz para deixá-lo passar, o que é certo para um documento que você escreveu e um buraco de cross-site scripting para um que você colou. A chave está ali, com um aviso, para os seus próprios documentos.

Minhas tabelas não renderizam

Tabelas com barras verticais são uma extensão do GitHub, não parte do CommonMark. A chave vem ligada por padrão; se está desligada, você está vendo o comportamento estrito da especificação, que renderiza as barras como texto.

Por que as âncoras estão romanizadas?

Para que um link para um título em coreano — ou com acentos — sobreviva a ser colado numa janela de chat. Uma âncora com codificação percentual é correta e ilegível, e vários sistemas a quebram no caminho.

Pode receber de

Em seguida

Estas aceitam o que esta ferramenta produz, então o resultado pode ir direto.