Markdown and Style
Jake G May 15, 2022 #Features #MarkdownThis article offers a sample of basic Markdown syntax that can be used in Zola content files, also it shows if basic HTML elements are decorated with CSS in a Zola theme.
Headings
The following HTML <h1>
—<h6>
elements represent six levels of section
headings. <h1>
is the highest section level while <h6>
is the lowest.
H1
H2
H3
H4
H5
H6
Paragraph
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.
Blockquotes
The blockquote element represents content that is quoted from another source,
optionally with a citation which must be within a footer
or cite
element,
and optionally with in-line changes such as annotations and abbreviations.
Blockquote no attribution
Tiam, ad mint andaepu dandae nostion secatur sequo quae. Note that you can use Markdown syntax within a blockquote.
Blockquote attribution
Don't communicate by sharing memory, share memory by communicating.
— Rob Pike1
All men by nature desire to know.
― Aristotle2
Power comes in response to a need, not a desire.
— Goku
Tables
Tables aren't part of the core Markdown spec, but Zola supports them out-of-the-box.
Name | Age |
---|---|
Alice | 23 |
Bob | 27 |
Cody | 33 |
John | 59 |
Kerry | 23 |
Table Inline Markdown
Italics | Bold | Code | StrikeThrough |
---|---|---|---|
italics | bold | code |
Large table within figure
Surround very Large tables with <figure></figure>
so they can scroll horizontally.
Manufacturer | Volkswagen | Toyota | Ford | Honda | Chevrolet | BMW | Hyundai | Audi | Nissan | Kia | Mercedes | Tesla | Mitsubishi | Suzuki | Volvo | Subaru | Mazda | Jaguar | Buick | Lexus | GMC | Porsche | Cadillac |
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Revenue $B | $254 | $249 | $127 | $124 | $123 | $113 | $88 | $83 | $74 | $61 | $55 | $54 | $38 | $31 | $30 | $28 | $27 | $22 | $21 | $19 | $17 | $16 | $12 |
Foldable Text
Title 1
IT'S A SECRET TO EVERYBODY.
Title 2
Stay awhile, and listen!
Code Blocks
Code blocks.. ❤️ with automatic syntax highlighting ✨
See the docs for options.
Code block with backticks
<!doctype html>
Example HTML5 Document
Test
Line Numbers, Highlights
1 <!doctype html>
2
3
4
5 Example HTML5 Document
6
7
8 Test
9
10
Inline Code block
If we want, we can also specify inline code
which is useful for the small stuff
.
List Types
Ordered List
- First item
- Second item
- Third item
Unordered List
- List item
- Another item
- And another item
Nested list
- Fruit
- Apple
- Orange
- Banana
- Dairy
- Milk
- Cheese
Other Elements — abbr, sub, sup, kbd, mark, link
GIF is a bitmap image format.
H2O
Xn + Yn = Zn
Press CTRL+ALT+Delete to end the session.
Most salamanders are nocturnal, and hunt for insects, worms, and other small creatures.
The above quote is excerpted from Rob Pike's talk during Gopherfest, November 18, 2015.
The quote is the first sentence of Aristotle's Metaphysics.
Navs
Site primary menu is created by nesting the nav under a header tag. Refer to the top of this site for an example. Navigation is responsive, shrink the page width to see it in action.