From d5dccd6b8ac3529d3e063088c3e74a57e8d925fb Mon Sep 17 00:00:00 2001 From: Jieiku Date: Thu, 26 May 2022 20:18:35 -0700 Subject: Toc, Examples, Fonts --- content/overview-markdown-and-style.md | 350 +++++++++++++++++++++++++++++++++ 1 file changed, 350 insertions(+) create mode 100644 content/overview-markdown-and-style.md (limited to 'content/overview-markdown-and-style.md') diff --git a/content/overview-markdown-and-style.md b/content/overview-markdown-and-style.md new file mode 100644 index 0000000..29b938a --- /dev/null +++ b/content/overview-markdown-and-style.md @@ -0,0 +1,350 @@ ++++ +title = "Markdown and Style Guide" +description = "Sample article showcasing basic Markdown syntax and formatting for HTML elements." +date = 2022-05-15 + +[taxonomies] +categories = ["Features"] +tags = ["Markdown"] +[extra] +toc = true ++++ + +This 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 `

`—`

` elements represent six levels of section +headings. `

` is the highest section level while `

` 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 with attribution + +> Don't communicate by sharing memory, share memory by communicating.
+> — Rob Pike[^1] + +> All men by nature desire to know.
+> ― Aristotle[^2] + +## Blockquote with author + +> 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 with Inline Markdown + +| Italics | Bold | Code | StrikeThrough | +| -------- | -------- | ------ | ----------------- | +| *italics* | **bold** | `code` | ~~strikethrough~~ | + + +## Large table within figure tag + +Surround very Large tables with `
` 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 | + +
+*revenue values found on search engine and not verified, for figure scroller table demonstration purposes only.* + +# 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](https://www.getzola.org/documentation/content/syntax-highlighting/) for options. + +## Code block with backticks + +```html + + + + + Example HTML5 Document + + +

Test

+ + +``` + +## Inline Code block + +If we want, we can also `specify inline code` which is useful for `the small stuff`. + +# List Types + +## Ordered List + +1. First item +2. Second item +3. 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. + +--- + +[^1]: The above quote is excerpted from Rob Pike's [talk](https://www.youtube.com/watch?v=PAAkCSZUG1c) +during Gopherfest, November 18, 2015. + +[^2]: The quote is the first sentence of Aristotle's [Metaphysics](https://en.wikipedia.org/wiki/Metaphysics_(Aristotle)). + + +# Forms: + +
+

+ +

+

+ +

+

+ +

+
+

+
+ + + + +
+ Size + + + + +
+ +
+ + +
+ +
+ + +
+
+ + + + + + + + + + + + +
+ +# Navs + +Site primary menu is created by nesting the nav under a header tag. Refer to the top of this site for an example. + +If the nav tag is under the main tag instead of the header tag then the links will have a border: + +
+ +
+ + +# Infinity Flex Grid + +## Simple Grid + +
+
1
+
2
+
3
+
+
+
1
+
2
+
3
+
4
+
+
+
1
+
2
+
3
+
4
+
5
+
+ +## Complex grid + +
+
1
+
2
+
3
+
+
+
Merge the first 2 columns
+
2
+
3
+
4
+
+
+
1
+
Merge 3 columns
+
3
+
+
+
1
+
Merge 2
+
Merge 3
+
4
+
5
+
6
+
7
+
+
+
1
+
Merge 2 columns
+
3
+
+ + -- cgit v1.3.1