Tabs Extension

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