There are a number of display widgets and shortcodes available. All the shortcodes mentioned on this page are defined in /docs/layouts/shortcodes.

Admonition boxes

Use the note, tip, and warning shortcodes to create admonition boxes.

tip

Tip

A tip box gives a hint or other useful but optional piece of information.

tip source

{{< tip title="Tip" >}}
A tip box gives a hint or other useful but optional piece of information.
{{< /tip >}}

Note

A note box gives some important information that is often not optional.
{{< note title="Note" >}}
This is a note with a [link](https://www.yugabyte.com).
{{< /note >}}

Warning

A warning box informs the user about a potential issue or something to watch out for.
{{< warning title="Warning" >}}

This is a warning with a [link](https://www.yugabyte.com).

{{< /warning >}}

Inline section switcher

An inline section switcher lets you switch between content sections without a separate URL. If you want to link to sub-sections inside a switcher, use tabs. This widget looks as follows:

Inline section switcher

The corresponding code for this widget is shown below. Note that the actual content must be placed in a file with the .md extension inside a subdirectory whose name is easy to associate with the switcher title.

<ul class="nav nav-tabs-alt nav-tabs-yb">
  <li >
    <a href="#macos" class="nav-link active" id="macos-tab" data-toggle="tab"
       role="tab" aria-controls="macos" aria-selected="true">
      <i class="fab fa-apple" aria-hidden="true"></i>
      macOS
    </a>
  </li>
  <li>
    <a href="#linux" class="nav-link" id="linux-tab" data-toggle="tab"
       role="tab" aria-controls="linux" aria-selected="false">
      <i class="fab fa-linux" aria-hidden="true"></i>
      Linux
    </a>
  </li>
  <li>
    <a href="#docker" class="nav-link" id="docker-tab" data-toggle="tab"
       role="tab" aria-controls="docker" aria-selected="false">
      <i class="fab fa-docker" aria-hidden="true"></i>
      Docker
    </a>
  </li>
  <li >
    <a href="#kubernetes" class="nav-link" id="kubernetes-tab" data-toggle="tab"
       role="tab" aria-controls="kubernetes" aria-selected="false">
      <i class="fas fa-cubes" aria-hidden="true"></i>
      Kubernetes
    </a>
  </li>
</ul>

<div class="tab-content">
  <div id="macos" class="tab-pane fade show active" role="tabpanel" aria-labelledby="macos-tab">
  {{% includeMarkdown "binary/explore-ysql.md" %}}
  </div>
  <div id="linux" class="tab-pane fade" role="tabpanel" aria-labelledby="linux-tab">
  {{% includeMarkdown "binary/explore-ysql.md" %}}
  </div>
  <div id="docker" class="tab-pane fade" role="tabpanel" aria-labelledby="docker-tab">
  {{% includeMarkdown "docker/explore-ysql.md" %}}
  </div>
  <div id="kubernetes" class="tab-pane fade" role="tabpanel" aria-labelledby="kubernetes-tab">
  {{% includeMarkdown "kubernetes/explore-ysql.md" %}}
  </div>
</div>

Include content from other files

The includeCode and includeFile shortcodes insert the contents of a file as plain text, while includeMarkdown inserts the contents of a file and renders it as markdown.

includeCode

Because it doesn't make its own code block, you can use this shortcode to build a code block from several sources.

The base path is /docs/static/.

This shortcode strips trailing whitespace from the input file.

Call includeCode in a fenced code block:

```sql
{{% includeCode file="code-samples/include.sql" %}}
```

To nest the code block, tell the shortcode how many spaces to indent:

1. To do this thing, use this code:

    ```sql
    {{% includeCode file="code-samples/include.sql" spaces=4 %}}
    ```

To specify highlighting options, do so on the fenced code block. This is a Hugo feature, not part of the shortcode. For example, add a highlight to lines 1 and 7-10:

```sql {hl_lines=[1,"7-10"]}
{{% includeCode file="code-samples/include.sql" %}}
```

For more information on highlight options, see the Hugo docs on highlighting in code fences and supported syntax highlighting languages.

includeFile

The includeFile shortcode infers the code language from the filename extension (or output if there's no extension) and creates its own code block.

The base path is /docs/static/.

This shortcode strips trailing whitespace from the input file.

Call includeFile on a line of its own:

{{< includeFile file="code-samples/include.sql" >}}

To nest the code block, indent the shortcode:

    {{< includeFile file="code-samples/include.sql" >}}

To specify a code language and override the default:

{{< includeFile file="code-samples/include.sql" lang="sql" >}}

To specify highlighting options:

{{< includeFile file="code-samples/include.sql" hl_options="hl_lines=1 7-10" >}}

Fenced blocks are different

CAREFUL! hl_lines takes a different form here than when you're specifying it on a fenced block: no comma, no quotes: hl_options="hl_lines=1 7-10"

For more information on highlight options: https://gohugo.io/content-management/syntax-highlighting/#highlight-shortcode

includeMarkdown

Inserts the contents of a markdown file, rendered as part of the calling page. We use this primarily for syntax diagrams.

Other shortcodes

Note that the way you invoke a shortcode matters. Use angle brackets (< and >) to output plain text, and percent signs (%) to have Hugo render the output as Markdown.

For example, use {{< slack-invite >}} to output a bare URL for inclusion in a Markdown-style link, such as [YugabyteDB Community Slack]({{< slack-invite >}}): YugabyteDB Community Slack. Use {{% slack-invite %}} to output a clickable URL: https://communityinviter.com/apps/yugabyte-db/register.

Incomplete list of other shortcodes

slack-invite
Inserts the address for community slack invitations.
support-cloud
Inserts the address to open a YugabyteDB Managed support ticket.
support-general
Inserts the address to open a support ticket with no pre-selected product.
support-platform
Inserts the address to open a YugabyteDB Anywhere support ticket.
yb-version
Inserts the current version of a particular release series.
This shortcode has quite a few options. Refer to the comments at the top of the file for usage details.