new_site/_posts/2024-05-01-tabs.md

layout	title	date	description	tags	categories	tabs
post	a post with tabs	2024-05-01 00:32:13	this is what included tabs in a post could look like	formatting code	sample-posts	true

This is how a post with tabs looks like. Note that the tabs could be used for different purposes, not only for code.

First tabs

To add tabs, use the following syntax:

{% raw %}

{% tabs group-name %}

{% tab group-name tab-name-1 %}

Content 1

{% endtab %}

{% tab group-name tab-name-2 %}

Content 2

{% endtab %}

{% endtabs %}

{% endraw %}

With this you can generate visualizations like:

{% tabs log %}

{% tab log php %}

var_dump('hello');

{% endtab %}

{% tab log js %}

console.log("hello");

{% endtab %}

{% tab log ruby %}

pputs 'hello'

{% endtab %}

{% endtabs %}

Another example

{% tabs data-struct %}

{% tab data-struct yaml %}

hello:
  - "whatsup"
  - "hi"

{% endtab %}

{% tab data-struct json %}

{
  "hello": ["whatsup", "hi"]
}

{% endtab %}

{% endtabs %}

Tabs for something else

{% tabs something-else %}

{% tab something-else text %}

Regular text

{% endtab %}

{% tab something-else quote %}

A quote

{% endtab %}

{% tab something-else list %}

Hipster list

• brunch
• fixie
• raybans
• messenger bag

{% endtab %}

{% endtabs %}