Prévia de Markdown com tabelas, listas de tarefas e imagens
Barras verticais, hifens e dois-pontos bastam para montar uma tabela em Markdown, e esta prévia de Markdown a desenha enquanto você digita. O código-fonte fica no painel da esquerda, a página renderizada no da direita. Use-a para conferir o rascunho de um README, um changelog ou o comentário de um chamado antes de colá-lo em outro lugar. Um contador acima dos painéis mostra as palavras e os caracteres do seu código-fonte.
Que sintaxe a prévia renderiza
A página usa a biblioteca marked no modo GitHub-flavoured. Ela renderiza títulos do nível 1 ao 6, negrito, itálico, ~~tachado~~, código em linha, blocos de código cercados, citações, listas ordenadas e não ordenadas, listas aninhadas, listas de tarefas, linhas horizontais, links, imagens e tabelas. Um endereço solto como https://example.com vira um link sem colchetes. As listas de tarefas mostram caixas de seleção em que você não pode clicar.
Uma quebra de linha no código-fonte dá uma quebra de linha na saída. Uma linha em branco começa um novo parágrafo. Um rótulo de linguagem depois da cerca de abertura, como js, é aceito, mas o código não recebe cores.
Escrevendo uma tabela: linha de cabeçalho, linha delimitadora, dois-pontos
Uma tabela precisa de uma linha de cabeçalho e, abaixo dela, uma linha delimitadora de hifens. Os dois-pontos na linha delimitadora definem o alinhamento: :-- é à esquerda, :-: é centralizado e --: é à direita. As barras externas são opcionais. Escreva \| quando uma célula precisar conter uma barra vertical. Negrito, itálico, código e links funcionam dentro das células.
Uma linha com poucas células ganha células vazias no fim. Células além do cabeçalho são descartadas. Uma tabela pode vir logo depois de uma linha de texto, sem linha em branco. Mas uma célula guarda só uma linha de texto em linha: uma lista ou um segundo parágrafo não cabe, e um <br> digitado aparece como texto. Uma tabela larga rola para o lado dentro da prévia.
Usando os dois painéis e o divisor
- Digite ou cole Markdown no painel "Código-fonte Markdown". O painel "Prévia ao vivo" se atualiza a cada tecla.
- Arraste o divisor entre os painéis com o mouse, o dedo ou uma caneta. Um clique duplo o redefine para 50/50. Pelo teclado, foque o divisor e aperte Esquerda ou Direita (2 por cento), Shift com uma seta (10 por cento), Home, End ou Enter (redefinir).
- Aperte "Visualização ampliada" para preencher a tela. A largura dos painéis permanece como você definiu.
- Aperte "Copiar HTML" para copiar o corpo HTML higienizado, ou "Salvar como HTML" para baixar
document.htmlcom uma pequena folha de estilo que inclui tabelas.
A largura fica entre 15 e 85 por cento. O navegador a lembra no armazenamento local deste dispositivo. Abaixo de 860 px os painéis se empilham e o divisor é ocultado.
HTML bruto, links e imagens remotas
O HTML que você digita no código-fonte é mostrado como texto. Ele nunca é executado. Os links mantêm apenas estes destinos: http, https, mailto, #âncora e caminhos relativos. Qualquer outro link perde o destino.
Imagens remotas não são carregadas na prévia, porque carregar uma imagem faz o seu navegador contatar o site que a hospeda. Um espaço reservado com o texto alternativo toma o lugar delas. Ligue "Carregar imagens remotas" para vê-las. Imagens incorporadas como data:image/png;base64, (também JPEG, GIF, WebP, AVIF) sempre aparecem. O HTML copiado e salvo mantém cada tag de imagem com o seu endereço.
O que falta e para onde vai o seu texto
Não há coloração de sintaxe, notas de rodapé, matemática, códigos curtos de emoji como :smile: nem front matter. Um bloco entre duas linhas --- aparece como uma linha e um título. Os dois painéis não rolam juntos.
As bibliotecas marked e dompurify são carregadas quando a página abre. Se o carregamento falhar, a prévia mostra uma mensagem. Depois disso, o seu Markdown é convertido no navegador e não é enviado a lugar nenhum. Você pode conferir isso no painel de rede. A área de transferência só é usada quando você aperta "Copiar HTML", e um arquivo só é criado quando você aperta "Salvar como HTML".
Perguntas frequentes (FAQ)
| --- | --- |.