Markdown e Estilo
Jake G maio 15, 2022 #Recursos #MarkdownEste artigo apresenta uma amostra da sintaxe básica de Markdown que pode ser usada nos arquivos de conteúdo do Zola e também mostra como elementos HTML básicos são estilizados com CSS em um tema Zola.
Títulos
Os elementos HTML <h1>—<h6> a seguir representam seis níveis de títulos de seção. <h1> é o nível mais alto e <h6> é o mais baixo.
H1
H2
H3
H4
H5
H6
Parágrafo
Xerum, quo qui aut unt expliquam qui dolut labo. Aque venitatiusda cum, voluptionse latur sitiae dolessi aut parist aut dollo enim qui voluptate ma dolestendit peritin re plis aut quas inctum laceat est volestemque commosa as cus endigna tectur, offic to cor sequas etum rerum idem sintibus eiur? Quianimin porecus evelectur, cum que nis nust voloribus ratem aut omnimi, sitatur? Quiatem. Nam, omnis sum am facea corem alique molestrunt et eos evelece arcillit ut aut eos eos nus, sin conecerem erum fuga. Ri oditatquam, ad quibus unda veliamenimin cusam et facea ipsamus es exerum sitate dolores editium rerore eost, temped molorro ratiae volorro te reribus dolorer sperchicium faceata tiustia prat.
Itatur? Quiatae cullecum rem ent aut odis in re eossequodi nonsequ idebis ne sapicia is sinveli squiatum, core et que aut hariosam ex eat.
Citações
O elemento blockquote representa conteúdo citado de outra fonte, opcionalmente com uma referência dentro de um elemento footer ou cite, e também pode conter alterações em linha, como anotações e abreviações.
Citação sem atribuição
Tiam, ad mint andaepu dandae nostion secatur sequo quae. Observação: você pode usar sintaxe Markdown dentro de uma citação.
Citação com atribuição
Don't communicate by sharing memory, share memory by communicating.
— Rob Pike[1]
All men by nature desire to know.
― Aristotle[2]
Power comes in response to a need, not a desire.
— Goku
Adapt what is useful, reject what is useless, and add what is specifically your own.
— Bruce Lee
Tabelas
Tabelas não fazem parte da especificação principal do Markdown, mas o Zola oferece suporte a elas nativamente.
| Nome | Idade |
|---|---|
| Alice | 23 |
| Bob | 27 |
| Cody | 33 |
| John | 59 |
| Kerry | 23 |
Markdown em linha na tabela
| Itálico | Negrito | Código | Tachado |
|---|---|---|---|
| itálico | negrito | código |
Tabela grande dentro de figure
Envolva tabelas muito grandes com <figure></figure> para que possam rolar horizontalmente.
| Fabricante | Volkswagen | Toyota | Ford | Honda | Chevrolet | BMW | Hyundai | Audi | Nissan | Kia | Mercedes | Tesla | Mitsubishi | Suzuki | Volvo | Subaru | Mazda | Jaguar | Buick | Lexus | GMC | Porsche | Cadillac |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Receita US$ bi | $254 | $249 | $127 | $124 | $123 | $113 | $88 | $83 | $74 | $61 | $55 | $54 | $38 | $31 | $30 | $28 | $27 | $22 | $21 | $19 | $17 | $16 | $12 |
valores de receita encontrados em mecanismo de busca e não verificados, usados apenas para demonstrar uma tabela rolável dentro de figure.
Texto Recolhível
Título 1
É UM SEGREDO PARA TODO MUNDO.
Título 2
Fique um pouco e escute!
Blocos de Código
Blocos de código.. ❤️ com realce automático de sintaxe ✨
Consulte a documentação para ver as opções.
Bloco de código com crases
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example HTML5 Document</title>
</head>
<body>
<p>Test</p>
</body>
</html>Números de Linha e Destaques
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example HTML5 Document</title>
</head>
<body>
<p>Test</p>
</body>
</html>Código em linha
Também podemos especificar código em linha, o que é útil para pequenos trechos.
Tipos de Lista
Lista Ordenada
- Primeiro item
- Segundo item
- Terceiro item
Lista Não Ordenada
- Item da lista
- Outro item
- Mais um item
Lista Aninhada
- Frutas
- Maçã
- Laranja
- Banana
- Laticínios
- Leite
- Queijo
Outros Elementos — abbr, sub, sup, kbd, mark, link
GIF é um formato de imagem bitmap.
H2O
Xn + Yn = Zn
Pressione CTRL+ALT+Delete para encerrar a sessão.
A maioria das salamandras é noturna e caça insetos, vermes e outras pequenas criaturas.
Navegação
O menu principal do site é criado colocando o nav dentro de uma tag header. Veja o topo deste site como exemplo. A navegação é responsiva; reduza a largura da página para vê-la em ação.