Docs

Example

Posted on December 29, 2023  (Last modified on June 20, 2025) • 3 min read • 561 words
Component  
Component  
Share via

The example shortcode displays a code example and renders a preview of the same input.

Overview   Arguments   Examples   Hugo Code Example   Hidden Markup   Hidden Preview  

Overview  

Added in v0.8.0   

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  .

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

Arguments  

The shortcode supports the following arguments:

Name Type Required Default Comment
class string Class attributes of the element. It supports Bootstrap attributes to modify the styling of the element.
id string Unique identifier of the current element.
lang string markdown Language to be used by the syntax highlighter. For files, the language is derived from the file extension when no language is specified. When rendering code examples with the example shortcode, use hugo to process Hugo (escaped) shortcodes and bookshop to render a Bookshop component using inline YAML data.
show-markup bool true v1.0.0      Indicates if the markup should be output in the HTML.
show-preview bool true v1.0.0      Indicates if the preview should be output in the HTML.
show_markup bool true v1.0.0      Use show-markup instead. Indicates if the markup should be output in the HTML.
show_preview bool true v1.0.0      Use show-preview instead. Indicates if the preview should be output in the HTML.
Name Type Required Default
class string
Class attributes of the element. It supports Bootstrap attributes to modify the styling of the element.
id string
Unique identifier of the current element.
lang string markdown
Language to be used by the syntax highlighter. For files, the language is derived from the file extension when no language is specified. When rendering code examples with the example shortcode, use hugo to process Hugo (escaped) shortcodes and bookshop to render a Bookshop component using inline YAML data.
show-markup bool true
v1.0.0      Indicates if the markup should be output in the HTML.
show-preview bool true
v1.0.0      Indicates if the preview should be output in the HTML.
show_markup bool true
v1.0.0      Use show-markup instead. Indicates if the markup should be output in the HTML.
show_preview bool true
v1.0.0      Use show-preview instead. Indicates if the preview should be output in the HTML.

Examples  

Change the style and language of your code snippet with shortcode arguments.

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

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

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

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.

markdown 
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 >}}
On this page: