alto/commonmark-tabs

CommonMark extension that renders accessible tabbed content from @tabs / @tab / @endtabs markers with full ARIA support.

v1.0.0 2026-07-30 02:00 UTC

Requires

• php: ^8.3
• league/commonmark: ^2.7

MIT

• Simon André

• php
• markdown
• tabs
• accessibility
• commonmark
• ARIA
• alto
• commonmark-extension
• tabbed-content

Published on Packagist.org on 2026-07-30 02:56 UTC

README

Summary

One directive, fully accessible tabbed UI, zero JavaScript to write. @tabs / @tab / @endtabs markers are parsed into proper ARIA tablist, tab, and tabpanel roles with a self-contained switching script included. The cleanest path from markdown syntax to an interactive UI component in the PHP CommonMark ecosystem.

Installation

composer require

composer require alto/commonmark

Registration

use Alto\CommonMark\Extension\Tabs\TabsExtension;
use League\CommonMark\Environment\Environment;

$environment = new Environment();
$environment->addExtension(new TabsExtension());

Usage

@tabs
@tab "PHP"
```php
<?php echo 'Hello';
```

@tab "JavaScript"
```js
console.log('Hello');
```
@endtabs

Configuration

• Constructor accepts keys: container_class, tabs_class, tab_class, panel_class, active_class, generate_ids.
• Default output includes ARIA roles (tablist, tab, tabpanel).

Minimal Example

@tabs
@tab "Overview"
Project overview.
@tab "Install"
composer require vendor/package
@endtabs

Development

This extension is actively developed in the alto/commonmark monorepo.

• Report a bug
• Suggest a feature
• Open a Pull Request

License

MIT License -- Simon André & Alto