Tab

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

​
printf("Hello World!");

Usage

​
{{% tab title="c" %}}
```c
printf("Hello World!");
```
{{% /tab %}}
{{ partial "shortcodes/tab.html" (dict
  "page"  .
  "title" "c"
  "content" ("```c\nprintf(\"Hello World!\")\n```" | .RenderString)
)}}

If you want multiple tabs grouped together you can wrap your tabs into the tabs shortcode.

If you want further options when using a single code tab, you can also use the highlight shortcode.

Parameter

Name Default Notes
style see notes The style scheme used for the tab. If you don’t set a style and you display a single code block inside of the tab, its default styling will adapt to that of a code block. Otherwise default is used.

- by severity: caution, important, info, note, tip, warning
- by brand color: primary, secondary, accent
- by color: blue, cyan, green, grey, magenta, orange, red
- by special color: default, transparent, code

You can also define your own styles.
color see notes The CSS color value to be used. If not set, the chosen color depends on the style. Any given value will overwrite the default.

- for severity styles: a nice matching color for the severity
- for all other styles: the corresponding color
title see notes Arbitrary title for the tab. Depending on the style there may be a default title. Any given value will overwrite the default.

- for severity styles: the matching title for the severity
- for all other styles: <empty>

If you want no title for a severity style, you have to set this parameter to " " (a non empty string filled with spaces)
icon see notes Font Awesome icon name set to the left of the title. Depending on the style there may be a default icon. Any given value will overwrite the default.

- for severity styles: a nice matching icon for the severity
- for all other styles: <empty>

If you want no icon for a severity style, you have to set this parameter to " " (a non empty string filled with spaces)
<content> <empty> Arbitrary text to be displayed in the tab.

Examples

Single Code Block with Collapsed Margins

{{% tab title="Code" %}}
```python
printf("Hello World!");
```
{{% /tab %}}
​
printf("Hello World!");

Mixed Markdown Content

{{% tab title="_**Mixed**_" %}}
A tab can not only contain code but arbitrary text. In this case text **and** code will get a margin.
```python
printf("Hello World!");
```
{{% /tab %}}
​

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

printf("Hello World!");

Understanding style and color Behavior

The style parameter affects how the color parameter is applied.

{{< tabs >}}
{{% tab title="just colored style" style="blue" %}}
The `style` parameter is set to a color style.

This will set the background to a lighter version of the chosen style color as configured in your theme variant.
{{% /tab %}}
{{% tab title="just color" color="blue" %}}
Only the `color` parameter is set.

This will set the background to a lighter version of the chosen CSS color value.
{{% /tab %}}
{{% tab title="default style and color" style="default" color="blue" %}}
The `style` parameter affects how the `color` parameter is applied.

The `default` style will set the background to your `--MAIN-BG-color` as configured for your theme variant resembling the default style but with different color.
{{% /tab %}}
{{% tab title="just severity style" style="info" %}}
The `style` parameter is set to a severity style.

This will set the background to a lighter version of the chosen style color as configured in your theme variant and also affects the chosen icon.
{{% /tab %}}
{{% tab title="severity style and color" style="info" color="blue" %}}
The `style` parameter affects how the `color` parameter is applied.

This will set the background to a lighter version of the chosen CSS color value and also affects the chosen icon.
{{% /tab %}}
{{< /tabs >}}
​

The style parameter is set to a color style.

This will set the background to a lighter version of the chosen style color as configured in your theme variant.

Only the color parameter is set.

This will set the background to a lighter version of the chosen CSS color value.

The style parameter affects how the color parameter is applied.

The default style will set the background to your --MAIN-BG-color as configured for your theme variant resembling the default style but with different color.

The style parameter is set to a severity style.

This will set the background to a lighter version of the chosen style color as configured in your theme variant and also affects the chosen icon.

The style parameter affects how the color parameter is applied.

This will set the background to a lighter version of the chosen CSS color value and also affects the chosen icon.