The following markdown file showcases all the features one can achieve within markdown and with Hugo shortcodes, which are featured on this website.

MARKDOWN FORMAT #

Plotly #

Gallery #

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 #

Paragraphs are separated by enters.

Emphasis #

Italics with underscores.

Bold with asterisks.

Combined emphasis with asterisks and underscores.

Strikethrough with ~~two tildes~~.

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.

This is a blockquote with a >.

This is a blockquote with a tab.

Blockquote without 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¹

Horizontal line using ***

Footnote #

I have more ² to say.

Lists #

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

Todo #

Todo lists can be written by using the standard Markdown syntax:

Write math example
- Write diagram example
Do something else

Links #

Link to a page #

An external link

A relative link from one post to another post

A link to heading on this page

Figures #

![1](/spice/images/diogenes.png)

{{\< image src="images/cardamom.png" alt="Cardamom." \>}}

Tables #

Tables aren’t part of the core Markdown spec, but Hugo supports them out-of-the-box.

Name	Age
Bob	27
Alice	23

Inline Markdown within tables #

Italics	Bold	Code³
italics	bold	`code`

huh	analyzability	English	Arabic	Chinese
0	analyzable	111	50	99
1	unanalyzable	39	32	20
2	semi-analyzable	3	4	1

Code Blocks #

Code block with backticks #

#Roman numerals
def roman(num: int) -> str:

    chlist = "VXLCDM"
    rev = [int(ch) for ch in reversed(str(num))]
    chlist = ["I"] + [chlist[i % len(chlist)] + "\u0304" * (i // len(chlist))
                    for i in range(0, len(rev) * 2)]

Code block indented with four spaces #

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Example HTML5 Document</title>
</head>
<body>
  <p>Test</p>
</body>
</html>

Code block with Hugo’s internal highlight shortcode #

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Example HTML5 Document</title>
</head>
<body>
  <p>Test</p>
</body>
</html>

Other Elements #

— abbr, sub, sup, kbd, mark #

GIF is a bitmap image format.

H₂O

Xⁿ + Yⁿ = Zⁿ

Press CTRL+ALT+Delete to end the session.

Most salamanders are nocturnal, and hunt for insects, worms, and other small creatures.

Emoji: ❤️

https://www.webfx.com/tools/emoji-cheat-sheet/

SHORTCODES #

Columns #

One #

This is one.

Two #

This is two.

Buttons #

Buttons are styled links that can lead to local page or external link.

{{< button relref="/" [class="..."] >}}Get Home{{< /button >}}
{{< button href="https://github.com/alex-shpak/hugo-book" >}}Contribute{{< /button >}}

Example #

Get Home Contribute

Hints #

Hint shortcode can be used as hint/alerts/notification block.
There are 3 colors to choose: info, warning and danger.

{{< hint [info|warning|danger] >}}
**Markdown content**  
Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat
stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa
{{< /hint >}}

Example #

Markdown content
Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa

KaTeX #

KaTeX shortcode let you render math typesetting in markdown document. See KaTeX

Example #

{{< katex [display] [class="text-center"]  >}}
f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi
{{< /katex >}}

\[f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi\]

Display Mode Example #

Here is some inline example: \(\pi(x)\) , rendered in the same line. And below is display example, having display: block \[f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi\] Text continues here.

Details #

Details shortcode is a helper for details html5 element. It is going to replace expand shortcode.

Example #

{{< details "Title" [open] >}}
## Markdown content
Lorem markdownum insigne...
{{< /details >}}

{{< details title="Title" open=true >}}
## Markdown content
Lorem markdownum insigne...
{{< /details >}}

Title

Markdown content #

Lorem markdownum insigne…

Tabs #

Tabs let you organize content by context, for example installation instructions for each supported platform.

{{< tabs "uniqueid" >}}
{{< tab "MacOS" >}} # MacOS Content {{< /tab >}}
{{< tab "Linux" >}} # Linux Content {{< /tab >}}
{{< tab "Windows" >}} # Windows Content {{< /tab >}}
{{< /tabs >}}

Example #

MacOS

MacOS #

This is tab MacOS content.

Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa protulit, sed sed aere valvis inhaesuro Pallas animam: qui quid, ignes. Miseratus fonte Ditis conubia.

Linux

Linux #

This is tab Linux content.

Windows

Windows #

This is tab Windows content.

Mermaid Chart #

MermaidJS is library for generating svg charts and diagrams from text.

Override Mermaid Initialization Config
To override the initialization config for Mermaid, create a mermaid.json file in your assets folder!

Example #

{{< mermaid [class="text-center"]>}}
stateDiagram-v2
    State1: The state with a note
    note right of State1
        Important information! You can write
        notes.
    end note
    State1 --> State2
    note left of State2 : This is the note to the left.
{{< /mermaid >}}

stateDiagram-v2 State1: The state with a note note right of State1 Important information! You can write notes. end note State1 --> State2 note left of State2 : This is the note to the left.

Youtube #

Icons #

Fork-Awesome Icons, use them with html inputs like this, direcly in a md file:

<i class="fa fa-1x fa-rebel"></i>

https://forkaweso.me/Fork-Awesome/icons/

Academicons #

Academicons (Font Aswesome), use them with html inputs like this, direcly in a md file:

<i class="ai ai-google-scholar ai-2x"></i>

https://www.innoq.com/en/blog/markdown-with-zotero-workflow/

Cite #

Use CNTRL + ALT + Z to cite from Zotero

⁴

⁵

⁶

⁷

Typography #

Raleway.

Centering #

Centered text

“What I like to drink most is wine that belongs to others.”
— Diogenes, 4th century BC

Diogenes

References: #

The above quote is excerpted from Rob Pike’s talk during Gopherfest, November 18, 2015. ↩︎
Footnote example. ↩︎
The above quote ↩︎
Dalby, A. (2000). Dangerous Tastes: The Story of Spices. University of California Press. https://www.worldhistory.org/books/0520236742/ ↩︎
van Wyk, B.-E. (2014). Culinary Herbs and Spices of the World. University of Chicago Press, joint publication with the Royal Botanic Gardens, Kew. https://doi.org/10.7208/chicago/9780226091839.001.0001 ↩︎
POWO. (2022). Plants of the World Online (Botanical Database). Facilitated by the Royal Botanic Gardens, Kew. http://www.plantsoftheworldonline.org/ ↩︎
Medicinal Spices Exhibit. (2002). UCLA Biomedical Library: History & Special Collections. https://unitproj.library.ucla.edu/biomed/spice/index.cfm?spicefilename=taste.txt&itemsuppress=yes&displayswitch=0 ↩︎