Handbook
Gradient Handbook / Handbook / Handbook Style Guide / Using Shortcodes Edit this page

Using Shortcodes

Shortcodes

Sometimes Markdown falls a bit short, and this is where Hugo’s Shortcodes come in. Shortcodes make our documents a lot cleaner when we need to use raw HTML code. For example, markdown has no support for embedding videos through an <iframe> tag, but we can create a shortcode to circumvent this limitation.

A shortcode can be called by calling {{< shortcodename parameters >}}. Shortcode parameters are space delimited, and parameters with internal spaces can be quoted.

The first word in the shortcode declaration is always the name of the shortcode. Parameters follow the name.

All Shortcodes

While the shortcodes in the tabs below are specific for this site (since the HTML code for them live in this repository) there are global shortcodes that Hugo recognizes too. You can find all built-in shortcodes in Hugo’s documentation.

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

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

Example

Get Home

Columns help organize shorter pieces of content horizontally for readability.

{{< columns >}} <!-- 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

Left 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.

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.

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 >}}

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.

With Custom Label

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

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.

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

{{< hint [info|ok|warning|danger] >}}
**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

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.
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.
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.
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.

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

Example

{{< 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 >}}

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

{{< figure src="url" title="Gradient Deck" width= "100%" >}}

Loom

{{< loom d4c64cc8fcbf4093bdef6e4f9a8d117b >}}

Vimeo

{{< vimeo 146022717 >}}

Youtube

{{< youtube "dQw4w9WgXcQ" >}}

Simple wrapper to generate a page Table of Content from a shortcode.

{{< toc >}}