Example
The example shortcode displays a code example and renders a preview of the same input.
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{{< command >}}
export MY_VAR=123
{{< /command >}}The shortcode supports the following arguments:
| Argument | Required | Description |
|---|---|---|
| id | No | Optional identifier of the element’s container. |
| lang | No | Language used to display the code. Use “hugo” to process Hugo (escaped) shortcodes, default value is “html”. |
| show_markup | No | If the markup should be output in the HTML, defaults to “true”. |
| show_preview | No | If the preview should be output in the HTML, defaults to “true”. |
| class | No | Optional class attributes of the element’s container. |
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{{< 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.
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 >}}