Exploring Hugo Shortcodes

Markdownify Box

{{< boxmd >}} This is boxmd shortcode {{< /boxmd >}}

Simple Box

{{< box >}} This is box shortcode {{< /box >}}

Code Tabs

Easily switch between different code samples:

{{< codes java javascript >}} {{< code >}}

System.out.println('Hello World!');

{{< /code >}}

{{< code >}}

console.log('Hello World!');

{{< /code >}} {{< /codes >}}

General Purpose Tabs

{{< tabs Windows MacOS Ubuntu >}} {{< tab >}}

Windows Section

console.log('Hello World!');

⚠️ Be careful that the content in each tab should be different. Identical content can result in tabs not functioning correctly.

{{< /tab >}} {{< tab >}}

MacOS Section

Hello world! {{< /tab >}} {{< tab >}}

Ubuntu Section

Great! {{< /tab >}} {{< /tabs >}}

Expand Sections

{{< expand "Expand me" >}}

Title

Contents

{{< /expand >}}

{{< expand "Expand me2" >}}

Title2

Contents2

{{< /expand >}}

Alerts

Display messages with colored boxes:

{{< alert theme="warning" >}} this is a text {{< /alert >}}

{{< alert theme="info" >}} this is a text {{< /alert >}}

{{< alert theme="success" >}} this is a text {{< /alert >}}

{{< alert theme="danger" >}} this is a text {{< /alert >}}

Notices

{{< notice success >}} Success text {{< /notice >}}

{{< notice info >}} Info text {{< /notice >}}

{{< notice warning >}} Warning text {{< /notice >}}

{{< notice error >}} Error text {{< /notice >}}

---

External Resources

Hugo comes with several Built-in Shortcodes for rich content, a Privacy Config, and other Simple Shortcodes for embedding social media.

---

YouTube Privacy Enhanced Shortcode

{{< youtube ZJthWmvUzzc >}}

---

Twitter Simple Shortcode

{{< twitter_simple 1085870671291310081 >}}

---

Vimeo Simple Shortcode

{{< vimeo_simple 48912912 >}}