Tabs

Organize related content into switchable panels.

Basic Usage

With Icons

Add Phosphor icons before tab labels:

With Code Blocks

Tabs containing code blocks automatically display language icons:

function greet(name) {
  return `Hello, ${name}!`;
}

def greet(name):
    return f"Hello, {name}!"

def greet(name)
  "Hello, #{name}!"
end

Platform Instructions

Combine icons with code for platform-specific content:

brew install docyard

sudo apt install docyard

choco install docyard

Synced Tabs

Tabs with identical labels stay in sync across the page. Click “Python” in either group and both switch together:

const x = 1;

x = 1

x = 1

console.log(x);

print(x)

puts x

Your preference is saved and persists across page loads.

Keyboard Navigation

Syntax

:::tabs
== Tab Label
Content for this tab.

== Another Tab
More content here.
:::

With icons:

:::tabs
== :icon-name: Tab Label
Content here.
:::

Reference