Tab

Ye can use a tab shortcode t' display a single tab.

This be especially useful if ye want t' flag yer code example wit' an explicit language.

If ye want multiple tabs grouped together ye can wrap yer tabs into th' tabs shortcode.

​
printf("Hello World!");

Usage

While th' examples be us'n shorrrtcodes wit' named parameter ye be free t' also call this shortcode from yer own partials.

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

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

Parameter

Name Default Notes
style see notes Th' style scheme used fer th' tab. If ye don’t set a style an' ye display a single code block inside o' th' tab, its default styl'n will adapt t' that o' a code block. Otherwise default be used.

- by severity: info, note, tip, warning
- by brand color: primary, secondary, accent
- by color: blue, green, grey, orange, red
- by special color: default, transparent, code
color see notes Th' CSS color value t' be used. If not set, th' chosen color depends on th' style. Any given value will overwrite th' default.

- fer severity styles: a nice match'n color fer th' severity
- fer all other styles: th' correspond'n color
title see notes Arbitrary title fer th' tab. Depend'n on th' style there may be a default title. Any given value will overwrite th' default.

- fer severity styles: th' match'n title fer th' severity
- fer all other styles: <empty>

If ye want no title fer a severity style, ye have t' set this parameter t' " " (a non empty str'n filled wit' spaces)
ay'con see notes Font Awesome ay'con name set t' th' left o' th' title. Depend'n on th' style there may be a default ay'con. Any given value will overwrite th' default.

- fer severity styles: a nice match'n ay'con fer th' severity
- fer all other styles: <empty>

If ye want no ay'con fer a severity style, ye have t' set this parameter t' " " (a non empty str'n filled wit' spaces)
<content> <empty> Arbitrary text t' be displayed 'n th' tab.

Examples

Single Code Block wit' Collapsed Margins

​
printf("Hello World!");

Mixed Marrrkdown Rrrambl'n

​

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

printf("Hello World!");

Understand'n style an' color Behavior

Th' style parameter affects how th' color parameter be applied.

{{< tabs >}}
{{% tab title="just colored style" style="blue" %}}
Th' `style` parameter be set t' a color style.

This will set th' background t' a lighter version o' th' chosen style color as configured 'n yer theme variant.
{{% /tab %}}
{{% tab title="just color" color="blue" %}}
Only th' `color` parameter be set.

This will set th' background t' a lighter version o' th' chosen CSS color value.
{{% /tab %}}
{{% tab title="default style an' color" style="default" color="blue" %}}
Th' `style` parameter affects how th' `color` parameter be applied.

Th' `default` style will set th' background t' yer `--MAIN-BG-color` as configured fer yer theme variant resembl'n th' default style but wit' different color.
{{% /tab %}}
{{% tab title="just severity style" style="info" %}}
Th' `style` parameter be set t' a severity style.

This will set th' background t' a lighter version o' th' chosen style color as configured 'n yer theme variant an' also affects th' chosen ay'con.
{{% /tab %}}
{{% tab title="severity style an' color" style="info" color="blue" %}}
Th' `style` parameter affects how th' `color` parameter be applied.

This will set th' background t' a lighter version o' th' chosen CSS color value an' also affects th' chosen ay'con.
{{% /tab %}}
{{< /tabs >}}
​

Th' style parameter be set t' a color style.

This will set th' background t' a lighter version o' th' chosen style color as configured 'n yer theme variant.

Only th' color parameter be set.

This will set th' background t' a lighter version o' th' chosen CSS color value.

Th' style parameter affects how th' color parameter be applied.

Th' default style will set th' background t' yer --MAIN-BG-color as configured fer yer theme variant resembl'n th' default style but wit' different color.

Th' style parameter be set t' a severity style.

This will set th' background t' a lighter version o' th' chosen style color as configured 'n yer theme variant an' also affects th' chosen ay'con.

Th' style parameter affects how th' color parameter be applied.

This will set th' background t' a lighter version o' th' chosen CSS color value an' also affects th' chosen ay'con.