hugo-geekblog/exampleSite/content/posts/advanced/shortcodes.md

title	date	authors	tags	geekblogToC
Shortcodes	2021-05-23T20:00:00+01:00	john-doe	Documentation Shortcodes	1

The theme bundles some handy shortcodes that tries to cover common situations.

{{< toc >}}

Buttons

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

{{</* button relref="/" [class="...", size="large|regular"] */>}}Get Home{{</* /button */>}}
{{</* button href="https://github.com/thegeeklab/hugo-geekblog" */>}}Contribute{{</* /button */>}}

Example

{{< button relref="/" >}}Get Home{{< /button >}} {{< button href="https://github.com/thegeeklab/hugo-geekblog" >}}Contribute{{< /button >}}

Columns

The Columns shortcode can be used to organize content side-by-side (horizontally) for better readability.

Attributes

Name	Description	default
size (optional)	size of the first column (small|regular|large)	regular

Usage

{{</* columns [size="small|regular|large"] */>}} <!-- begin columns block -->
# Left Content
Dolor sit, sumo unique argument um no ...

<---> <!-- magic sparator, between columns -->

# Mid Content
Dolor sit, sumo unique argument um no ...

<---> <!-- magic sparator, between columns -->

# Right Content
Dolor sit, sumo unique argument um no ...
{{</* /columns */>}}

Example

{{< columns >}}

Left

Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclimates investiture. Ornateness bland it ex enc, est yeti am bongo detract re. Pro ad prompts feud gait, quid exercise emeritus bis e. In pro quints consequent, denim fastidious copious quo ad. Stet probates in duo.

<--->

Mid Content

Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclimates investiture. Ornateness bland it ex enc, est yeti am bongo detract re.

<--->

Right Content

Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclimates investiture. Ornateness bland it ex enc, est yeti am bongo detract re. Pro ad prompts feud gait, quid exercise emeritus bis e. In pro quints consequent, denim fastidious copious quo ad. Stet probates in duo. {{< /columns >}}

Emojify

Emoji can be enabled in a Hugo project in a number of ways.

The emojify function can be called directly in templates or Inline Shortcodes. To enable emoji globally, set enableEmoji to true in your site's configuration and then you can type emoji shorthand codes directly in content files:

Result	Inline	Shortcode
{{< emojify "🙈" >}}	:see_no_evil:	{{</* emojify ":see_no_evil:" */>}}
{{< emojify "🙉" >}}	:hear_no_evil:	{{</* emojify ":hear_no_evil:" */>}}
{{< emojify "🙊" >}}	:speak_no_evil:	{{</* emojify ":speak_no_evil:" */>}}

The Emoji cheat sheet is a useful reference for emoji shorthand codes.

{{< hint type=note >}} Info
The above steps enable Unicode Standard emoji characters and sequences in Hugo, however the rendering of these glyphs depends on the browser and the platform. To style the emoji you can either use a third party emoji font or a font stack. {{< /hint >}}

Styling:

{{< highlight html "linenos=table" >}} .emoji { font-family: Apple Color Emoji, Segoe UI Emoji, NotoColorEmoji, Segoe UI Symbol, Android Emoji, EmojiSymbols; } {{< /highlight >}}

Expand

Expand shortcode can help to decrease clutter on screen by hiding part of text. Expand content by clicking on it.

Example

Default

{{</* expand */>}}
## Markdown content
Dolor sit, sumo unique ...
{{</* /expand */>}}

{{< expand >}}

Markdown content

Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclimates investiture. Ornateness bland it ex enc, est yeti am bongo detract re. {{< /expand >}}

With Custom Label

{{</* expand "Custom Label" "..." */>}}
## Markdown content
Dolor sit, sumo unique ...
{{</* /expand */>}}

{{< expand "Custom Label" "..." >}}

More markdown

Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclimates investiture. Ornateness bland it ex enc, est yeti am bongo detract re. Pro ad prompts feud gait, quid exercise emeritus bis e. In pro quints consequent, denim fastidious copious quo ad. Stet probates in duo. {{< /expand >}}

Hint

Hint shortcode can be used as hint/alerts/notification block.

Attributes

Name	Description	default
type	hint type	note
icon (optional)	custom icon to use,need to be an icon from an SVG sprite	undefined
title (optional)	hint title	undefined

Usage

{{</* hint type="note|tip|important|caution|warning" [icon="gblog_github" title="GitHub"] */>}}
**Markdown content**\
Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclimates investiture.
 Ornateness bland it ex enc, est yeti am bongo detract re.
{{</* /hint */>}}

Example

{{< hint type=note >}} Markdown content
Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclimates investiture. Ornateness bland it ex enc, est yeti am bongo detract re. {{< /hint >}}

{{< hint type=tip >}} Markdown content
Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclimates investiture. Ornateness bland it ex enc, est yeti am bongo detract re. {{< /hint >}}

{{< hint type=important >}} Markdown content
Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclimates investiture. Ornateness bland it ex enc, est yeti am bongo detract re. {{< /hint >}}

{{< hint type=caution >}} Markdown content
Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclimates investiture. Ornateness bland it ex enc, est yeti am bongo detract re. {{< /hint >}}

{{< hint type=warning >}} Markdown content
Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclimates investiture. Ornateness bland it ex enc, est yeti am bongo detract re. {{< /hint >}}

Example with a custom icon and title:

{{< hint type=note icon=gblog_github title=GitHub >}} Markdown content
Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclimates investiture. Ornateness bland it ex enc, est yeti am bongo detract re. {{< /hint >}}

Icon

Simple shortcode to include icons from SVG sprites outside of menus.

{{</* icon "thumbs-up" */>}}

Example

Result	Usage
{{< icon "thumbs-up" >}}	{{</* icon "thumbs-up" */>}}
{{< icon "thumbs-down" >}}	{{</* icon "thumbs-down" */>}}
{{< icon "laugh" >}}	{{</* icon "laugh" */>}}
{{< icon "lemon" >}}	{{</* icon "lemon" */>}}
{{< icon "moon" >}}	{{</* icon "moon" */>}}

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

{{< tabs "uniqueid" >}} {{< tab "macOS" >}}

macOS

This is tab macOS content.

Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclimates investiture. Ornateness bland it ex enc, est yeti am bongo detract re. Pro ad prompts feud gait, quid exercise emeritus bis e. In pro quints consequent, denim fastidious copious quo ad. Stet probates in duo. {{< /tab >}}

{{< tab "Linux" >}}

Linux

This is tab Linux content.

Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclimates investiture. Ornateness bland it ex enc, est yeti am bongo detract re. Pro ad prompts feud gait, quid exercise emeritus bis e. In pro quints consequent, denim fastidious copious quo ad. Stet probates in duo. {{< /tab >}}

{{< tab "Windows" >}}

Windows

This is tab Windows content.

Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclimates investiture. Ornateness bland it ex enc, est yeti am bongo detract re. Pro ad prompts feud gait, quid exercise emeritus bis e. In pro quints consequent. {{< /tab >}} {{< /tabs >}}

Boxes

Boxes can be used to create a simple grid.

Attributes

Name	Description	default
size	size of each box (regular|large)	regular
icon (optional)	title bar icon, need to be an icon from an SVG sprite	undefined
title (optional)	title bar text	undefined

Usage

{{</* boxes "contact" */>}}
{{</* box size=large [title=E-Mail icon=gblog_email] */>}}mail@example.com{{</* /box */>}}
{{</* box size=large title=Matrix icon=gblog_matrix */>}}@john:example.com{{</* /box */>}}
{{</* box size=large title=XMPP icon=gblog_xmpp */>}}john@example.com{{</* /box */>}}
{{</* box size=large title=Others */>}}You can also find us on the Fediverse.{{</* /box */>}}
{{</* /boxes */>}}

Example

{{< boxes "contact" >}} {{< box size=large title=E-Mail icon=gblog_email >}}mail@example.com{{< /box >}} {{< box size=large title=Matrix icon=gblog_matrix >}}@john:example.com{{< /box >}} {{< box size=large title=XMPP icon=gblog_xmpp >}}john@example.com{{< /box >}} {{< box size=large title=Others >}}You can also find us on the Fediverse.{{< /box >}} {{< /boxes >}}

Mermaid

Mermaid is library for generating SVG charts and diagrams from text.

Example

{{< columns >}}

{{</* mermaid class="text-center" */>}}
sequenceDiagram
    Alice->>Bob: Hello Bob, how are you?
    alt is sick
        Bob->>Alice: Not so good :(
    else is well
        Bob->>Alice: Feeling fresh like a daisy
    end
    opt Extra response
        Bob->>Alice: Thanks for asking
    end
{{</* /mermaid */>}}

<--->

{{< mermaid class="text-center" >}} sequenceDiagram Alice->>Bob: Hello Bob, how are you? alt is sick Bob->>Alice: Not so good :( else is well Bob->>Alice: Feeling fresh like a daisy end opt Extra response Bob->>Alice: Thanks for asking end {{< /mermaid >}}

{{< /columns >}}

As an alternative to shortcodes, code blocks can be used for markdown as well.

{{< columns >}}

```mermaid
flowchart LR
A[Hard] -->|Text| B(Round)
B --> C{Decision}
C -->|One| D[Result 1]
C -->|Two| E[Result 2]
```

<--->

flowchart LR
A[Hard] -->|Text| B(Round)
B --> C{Decision}
C -->|One| D[Result 1]
C -->|Two| E[Result 2]

{{< /columns >}}

KaTeX

KaTeX shortcode let you render math typesetting in markdown document.

Example

{{< columns >}}

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

<--->

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

{{< /columns >}}

KaTeX can also be used inline, for example {{< katex >}}\pi(x){{< /katex >}} or used with the display parameter (e.g. display: block):

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

Text continues here.