# Example

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

## 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](https://gohugo.io/content-management/syntax-highlighting/#list-of-chroma-highlighting-languages).

### 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

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

#### Input

```go-html-template
{{< 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

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

#### Input

```go-html-template
{{< 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

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

#### Input

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

## Arguments

The shortcode supports the following arguments:

| Name | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `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` | Indicates if the markup should be output in the HTML. |
| `show-preview` | bool |  | `true` | Indicates if the preview should be output in the HTML. |