hugo-theme-relearn/exampleSite/content/shortcodes/tab.en.md
2023-05-23 23:57:48 +02:00

1.4 KiB

+++ description = "Show content in a single tab" title = "Tab" +++

You can use a tab shortcode to display a single tab.

This is especially useful if you want to flag your code example with an explicit language.

{{% tab name="c" %}}

printf("Hello World!");

{{% /tab %}}

Usage

While the examples are using shortcodes with named parameter you are free to also call this shortcode from your own partials.

{{< tabs groupid="shortcode-parameter">}} {{% tab name="shortcode" %}}

{{%/* tab name="c" */%}}
```c
printf("Hello World!");
```
{{%/* /tab */%}}

{{% /tab %}} {{% tab name="partial" %}}

{{ partial "shortcodes/tab.html" (dict
  "context" .
  "name" "c"
  "content" ("```c\nprintf(\"Hello World!\")\n```" | markdownify)
)}}

{{% /tab %}} {{< /tabs >}}

Parameter

Name Default Notes
name <empty> Arbitrary text for the name of the tab.
<content> <empty> Arbitrary text to be displayed in the tab.

Examples

Code with collapsed margins

{{% tab name="Code" %}}

printf("Hello World!");

{{% /tab %}}

Mixed content

{{% tab name="Mixed" %}}

A tab can not only contain code but arbitrary text. In this case text and code will get a margin.

printf("Hello World!");

{{% /tab %}}