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 %}