Markdown Preview: Editor e Prévia Local

Os elementos mais usados do Markdown: títulos de seis níveis, parágrafo, negrito, itálico, código na linha e em bloco cercado por três crases, lista com marcadores e numerada, citação, linha horizontal, link e tabela simples com barras verticais. A prévia atualiza enquanto você digita. O que ela não interpreta aparece como texto: lista de tarefas, texto riscado, nota de rodapé, imagem (sai como link) e código indentado por quatro espaços.

Não. A conversão de Markdown em prévia acontece inteiramente no navegador, e o texto não é transmitido, salvo nem registrado. Ao recarregar a página, ele volta ao exemplo inicial, porque nada fica guardado no aparelho. A única requisição que a ferramenta dispara é o registro de uso da estatística do site, uma vez por visita, quando você muda o texto, com o endereço da página e nada do que foi escrito.

Sim. A ferramenta converte o Markdown em uma árvore de elementos React, sem inserir HTML bruto na página. Isso elimina o risco de execução de scripts embutidos no texto. Nos links, só passam https, http, mailto, tel, caminho relativo e âncora da própria página; javascript:, data:, vbscript: e qualquer outro esquema viram uma âncora vazia. Isso vale também para os truques comuns de quem tenta passar por filtro, como escrever JavaScript: com maiúscula ou pôr um espaço antes do esquema.

Os três ficam acima do editor e trabalham no aparelho. Copiar MD leva o Markdown original, com a marcação. Copiar texto limpo leva só o texto, sem cerquilha, asterisco nem colchete, pronto para colar num campo que não entende Markdown. Baixar salva o conteúdo do editor como documento.md. Não há exportação para HTML nem para PDF: para isso, use o conversor da plataforma de destino, que conhece as extensões que ela aceita.

São quatro contagens do documento: palavras, caracteres, títulos e links. Palavras e links saem da mesma árvore que desenha a prévia, e não de uma limpeza do texto cru, então bem-vindo conta como uma palavra, e um link só conta quando foi reconhecido como link. Caracteres é o tamanho do texto com a marcação. Bloco de código fica fora das palavras, porque é código e não prosa. O exemplo inicial dá 15 palavras e 139 caracteres.

Pode colar, mas o HTML bruto não é removido nem executado: ele é escapado e aparece como texto, com as tags à vista. Escreva <b>oi</b> e a prévia mostra exatamente isso, em vez de um negrito. Use a sintaxe Markdown para formatar. É o que protege contra conteúdo malicioso e mantém a prévia previsível. O comentário de HTML, escrito entre <!-- e -->, também aparece como texto, então ele não serve para esconder anotações na prévia.

Abra o arquivo .md num editor de texto, copie o conteúdo e cole no campo Markdown desta página. A prévia aparece ao lado numa tela larga e embaixo no celular, com títulos, listas, tabelas e links já formatados, e muda a cada tecla. O arquivo não sai do aparelho. Imagem aparece como um ponto de exclamação seguido de link com o texto alternativo, porque a prévia não carrega arquivo nenhum. Para voltar a ter um arquivo depois de editar, use Baixar, que salva o texto do campo como documento.md.

Escreva a linha do cabeçalho com as colunas separadas por barra vertical, depois uma linha só com hífens e barras, e depois uma linha por registro: | Nome | Idade |, em seguida |---|---| e então | Maria | 30 |. As barras das pontas são opcionais, mas a linha de hífens não: sem ela a prévia lê o bloco como parágrafo. Dois-pontos na linha de hífens são aceitos, mas não mudam o alinhamento do texto na prévia.

Falta o espaço depois do sinal de cerquilha. O certo é # Título, com espaço; #Título, sem espaço, é lido como parágrafo comum, e o CommonMark diz o mesmo. De um a seis sinais dão os seis níveis de título. Nesta prévia a linha também precisa começar pelo sinal, enquanto o CommonMark aceita até três espaços antes dele. Na prévia, o título aparece com o tamanho do nível, mas não entra na estrutura de títulos desta página, que é do portal e não do seu documento.

Não. Os três são extensões que o GitHub e outras plataformas acrescentaram ao Markdown básico, e dessas extensões a prévia só interpreta a tabela. Uma lista de tarefas aparece como lista comum, com o [ ] à vista; texto entre dois tis de cada lado aparece com os tis; nota de rodapé fica como texto entre colchetes. O arquivo baixado guarda a marcação inteira, então a plataforma que aceita essas extensões vai mostrá-las quando você publicar lá.

Negrito é o texto entre dois asteriscos de cada lado, ou entre dois sublinhados. Itálico usa um asterisco ou um sublinhado de cada lado, e três asteriscos dão negrito e itálico juntos. Link é o texto entre colchetes seguido do endereço entre parênteses, como [ValorFinal](https://valorfinal.com.br). Código na linha vai entre crases. A prévia mostra o resultado na hora, e a tabela desta página põe cada marcação ao lado do que ela vira.