Esta página é a referência de escrita do blog e, ao mesmo tempo, o teste
visual de cada elemento. Se algo aqui aparecer quebrado, o CSS quebrou.
Ritmo do texto
Uma quebra de linha simples no Markdown vira uma quebra de linha de verdade.
Isto está em três linhas no arquivo
e aparece em três linhas na página.
O ritmo que você digita é o ritmo que sai.
Uma linha em branco continua abrindo um parágrafo novo, com o espaço maior.
A primeira letra de um post ganha capitular automaticamente. Você não
precisa fazer nada.
Formatando uma linha só
Esta é a peça central para quem escreve em frases curtas.
Uma marca {.classe} no fim de uma linha vale só para aquela linha.
A mesma marca sozinha na própria linha vale para o parágrafo inteiro.
É a posição que decide, e não há sintaxe nova para aprender.
Ele apertou o botão de pânico.
Ele estava preso.
Entre os andares 10 e 9.
Ele apertou o botão de pânico.
Ele estava preso. {.solo}
Entre os andares 10 e 9.
As classes disponíveis:
Isto é .solo — a frase sai do fluxo e ganha ar dos dois lados.
Isto é .peso — a frase que carrega o parágrafo.
Isto é .centro.
Isto é .direita.
Isto é .recuo — deslocado, como um pensamento de lado.
Isto é .sussurro — menor e mais claro, para um aparte.
Isto é .pausa — só ar depois, sem mudar o corpo.
E esta é uma linha comum, para comparação.
Dá para combinar: {.centro .sussurro}.
E para pendurar um id de âncora: {#marca} ou {.centro #marca}.
Aplicada ao parágrafo inteiro, a marca vai sozinha na última linha:
Todo este parágrafo está recuado.
Inclusive esta segunda linha.
Todo este parágrafo está recuado.
Inclusive esta segunda linha.
{.recuo}
Diálogo
Cada linha vira uma fala, com travessão e recuo pendente. Se você já
escrever o travessão, ele não é duplicado.
Essa porcaria travou outra vez. Vou chamar a equipe de manutenção.
É a quarta vez essa semana.
Até parece que eles querem ganhar dinheiro fácil para abrir a porta.
{% dialogo %}
Essa porcaria travou outra vez.
É a quarta vez essa semana.
{% enddialogo %}
Para uma fala isolada no meio da prosa, existe a classe .fala:
Ele abriu a boca e o interfone chiou outra vez.
A manutenção chegou.
O elevador chacoalhou.
Verso
Bloco em que cada quebra de linha é intencional e a indentação é preservada. Uma linha longa que não couber quebra com recuo, como em poesia impressa.
{% verso %}
Mochila nas costas,
celular na mão,
porta trancada
{% endverso %}
Epígrafe
Abertura de texto, alinhada à direita:
O aprendizado acontece primeiro entre pessoas.
{% epigrafe "Lev Vygotsky" %}
O texto da epígrafe.
{% endepigrafe %}
Separadores
Três hifens no Markdown (---) não viram uma linha dura: viram um asterismo
centralizado, para pular de cena sem abrir uma seção nova.
Também dá para escrever {% separador %}, que faz a mesma coisa de forma
explícita.
Destaque
Para tirar uma frase do corpo e dar peso a ela:
Regras que existem apenas para manter as coisas como são.
Com atribuição, passe a fonte como argumento:
O aprendizado acontece primeiro entre pessoas, depois dentro da pessoa.
{% destaque "Lev Vygotsky" %}
O texto da citação.
{% enddestaque %}
Caixas
Para um aparte que não pertence ao fio principal:
{% nota "Título opcional" %}
Conteúdo da caixa.
{% endnota %}
{% aviso %}
Conteúdo do aviso.
{% endaviso %}
Imagens
Coloque os arquivos em src/img/. Uma figura com legenda:
{% figura "/img/foto.jpg", "Legenda da foto", "Texto alternativo" %}
O terceiro argumento é o texto alternativo, para quem usa leitor de tela. Se
você omitir, a legenda é reaproveitada — mas escrever os dois é melhor: a
legenda comenta a foto, o alternativo descreve.
Uma galeria em grade, um arquivo por linha, legenda depois da barra:
{% galeria %}
/img/a.jpg | Manhã
/img/b.jpg | Tarde
/img/c.jpg | Noite
{% endgaleria %}
A grade se ajusta sozinha à largura disponível e cada foto vira link para o
arquivo em tamanho cheio.
Notas de rodapé
Notas numeradas com [^1] são recolhidas para o fim do texto[1] e
ganham um link de volta para o ponto de origem[2].
Sumário
Posts com três ou mais ## ganham um sumário automático no topo. Não há nada
para escrever — ele aparece sozinho quando o texto é longo o bastante.
Classes avulsas
Com markdown-it-attrs dá para pendurar uma classe em qualquer bloco:
Um parágrafo que precisa de tratamento especial.
{.callout}
Código
Blocos cercados com três crases e a linguagem:
for f in *.txt; do mv "$f" "${f%.txt}.md"; done
Código inline fica entre crases simples.
Tabelas
| Elemento | Como se escreve |
|---|---|
| Formatar uma linha | texto {.classe} no fim da linha |
| Formatar o parágrafo | {.classe} sozinha na última linha |
| Diálogo | {% dialogo %} |
| Verso | {% verso %} |
| Epígrafe | {% epigrafe %} |
| Separador de cena | --- |
| Destaque | {% destaque %} |
| Nota | {% nota %} |
| Figura | {% figura %} |
| Galeria | {% galeria %} |
| Nota de rodapé | [^id] |