Example

Overview  

The example shortcode displays a code example and renders a preview of the same input. The shortcode accepts the languages supported by Hugo’s highlight function  .

Hugo code example  

Set the lang argument to hugo to render a Hugo code example. Be sure to escape the input with /* and */ delimiters to avoid rendering issues.

Preview  

export MY_VAR=123

{{< command >}}
export MY_VAR=123
{{< /command >}}

Input  

{{< example lang="hugo" >}}
    {{</* command */>}}
    export MY_VAR=123
    {{</* /command */>}}
{{< /example >}}

Hidden markup  

Set show-markup to false to hide the code input and to display the preview only.

Preview  

Input  

{{< example show-markup=false >}}
This is a lead paragraph. It stands out from regular paragraphs.
{.lead}
{{< /example >}}

Hidden preview  

Set show-preview to false to hide the output and to display the code input only.

Preview  

This is a lead paragraph. It stands out from regular paragraphs.
{.lead}

Input  

{{< example show-preview=false >}}
This is a lead paragraph. It stands out from regular paragraphs.
{.lead}
{{< /example >}}

Resizable preview  

Set resize to true to add a grip to the lower-right corner of the preview. Drag it to narrow the preview and observe how the component reflows.

  Important

The grip demonstrates fluid reflow — content wrapping, text truncation, tables gaining a scrollbar, images scaling. It does not trigger responsive breakpoints. Bootstrap 5’s responsive classes (navbar-expand-*, col-md-*, and similar) are viewport media queries, so they respond to the size of the browser window, not the size of the preview. To preview breakpoint behavior, resize the browser window instead.

Preview  

This is a lead paragraph. It stands out from regular paragraphs.
{.lead}

Input  

{{< example resize="true" >}}
This is a lead paragraph. It stands out from regular paragraphs.
{.lead}
{{< /example >}}

Arguments  

The shortcode supports the following arguments: