Shortcodes Reference

The Layer5 Academy platform supports a wide range of shortcodes for enriching your learning content. Shortcodes are reusable template snippets you invoke in Markdown files to generate HTML output. They come from three sources:

1. Academy Theme — custom shortcodes built specifically for the Academy platform.
2. Docsy Theme — shortcodes inherited from the Google Docsy documentation theme.
3. Hugo Built-in — shortcodes included with the Hugo static site generator.

For guidance on creating your own shortcodes, see Extending the Academy.

Academy Theme Shortcodes 🔗

These shortcodes are defined in the academy-theme repository and are purpose-built for Academy content.

alert 🔗

Displays styled alert boxes for important information. Supports multiple visual types.

Parameters:

Usage:

{{< alert type="info" title="Heads Up" >}}
This content supports **Markdown** formatting.
{{< /alert >}}

{{< alert type="warning" >}}
Proceed with caution.
{{< /alert >}}

{{< alert color="danger" title="Critical" >}}
This uses the color parameter instead of type.
{{< /alert >}}

chapterstyle 🔗

Wraps content in a styled chapter container. Useful for applying custom CSS to a section of content.

Parameters:

Usage:

{{< chapterstyle style="background: #f5f5f5; padding: 1rem;" >}}
Your styled content here.
{{< /chapterstyle >}}

details 🔗

Creates a collapsible accordion block using the HTML <details> element.

Parameters:

Usage:

{{< details summary="Click to expand" >}}
Hidden content revealed on click. Supports **Markdown**.
{{< /details >}}

{{< details summary="Open by default" open="true" >}}
This section starts expanded.
{{< /details >}}

image 🔗

Displays an image with optional caption, alignment, sizing, and click-to-expand modal behavior.

Parameters:

Usage:

{{< image src="./images/diagram.png" alt="Architecture diagram" title="System Overview" width="80%" radius="8px" >}}

local-video 🔗

Embeds an HTML5 video player with playback controls.

Parameters:

Usage:

{{< local-video src="./videos/demo.mp4" autoplay muted loop >}}

meshery-design-embed 🔗

Embeds an interactive Kanvas design visualization into the page.

Parameters:

Usage:

{{< meshery-design-embed src="./embed.js" id="embedded-design-abc123" size="full" >}}

pageinfo 🔗

Creates a styled information box.

Parameters:

Usage:

{{< pageinfo color="info" >}}
General information about this section.
{{< /pageinfo >}}

svg 🔗

Loads and inlines an SVG file from the theme’s assets/icons/ directory.

Parameters:

Usage:

{{< svg name="logo" >}}

version 🔗

Displays a colored text span, typically used for version identifiers.

Parameters:

Usage:

{{< version color="green" >}}v2.1.0{{< /version >}}

lab-intro 🔗

Stores inner content as a lab introduction for use by the lab page template. This shortcode does not render output directly; instead, it passes content to the rendering pipeline.

Usage:

{{< lab-intro >}}
Welcome to this hands-on lab. You will learn to deploy a microservice.
{{< /lab-intro >}}

csvtable 🔗

Generates a permissions table from a CSV data file, grouped by category. Reads from static/data/csv/keys-backup.csv. Used internally for permissions documentation.

Parameters: None.

csvtable-roles 🔗

Generates a role-based permissions table from a CSV data file. Filters and groups data by role type and links to relevant role documentation pages. Used internally for roles documentation.

Parameters: None.

usestatic 🔗

Resolves the path to a static asset within the current tenant’s UUID scope.

Parameters:

Usage:

{{< usestatic "images/logo.png" >}}

Output: /{tenant-uuid}/images/logo.png

Docsy Theme Shortcodes 🔗

These shortcodes are provided by the Docsy theme. The Academy theme inherits them through Hugo module imports. For full details, see the Docsy shortcodes documentation.

tabpane / tab 🔗

Creates tabbed content panels. Tabs can contain text or code blocks.

Parameters (tabpane):

Parameters (tab):

Usage:

{{< tabpane text=true >}}
{{< tab name="Linux" >}}
Run: `sudo apt install meshery`
{{< /tab >}}
{{< tab name="macOS" >}}
Run: `brew install meshery`
{{< /tab >}}
{{< /tabpane >}}

card / cardpane 🔗

Displays content in Bootstrap-style cards. Use cardpane to group multiple cards.

Parameters (card):

Usage:

{{< cardpane >}}
{{< card header="Step 1" >}}
Install the prerequisites.
{{< /card >}}
{{< card header="Step 2" >}}
Configure your environment.
{{< /card >}}
{{< /cardpane >}}

readfile 🔗

Reads and displays the contents of an external file, with optional syntax highlighting.

Parameters:

Usage:

{{< readfile file="config.yaml" code=true lang="yaml" >}}

imgproc 🔗

Processes images using Hugo’s built-in image pipeline (resize, crop, fit, fill).

Parameters:

Usage:

{{< imgproc "hero.jpg" Resize "800x" >}}
Optional caption text.
{{< /imgproc >}}

iframe 🔗

Embeds external content via an iframe with configurable options.

Parameters:

Usage:

{{< iframe src="https://example.com/embed" width="100%" >}}

swaggerui 🔗

Embeds a Swagger UI instance for interactive API documentation.

Parameters:

Usage:

{{< swaggerui src="/api/openapi.yaml" >}}

redoc 🔗

Renders API documentation using ReDoc.

Parameters:

Usage:

{{< redoc src="/api/openapi.yaml" >}}

comment 🔗

Comments out a block of content so it is not rendered in the output.

Usage:

{{< comment >}}
This content will not appear in the rendered page.
{{< /comment >}}

conditional-text 🔗

Shows or hides content based on a build condition defined in the site configuration.

Parameters:

Usage:

{{< conditional-text include-if="defined-condition" >}}
This text only appears when the condition is met.
{{< /conditional-text >}}

blocks/section 🔗

Creates a full-width page section with optional color and height.

Parameters:

blocks/lead 🔗

Creates a lead paragraph section for introductory content.

Parameters:

blocks/cover 🔗

Creates a cover/hero section with a background image.

Parameters:

blocks/feature 🔗

Creates a feature highlight box with an icon, typically used in groups of three.

Parameters:

blocks/link-down 🔗

Creates a downward navigation arrow that scrolls to the next section. Must be nested inside another block shortcode.

Parameters: None.

Hugo Built-in Shortcodes 🔗

These shortcodes are included with Hugo itself and are always available. For full details, see the Hugo shortcodes documentation.

figure 🔗

Renders an HTML <figure> element with an image and optional caption, link, and attributes.

Parameters:

Usage:

{{< figure src="./images/overview.png" title="System Architecture" caption="High-level view of the platform." >}}

gist 🔗

Embeds a GitHub Gist.

Parameters:

Usage:

{{< gist "username" "gist-id" >}}

highlight 🔗

Renders code with syntax highlighting. Equivalent to fenced code blocks but with more control.

Parameters:

Usage:

{{< highlight go "linenos=table,hl_lines=3" >}}
func main() {
    fmt.Println("Hello")
    fmt.Println("Highlighted line")
}
{{< /highlight >}}

param 🔗

Outputs a site or page parameter value.

Usage:

{{< param "description" >}}

ref / relref 🔗

Creates absolute (ref) or relative (relref) permalinks to other pages.

Usage:

[Link text]({{< ref "/cloud/academy" >}})
[Relative link]({{< relref "extending-the-academy" >}})

youtube 🔗

Embeds a YouTube video.

Parameters:

Usage:

{{< youtube "dQw4w9WgXcQ" >}}

vimeo 🔗

Embeds a Vimeo video.

Parameters:

Usage:

{{< vimeo "12345678" >}}