a post with tabs

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:

{% tabs group-name %}

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

Content 1

{% endtab %}

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

Content 2

{% endtab %}

{% endtabs %}

With this you can generate visualizations like:

<ul class="tab-content" id="2da29efe-db0f-44d2-9a0f-a0936a9e6cd4">

    <li class="active">
var_dump('hello');

</li>

    <li>
console.log("hello");

</li>

    <li>
pputs 'hello'

</li>

</ul>

Another example

<ul class="tab-content" id="16822752-7c24-40ec-b367-14ac130fb8d0">

    <li class="active">
hello:
  - "whatsup"
  - "hi"

</li>

    <li>
{
  "hello": ["whatsup", "hi"]
}

</li>

</ul>

Tabs for something else

<ul class="tab-content" id="9af26402-054a-4976-9c1f-d79022aadc83">

    <li class="active">

Regular text

</li>

    <li>

A quote

</li>

    <li>

Hipster list

  • brunch
  • fixie
  • raybans
  • messenger bag

</li>

</ul>




Enjoy Reading This Article?

Here are some more articles you might like to read next:

  • Google Gemini updates: Flash 1.5, Gemma 2 and Project Astra
  • Displaying External Posts on Your al-folio Blog
  • a post with typograms
  • a post that can be cited
  • a post with pseudo code