Tabs

TabsExtension groups Markdown into named panels while keeping the content available to the normal parser and renderer.

Install

TabsExtension is bundled with alto/markdown.

composer require alto/markdown

Configure

<?php

use Alto\Markdown\Extension\Tabs\TabsExtension;
use Alto\Markdown\Markdown;

$markdown = Markdown::github()->with(new TabsExtension());

Markdown

@tabs
@tab PHP
Use Composer.
@tab CLI
Run the command.
@endtabs

HTML

<div class="markdown-tabs" id="markdown-tabs-1">
<div class="markdown-tabs-list">
<a class="markdown-tabs-tab is-active" id="markdown-tabs-1-tab-1" href="#markdown-tabs-1-panel-1" aria-controls="markdown-tabs-1-panel-1">PHP</a>
<a class="markdown-tabs-tab" id="markdown-tabs-1-tab-2" href="#markdown-tabs-1-panel-2" aria-controls="markdown-tabs-1-panel-2">CLI</a>
</div>
<div class="markdown-tabs-panels">
<div class="markdown-tabs-panel is-active" id="markdown-tabs-1-panel-1" aria-labelledby="markdown-tabs-1-tab-1">
<p>Use Composer.</p>
</div>
<div class="markdown-tabs-panel" id="markdown-tabs-1-panel-2" aria-labelledby="markdown-tabs-1-tab-2">
<p>Run the command.</p>
</div>
</div>
</div>

Options

TabsExtension has no application-level configuration options.

Security

Tab titles are escaped as text, and panel content follows the active HTML policy. The extension performs no resource or network access.

Behavior

The first tab and panel receive the is-active class. The extension generates stable links and associations between tabs and panels; the application owns their styling and interactive behavior.

Nested groups use one additional @ per level: @@tabs, @@tab, and @@endtabs. A title may be quoted, cannot be empty, and is limited to 256 bytes. Nesting is limited to 32 levels.