Code block tabs: one task, three languages

Sometimes the same step needs examples for different stacks. Instead of making readers scroll through every option, put consecutive fenced code blocks into a tab group.

Here is the same small request expressed in PHP, JavaScript, and Bash:

use Illuminate\Support\Facades\Http;

$user = Http::get('https://api.example.com/users/1')
    ->throw()
    ->json();

echo $user['name'];

const response = await fetch('https://api.example.com/users/1');

if (!response.ok) {
    throw new Error(`Request failed: ${response.status}`);
}

const user = await response.json();
console.log(user.name);

curl --fail --silent \
    https://api.example.com/users/1 \
    | jq --raw-output '.name'

Create a tab group

Add a data-code-tab attribute directly before each fenced block. Keep the blocks adjacent so the site knows they belong together:

{data-code-tab="PHP"}
```php
echo 'Hello from PHP';
```

{data-code-tab="JavaScript"}
```javascript
console.log('Hello from JavaScript');
```

A heading, paragraph, or other element ends the group. Regular fenced code blocks without data-code-tab continue to render normally.