—

layout: post

title: a post with tabs

date: 2024-05-01 00:32:13

description: this is what included tabs in a post could look like

tags: formatting code

categories: sample-posts

tabs: 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:

# # #

```liquid

{% 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 id="log" class="tab" data-tab="102ce7f4-ddaf-4289-9685-71883b323c86" data-name="log">

  <li class="active" id="log-php">
      <a href="#">php </a>
  </li>
  
  <li id="log-js">
      <a href="#">js </a>
  </li>
  
  <li id="log-ruby">
      <a href="#">ruby </a>
  </li>

</ul>

• #

  ```php

  var_dump(‘hello’);

  ```

  # #

• #

  ```javascript

  console.log(“hello”);

  ```

  # #

• #

  ```javascript

  pputs ‘hello’

  ```

  # #

#

## Another example

#

<ul id="data-struct" class="tab" data-tab="6882cf88-efbe-41b8-ac4f-2ba6ba9ae039" data-name="data-struct">

  <li class="active" id="data-struct-yaml">
      <a href="#">yaml </a>
  </li>
  
  <li id="data-struct-json">
      <a href="#">json </a>
  </li>

</ul>

• #

  ```yaml

  hello:

  - “whatsup”

  - “hi”

  ```

  # #

• #

  ```json

  {

  “hello”: [“whatsup”, “hi”]

  }

  ```

  # #

#

## Tabs for something else

#

<ul id="something-else" class="tab" data-tab="2c697691-83f5-48b5-b850-6ab53c48cbde" data-name="something-else">

  <li class="active" id="something-else-text">
      <a href="#">text </a>
  </li>
  
  <li id="something-else-quote">
      <a href="#">quote </a>
  </li>
  
  <li id="something-else-list">
      <a href="#">list </a>
  </li>

</ul>

• #

  Regular text

  # #

• #

  > A quote

  # #

• #

  Hipster list

  #

  - brunch

  - fixie

  - raybans

  - messenger bag

  # #