Example

Share via

Link copied to clipboard

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

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 .

export MY_VAR=123

markdown

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

The shortcode supports the following arguments:

Name	Type	Default	Comment
class	string		Class attributes of the element’s container.
id	string		Identifier of the element’s container.
lang	string	markdown	Language used to display the code. Use `hugo` to process Hugo (escaped) shortcodes.
show_markup	bool	true	Indicates if the markup should be output in the HTML.
show_preview	bool	true	Indicates if the preview should be output in the HTML.

Name	Type	Default
class	string
Class attributes of the element’s container.
id	string
Identifier of the element’s container.
lang	string	markdown
Language used to display the code. Use `hugo` to process Hugo (escaped) shortcodes.
show_markup	bool	true
Indicates if the markup should be output in the HTML.
show_preview	bool	true
Indicates if the preview should be output in the HTML.

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

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.

export MY_VAR=123

markdown

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

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

Set show_markup to false to hide the code input and to display the preview only.

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

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

Set show_preview to false to hide the output and to display the code input only.

markdown

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

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

On this page: