@fsegurai/marked-extended-tabs 17.0.0-beta.2 → 17.0.0-beta.3

package/README.custom.md

@@ -2,7 +2,10 @@
 
 ## 🎯 Overview
 
-The **marked-extended-tabs** extension transforms your Markdown into interactive tabbed content sections with support for custom icons, smooth animations, and nested Markdown content. With a CSS-only implementation for excellent performance and accessibility, it's perfect for code examples, documentation, API references, tutorials, and organizing complex content.
+The **marked-extended-tabs** extension transforms your Markdown into interactive tabbed content sections with support
+for custom icons, smooth animations, and nested Markdown content. With a CSS-only implementation for excellent
+performance and accessibility, it's perfect for code examples, documentation, API references, tutorials, and organizing
+complex content.
 
 ### ✨ Key Features
 
@@ -12,8 +15,11 @@ The **marked-extended-tabs** extension transforms your Markdown into interactive
 - 🚀 **CSS-Only**: Pure CSS implementation for optimal performance
 - 📝 **Rich Content**: Full Markdown support including code, tables, lists
 - ♿ **Fully Accessible**: ARIA labels, keyboard navigation, semantic HTML
+- ⌨️ **Keyboard Navigation**: Arrow keys, Home/End keys for tab switching
+- 💾 **Persist Selection**: Remember tab choice across sessions (localStorage)
 - 🎯 **Auto-Activation**: Automatically activate first tab
-- 💾 **Persist Selection**: Remember tab choice across sessions
+- 🎪 **Custom Events**: `tab-switched` events for external script integration
+- 🔄 **Callback Hooks**: `onBeforeSwitch` and `onAfterSwitch` callbacks
 - 🎨 **Customizable Styles**: Multiple variants (compact, vertical, pills)
 - 🌈 **Dark Mode Ready**: Theme support included
 - 📱 **Responsive**: Mobile-friendly with scrollable tabs
@@ -32,6 +38,7 @@ Experience all tab styles and animations: [View Demo](https://fsegurai.github.io
 	- [Tab Features](#tab-features)
 	- [Animation Types](#animation-types)
 	- [Configuration Options](#configuration-options)
+	- [Enhanced Tab Switching Features](#enhanced-tab-switching-features)
 	- [Use Cases](#use-cases)
 	- [Aliases](#aliases)
 	- [Advanced Examples](#advanced-examples)
@@ -42,7 +49,8 @@ Experience all tab styles and animations: [View Demo](https://fsegurai.github.io
 
 ### Basic Concept
 
-**`tabs` is the identifier for the tabbed container, and `tab` for individual tab items. Each tab can have a label, icon, and active state.**
+**`tabs` is the identifier for the tabbed container, and `tab` for individual tab items. Each tab can have a label,
+icon, and active state.**
 
 <!-- SECTION:CUSTOM_USAGE_EXAMPLE -->
 
@@ -67,7 +75,7 @@ pnpm add @fsegurai/marked-extended-tabs
 ### Basic Implementation
 
 ```javascript
-import { marked } from 'marked';
+import {marked} from 'marked';
 import markedExtendedTabs from '@fsegurai/marked-extended-tabs';
 
 // Import styles (required for functionality)
@@ -77,9 +85,9 @@ import '@fsegurai/marked-extended-tabs/styles/tabs-theme.css';
 
 // Register the extension
 marked.use(markedExtendedTabs({
-  animation: 'fade',
-  autoActivate: true,
-  persistSelection: false
+    animation: 'fade',
+    autoActivate: true,
+    persistSelection: false
 }));
 
 // Your markdown content with tabs
@@ -323,6 +331,7 @@ Tabs support full Markdown:
 ```markdown
 ::::tabs
 :::tab{label="Documentation" icon="📖" active="true"}
+
 # Getting Started
 
 Follow these steps:
@@ -344,6 +353,7 @@ const client = new Client();
 :::tabend
 
 :::tab{label="FAQ" icon="❓"}
+
 ## Frequently Asked Questions
 
 ### How do I authenticate?
@@ -355,8 +365,8 @@ Use your API key in the Authorization header.
 - Free tier: 100 requests/hour
 - Pro tier: 10,000 requests/hour
 - Enterprise: Custom limits
-:::tabend
-::::tabsend
+  :::tabend
+  ::::tabsend
 ```
 
 #### Short Aliases
@@ -382,7 +392,8 @@ system.
 
 ### Styling Your Tabs
 
-This extension provides optional CSS/SCSS files located in the `styles/` directory. Import them into your project to style the tabs.
+This extension provides optional CSS/SCSS files located in the `styles/` directory. Import them into your project to
+style the tabs.
 
 Usage examples:
 
@@ -398,7 +409,6 @@ import '@fsegurai/marked-extended-tabs/styles/tabs-theme.css';
 <link rel="stylesheet" href="node_modules/@fsegurai/marked-extended-tabs/styles/tabs-theme.css">
 ```
 
-
 #### Generated HTML Structure
 
 ```html
@@ -702,11 +712,15 @@ Individual tabs can use these aliases:
 The marked-extended-tabs extension accepts the following configuration options:
 
 - `className`: The base CSS class name for tabs container. Defaults to 'marked-extended-tabs-container'.
-- `persistSelection`: Whether to remember tab selection across page reloads. Defaults to false.
+- `persistSelection`: Whether to remember tab selection across page reloads. Defaults to **true**.
 - `animation`: Animation type for tab transitions. Defaults to 'fade'. See [Animation Types](#animation-types).
 - `autoActivate`: Automatically activate the first tab if none is explicitly active. Defaults to true.
 - `template`: A custom HTML template for the tabs structure. Defaults to the built-in template.
 - `customizeToken`: A function that allows you to customize the token object before rendering. Defaults to null.
+- `enableKeyboardNavigation`: Enable arrow key navigation between tabs. Defaults to **true**.
+- `enableFocusManagement`: Enable automatic focus management for accessibility. Defaults to **true**.
+- `onBeforeSwitch`: Callback function fired before switching tabs (can prevent switch). Defaults to null.
+- `onAfterSwitch`: Callback function fired after switching tabs. Defaults to null.
 
 Tab syntax parameters:
 
@@ -714,6 +728,160 @@ Tab syntax parameters:
 - `active`: Whether this tab is active by default ("true" or "false"). Defaults to "false".
 - `icon`: An optional icon (emoji or Unicode) to display in the tab header. No default.
 
+### Enhanced Tab Switching Features
+
+The marked-extended-tabs extension now includes advanced interactivity features that enhance user experience and
+accessibility:
+
+#### 🎯 Keyboard Navigation
+
+Users can navigate between tabs using keyboard shortcuts:
+
+- **Arrow Right / Arrow Down** - Move to the next tab
+- **Arrow Left / Arrow Up** - Move to the previous tab
+- **Home** - Jump to the first tab
+- **End** - Jump to the last tab
+- **Space / Enter** - Activate the focused tab
+
+Keyboard navigation is **enabled by default**. Disable it with:
+
+```javascript
+marked.use(markedExtendedTabs({
+    enableKeyboardNavigation: false
+}));
+```
+
+#### ♿ Focus Management
+
+Automatic focus management for keyboard accessibility:
+
+- Tabs are properly tabindexed for keyboard navigation
+- Active tab receives focus index 0
+- Other tabs have focus index -1
+- Focus automatically updates when switching tabs
+- Screen reader support with ARIA attributes
+
+Enable/disable with:
+
+```javascript
+marked.use(markedExtendedTabs({
+    enableFocusManagement: true  // Default: true
+}));
+```
+
+#### 💾 State Persistence
+
+Tab selection is automatically persisted to localStorage:
+
+- Each tab container has a unique storage key
+- When the page is reloaded, the previously selected tab is restored
+- Multiple tab groups maintain separate states
+- Works across browser sessions
+
+Enable/disable with:
+
+```javascript
+marked.use(markedExtendedTabs({
+    persistSelection: true  // Default: true
+}));
+```
+
+Storage key format: `marked-extended-tabs-active-{containerId}`
+
+#### 🎪 Custom Events
+
+When a tab is switched, a custom `tab-switched` event is automatically dispatched:
+
+```javascript
+document.addEventListener('tab-switched', (event) => {
+    console.log('Tab switched:', event.detail.tabId);
+    console.log('Timestamp:', event.detail.timestamp);
+});
+```
+
+Event detail structure:
+
+```javascript
+{
+    tabId: string;        // ID of the newly active tab
+    timestamp: number;    // Timestamp of the switch event (milliseconds)
+}
+```
+
+#### 🔄 Callback Hooks
+
+Execute custom logic before and after tab switches using callback functions:
+
+```javascript
+marked.use(markedExtendedTabs({
+    onBeforeSwitch: (event) => {
+        console.log('Switching from', event.previousTabId, 'to', event.newTabId);
+        // Return false to prevent the switch
+        return true;
+    },
+    onAfterSwitch: (event) => {
+        console.log('Switched to tab:', event.newTabId);
+    }
+}));
+```
+
+**onBeforeSwitch event detail:**
+
+```javascript
+{
+    previousTabId: string | null;  // ID of the currently active tab (null on first)
+    newTabId: string;               // ID of the tab being switched to
+    tabIndex: number;               // Index of the new tab
+    timestamp: number;              // Timestamp of the event
+}
+```
+
+Return `false` from `onBeforeSwitch` to prevent the tab switch. Return `true` or any truthy value to allow it.
+
+**onAfterSwitch event detail:**
+
+```javascript
+{
+    previousTabId: string | null;  // ID of the previously active tab (null on first)
+    newTabId: string;               // ID of the newly active tab
+    tabIndex: number;               // Index of the new tab
+    timestamp: number;              // Timestamp of the event
+}
+```
+
+#### 📋 Complete Configuration Example
+
+```javascript
+import {marked} from 'marked';
+import markedExtendedTabs from '@fsegurai/marked-extended-tabs';
+import '@fsegurai/marked-extended-tabs/styles/tabs.css';
+
+marked.use(markedExtendedTabs({
+    animation: 'fade',
+    autoActivate: true,
+    persistSelection: true,
+    enableKeyboardNavigation: true,
+    enableFocusManagement: true,
+
+    onBeforeSwitch: (event) => {
+        // Validate or prevent switches based on your logic
+        if (someUnsavedChanges) {
+            console.warn('Cannot switch - unsaved changes');
+            return false;  // Prevent switch
+        }
+        return true;  // Allow switch
+    },
+
+    onAfterSwitch: (event) => {
+        // Track analytics or update other UI elements
+        analytics.trackEvent('tab_switched', {
+            tab_id: event.newTabId,
+            tab_index: event.tabIndex
+        });
+    }
+}));
+```
+
 ### Animation Types
 
 The extension supports three animation types:
@@ -813,16 +981,16 @@ marked.use(markedExtendedTabs({
 
 The extension provides comprehensive tab functionality:
 
-| Feature | Description | Example | Default |
-|---------|-------------|---------|---------|
-| **Labels** | Tab header text | `label="Overview"` | "Tab N" |
-| **Icons** | Emoji or Unicode | `icon="📋"` | None |
-| **Active State** | Default active tab | `active="true"` | First tab (if autoActivate) |
-| **Animations** | Transition effects | `animation="fade"` | "fade" |
-| **Persist Selection** | Remember choice | `persistSelection: true` | false |
-| **Auto-Activate** | First tab active | `autoActivate: true` | true |
-| **Rich Content** | Full Markdown | All Markdown syntax | Supported |
-| **Nested Extensions** | Other extensions | Accordions, tables, etc. | Supported |
+| Feature               | Description        | Example                  | Default                     |
+|-----------------------|--------------------|--------------------------|-----------------------------|
+| **Labels**            | Tab header text    | `label="Overview"`       | "Tab N"                     |
+| **Icons**             | Emoji or Unicode   | `icon="📋"`              | None                        |
+| **Active State**      | Default active tab | `active="true"`          | First tab (if autoActivate) |
+| **Animations**        | Transition effects | `animation="fade"`       | "fade"                      |
+| **Persist Selection** | Remember choice    | `persistSelection: true` | false                       |
+| **Auto-Activate**     | First tab active   | `autoActivate: true`     | true                        |
+| **Rich Content**      | Full Markdown      | All Markdown syntax      | Supported                   |
+| **Nested Extensions** | Other extensions   | Accordions, tables, etc. | Supported                   |
 
 ### Best Practices
 
@@ -880,24 +1048,34 @@ The extension provides comprehensive tab functionality:
 <!-- Good: Similar structure across tabs -->
 ::::tabs
 :::tab{label="JavaScript" icon="📜"}
+
 ## Installation
+
 \`\`\`bash
 npm install
 \`\`\`
+
 ## Usage
+
 \`\`\`javascript
 // code
 \`\`\`
 :::tabend
 
 :::tab{label="Python" icon="🐍"}
+
 ## Installation
+
 \`\`\`bash
 pip install
 \`\`\`
+
 ## Usage
+
 \`\`\`python
+
 # code
+
 \`\`\`
 :::tabend
 ::::tabsend
@@ -905,7 +1083,9 @@ pip install
 <!-- Avoid: Inconsistent structure -->
 ::::tabs
 :::tab{label="Tab 1"}
+
 # Heading
+
 Content
 :::tabend
 
@@ -951,18 +1131,19 @@ For experienced users
 
 ::::tabs
 :::tab{label="JavaScript" icon="📜" active="true"}
+
 ### Using Fetch API
 
 \`\`\`javascript
 const response = await fetch('https://api.example.com/auth/login', {
-  method: 'POST',
-  headers: {
-    'Content-Type': 'application/json'
-  },
-  body: JSON.stringify({
-    username: 'user@example.com',
-    password: 'secure_password'
-  })
+method: 'POST',
+headers: {
+'Content-Type': 'application/json'
+},
+body: JSON.stringify({
+username: 'user@example.com',
+password: 'secure_password'
+})
 });
 
 const data = await response.json();
@@ -970,9 +1151,9 @@ console.log('Token:', data.access_token);
 
 // Use token in subsequent requests
 const userData = await fetch('https://api.example.com/user/profile', {
-  headers: {
-    'Authorization': \`Bearer \${data.access_token}\`
-  }
+headers: {
+'Authorization': \`Bearer \${data.access_token}\`
+}
 });
 \`\`\`
 
@@ -982,8 +1163,8 @@ const userData = await fetch('https://api.example.com/user/profile', {
 import axios from 'axios';
 
 const { data } = await axios.post('https://api.example.com/auth/login', {
-  username: 'user@example.com',
-  password: 'secure_password'
+username: 'user@example.com',
+password: 'secure_password'
 });
 
 console.log('Token:', data.access_token);
@@ -994,18 +1175,20 @@ axios.defaults.headers.common['Authorization'] = \`Bearer \${data.access_token}\
 :::tabend
 
 :::tab{label="Python" icon="🐍"}
+
 ### Using Requests
 
 \`\`\`python
 import requests
 
 # Login request
+
 response = requests.post(
-    'https://api.example.com/auth/login',
-    json={
-        'username': 'user@example.com',
-        'password': 'secure_password'
-    }
+'https://api.example.com/auth/login',
+json={
+'username': 'user@example.com',
+'password': 'secure_password'
+}
 )
 
 data = response.json()
@@ -1013,9 +1196,10 @@ access_token = data['access_token']
 print(f'Token: {access_token}')
 
 # Use token for authenticated requests
+
 user_response = requests.get(
-    'https://api.example.com/user/profile',
-    headers={'Authorization': f'Bearer {access_token}'}
+'https://api.example.com/user/profile',
+headers={'Authorization': f'Bearer {access_token}'}
 )
 
 print(user_response.json())
@@ -1028,54 +1212,56 @@ import httpx
 import asyncio
 
 async def authenticate():
-    async with httpx.AsyncClient() as client:
-        # Login
-        response = await client.post(
-            'https://api.example.com/auth/login',
-            json={
-                'username': 'user@example.com',
-                'password': 'secure_password'
-            }
-        )
-        
+async with httpx.AsyncClient() as client:
+# Login
+response = await client.post(
+'https://api.example.com/auth/login',
+json={
+'username': 'user@example.com',
+'password': 'secure_password'
+}
+)
+
         data = response.json()
         return data['access_token']
 
 # Run async function
+
 token = asyncio.run(authenticate())
 \`\`\`
 :::tabend
 
 :::tab{label="Go" icon="🔷"}
+
 ### Using net/http
 
 \`\`\`go
 package main
 
 import (
-    "bytes"
-    "encoding/json"
-    "fmt"
-    "io/ioutil"
-    "net/http"
+"bytes"
+"encoding/json"
+"fmt"
+"io/ioutil"
+"net/http"
 )
 
 type LoginRequest struct {
-    Username string \`json:"username"\`
-    Password string \`json:"password"\`
+Username string \`json:"username"\`
+Password string \`json:"password"\`
 }
 
 type LoginResponse struct {
-    AccessToken string \`json:"access_token"\`
+AccessToken string \`json:"access_token"\`
 }
 
 func main() {
-    // Prepare login request
-    loginData := LoginRequest{
-        Username: "user@example.com",
-        Password: "secure_password",
-    }
-    
+// Prepare login request
+loginData := LoginRequest{
+Username: "user@example.com",
+Password: "secure_password",
+}
+
     jsonData, _ := json.Marshal(loginData)
     
     // Make request
@@ -1095,40 +1281,45 @@ func main() {
     json.Unmarshal(body, &loginResp)
     
     fmt.Println("Token:", loginResp.AccessToken)
+
 }
 \`\`\`
 :::tabend
 
 :::tab{label="cURL" icon="🔧"}
+
 ### Basic Authentication Request
 
 \`\`\`bash
 curl -X POST https://api.example.com/auth/login \\
-  -H "Content-Type: application/json" \\
-  -d '{
-    "username": "user@example.com",
-    "password": "secure_password"
-  }'
+-H "Content-Type: application/json" \\
+-d '{
+"username": "user@example.com",
+"password": "secure_password"
+}'
 \`\`\`
 
 **Response:**
 \`\`\`json
 {
-  "access_token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...",
-  "token_type": "Bearer",
-  "expires_in": 3600
+"access_token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...",
+"token_type": "Bearer",
+"expires_in": 3600
 }
 \`\`\`
 
 ### Using the Token
 
 \`\`\`bash
+
 # Save token to variable
+
 TOKEN="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9..."
 
 # Make authenticated request
+
 curl -X GET https://api.example.com/user/profile \\
-  -H "Authorization: Bearer \$TOKEN"
+-H "Authorization: Bearer \$TOKEN"
 \`\`\`
 :::tabend
 ::::tabsend
@@ -1139,11 +1330,11 @@ All endpoints return standard error responses:
 
 \`\`\`json
 {
-  "error": {
-    "code": "INVALID_CREDENTIALS",
-    "message": "The username or password is incorrect",
-    "timestamp": "2026-02-17T10:30:00Z"
-  }
+"error": {
+"code": "INVALID_CREDENTIALS",
+"message": "The username or password is incorrect",
+"timestamp": "2026-02-17T10:30:00Z"
+}
 }
 \`\`\`
 ```
@@ -1157,11 +1348,12 @@ All endpoints return standard error responses:
 
 ::::tabs
 :::tab{label="Windows" icon="🪟" active="true"}
+
 ### Using Installer
 
 1. **Download** the Windows installer:
-   - [Download for Windows (64-bit)](https://example.com/download/windows-x64)
-   - [Download for Windows (32-bit)](https://example.com/download/windows-x86)
+    - [Download for Windows (64-bit)](https://example.com/download/windows-x64)
+    - [Download for Windows (32-bit)](https://example.com/download/windows-x86)
 
 2. **Run** the installer and follow the setup wizard
 
@@ -1193,12 +1385,14 @@ winget install MyCompany.MyApp
 
 **"Command not found" error:**
 Add installation directory to PATH:
+
 1. Open System Properties → Environment Variables
 2. Edit PATH variable
 3. Add: \`C:\\Program Files\\MyApp\\bin\`
-:::tabend
+   :::tabend
 
 :::tab{label="macOS" icon="🍎"}
+
 ### Using Homebrew (Recommended)
 
 \`\`\`bash
@@ -1208,8 +1402,8 @@ brew install myapp
 ### Using DMG Installer
 
 1. **Download** the macOS installer:
-   - [Download for macOS (Apple Silicon)](https://example.com/download/macos-arm64)
-   - [Download for macOS (Intel)](https://example.com/download/macos-x64)
+    - [Download for macOS (Apple Silicon)](https://example.com/download/macos-arm64)
+    - [Download for macOS (Intel)](https://example.com/download/macos-x64)
 
 2. **Open** the .dmg file
 
@@ -1233,6 +1427,7 @@ Right-click the app → Open → Confirm to bypass Gatekeeper
 :::tabend
 
 :::tab{label="Linux" icon="🐧"}
+
 ### Using Package Manager
 
 **Ubuntu/Debian:**
@@ -1283,6 +1478,7 @@ which myapp
 :::tabend
 
 :::tab{label="Docker" icon="🐳"}
+
 ### Using Docker
 
 Pull the official image:
@@ -1293,10 +1489,10 @@ docker pull mycompany/myapp:latest
 Run the container:
 \`\`\`bash
 docker run -d \\
-  --name myapp \\
-  -p 8080:8080 \\
-  -v \$(pwd)/data:/app/data \\
-  mycompany/myapp:latest
+--name myapp \\
+-p 8080:8080 \\
+-v \$(pwd)/data:/app/data \\
+mycompany/myapp:latest
 \`\`\`
 
 ### Using Docker Compose
@@ -1305,15 +1501,15 @@ Create \`docker-compose.yml\`:
 \`\`\`yaml
 version: '3.8'
 services:
-  myapp:
-    image: mycompany/myapp:latest
-    ports:
-      - "8080:8080"
-    volumes:
-      - ./data:/app/data
-    environment:
-      - APP_ENV=production
-      - LOG_LEVEL=info
+myapp:
+image: mycompany/myapp:latest
+ports:
+- "8080:8080"
+volumes:
+- ./data:/app/data
+environment:
+- APP_ENV=production
+- LOG_LEVEL=info
 \`\`\`
 
 Start services:
@@ -1327,8 +1523,8 @@ docker-compose up -d
 - \`2.0.5\` - Specific version
 - \`alpine\` - Lightweight Alpine-based image
 - \`dev\` - Development build
-:::tabend
-::::tabsend
+  :::tabend
+  ::::tabsend
 
 ## Post-Installation
 
@@ -1349,11 +1545,13 @@ myapp config set api-key YOUR_KEY
 
 ::::tabs
 :::tab{label="React" icon="⚛️" active="true"}
+
 ### Overview
 
 React is a JavaScript library for building user interfaces, focusing on component-based architecture.
 
 **Pros:**
+
 - ✅ Large ecosystem and community
 - ✅ Virtual DOM for performance
 - ✅ Flexible and unopinionated
@@ -1361,6 +1559,7 @@ React is a JavaScript library for building user interfaces, focusing on componen
 - ✅ Strong TypeScript support
 
 **Cons:**
+
 - ❌ Steep learning curve
 - ❌ JSX syntax to learn
 - ❌ Need additional libraries for routing, state
@@ -1371,17 +1570,17 @@ React is a JavaScript library for building user interfaces, focusing on componen
 import React from 'react';
 
 function App() {
-  const [count, setCount] = React.useState(0);
-  
-  return (
-    <div>
-      <h1>Hello, React!</h1>
-      <p>Count: {count}</p>
-      <button onClick={() => setCount(count + 1)}>
-        Increment
-      </button>
-    </div>
-  );
+const [count, setCount] = React.useState(0);
+
+return (
+<div>
+<h1>Hello, React!</h1>
+<p>Count: {count}</p>
+<button onClick={() => setCount(count + 1)}>
+Increment
+</button>
+</div>
+);
 }
 
 export default App;
@@ -1393,14 +1592,16 @@ export default App;
 - Need flexibility in architecture
 - Large team with React expertise
 - Mobile app with React Native
-:::tabend
+  :::tabend
 
 :::tab{label="Vue" icon="💚"}
+
 ### Overview
 
 Vue is a progressive framework for building user interfaces with a gentle learning curve.
 
 **Pros:**
+
 - ✅ Easy to learn
 - ✅ Great documentation
 - ✅ Two-way data binding
@@ -1408,6 +1609,7 @@ Vue is a progressive framework for building user interfaces with a gentle learni
 - ✅ Template syntax familiar to HTML
 
 **Cons:**
+
 - ❌ Smaller ecosystem than React
 - ❌ Less corporate backing
 - ❌ Fewer job opportunities
@@ -1438,14 +1640,16 @@ const count = ref(0);
 - Small to medium projects
 - Team with HTML/CSS background
 - Gradual migration from legacy code
-:::tabend
+  :::tabend
 
 :::tab{label="Angular" icon="🅰️"}
+
 ### Overview
 
 Angular is a full-featured framework with batteries included for enterprise applications.
 
 **Pros:**
+
 - ✅ Complete solution (routing, HTTP, forms)
 - ✅ TypeScript by default
 - ✅ Strong corporate backing (Google)
@@ -1453,6 +1657,7 @@ Angular is a full-featured framework with batteries included for enterprise appl
 - ✅ CLI tooling
 
 **Cons:**
+
 - ❌ Steeper learning curve
 - ❌ Larger bundle size
 - ❌ More opinionated
@@ -1464,23 +1669,23 @@ Angular is a full-featured framework with batteries included for enterprise appl
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'app-root',
-  template: \`
-    <div>
-      <h1>Hello, Angular!</h1>
-      <p>Count: {{ count }}</p>
-      <button (click)="increment()">
-        Increment
-      </button>
-    </div>
-  \`
+selector: 'app-root',
+template: \`
+<div>
+<h1>Hello, Angular!</h1>
+<p>Count: {{ count }}</p>
+<button (click)="increment()">
+Increment
+</button>
+</div>
+\`
 })
 export class AppComponent {
-  count = 0;
-  
-  increment() {
-    this.count++;
-  }
+count = 0;
+
+increment() {
+this.count++;
+}
 }
 \`\`\`
 
@@ -1490,9 +1695,10 @@ export class AppComponent {
 - Large teams
 - Need complete framework
 - TypeScript-first development
-:::tabend
+  :::tabend
 
 :::tab{label="Comparison" icon="📊"}
+
 ### Side-by-Side Comparison
 
 | Feature | React | Vue | Angular |
@@ -1530,6 +1736,7 @@ export class AppComponent {
 ## Making Your Choice
 
 Consider your:
+
 - Team expertise
 - Project requirements
 - Timeline
@@ -1545,27 +1752,35 @@ Consider your:
 
 ::::tabs
 :::tab{label="Development" icon="💻" active="true"}
+
 ### Development Environment Setup
 
 \`\`\`bash
+
 # Install dependencies
+
 npm install
 
 # Copy environment file
+
 cp .env.example .env.development
 
 # Start dev server
+
 npm run dev
 \`\`\`
 
 ### Configuration (\`.env.development\`)
 
 \`\`\`env
+
 # API Configuration
+
 API_URL=http://localhost:3000
 API_KEY=dev_key_1234567890
 
 # Database
+
 DB_HOST=localhost
 DB_PORT=5432
 DB_NAME=myapp_dev
@@ -1573,11 +1788,13 @@ DB_USER=dev_user
 DB_PASSWORD=dev_password
 
 # Features
+
 ENABLE_DEBUG=true
 ENABLE_HOT_RELOAD=true
 ENABLE_SOURCE_MAPS=true
 
 # Logging
+
 LOG_LEVEL=debug
 LOG_TO_FILE=false
 \`\`\`
@@ -1589,27 +1806,34 @@ LOG_TO_FILE=false
 - ✅ Verbose logging
 - ✅ Mock API responses
 - ✅ Local database
-:::tabend
+  :::tabend
 
 :::tab{label="Staging" icon="🧪"}
+
 ### Staging Environment Setup
 
 \`\`\`bash
+
 # Build for staging
+
 npm run build:staging
 
 # Deploy to staging
+
 npm run deploy:staging
 \`\`\`
 
 ### Configuration (\`.env.staging\`)
 
 \`\`\`env
+
 # API Configuration
+
 API_URL=https://staging-api.example.com
 API_KEY=staging_key_secure_token
 
 # Database
+
 DB_HOST=staging-db.example.com
 DB_PORT=5432
 DB_NAME=myapp_staging
@@ -1617,16 +1841,19 @@ DB_USER=staging_user
 DB_PASSWORD=staging_secure_password
 
 # Features
+
 ENABLE_DEBUG=false
 ENABLE_HOT_RELOAD=false
 ENABLE_SOURCE_MAPS=true
 
 # Logging
+
 LOG_LEVEL=info
 LOG_TO_FILE=true
 LOG_PATH=/var/log/myapp
 
 # Monitoring
+
 SENTRY_DSN=https://...@sentry.io/staging
 ANALYTICS_ID=staging-analytics-id
 \`\`\`
@@ -1638,27 +1865,34 @@ ANALYTICS_ID=staging-analytics-id
 - ✅ Error tracking enabled
 - ✅ Performance monitoring
 - ✅ QA testing environment
-:::tabend
+  :::tabend
 
 :::tab{label="Production" icon="🚀"}
+
 ### Production Environment Setup
 
 \`\`\`bash
+
 # Build for production
+
 npm run build:production
 
 # Deploy to production
+
 npm run deploy:production
 \`\`\`
 
 ### Configuration (\`.env.production\`)
 
 \`\`\`env
+
 # API Configuration
+
 API_URL=https://api.example.com
 API_KEY=prod_key_super_secure_token
 
 # Database
+
 DB_HOST=prod-db.example.com
 DB_PORT=5432
 DB_NAME=myapp_prod
@@ -1666,26 +1900,31 @@ DB_USER=prod_user
 DB_PASSWORD=prod_ultra_secure_password
 
 # Features
+
 ENABLE_DEBUG=false
 ENABLE_HOT_RELOAD=false
 ENABLE_SOURCE_MAPS=false
 
 # Logging
+
 LOG_LEVEL=error
 LOG_TO_FILE=true
 LOG_PATH=/var/log/myapp
 LOG_ROTATION=daily
 
 # Monitoring
+
 SENTRY_DSN=https://...@sentry.io/production
 ANALYTICS_ID=prod-analytics-id
 
 # Performance
+
 ENABLE_CACHING=true
 CACHE_TTL=3600
 CDN_URL=https://cdn.example.com
 
 # Security
+
 RATE_LIMIT=100
 CORS_ORIGIN=https://example.com
 SSL_CERT=/path/to/cert.pem
@@ -1700,9 +1939,10 @@ SSL_CERT=/path/to/cert.pem
 - ✅ Monitoring and alerts
 - ✅ Automated backups
 - ✅ Load balancing
-:::tabend
+  :::tabend
 
 :::tab{label="Docker" icon="🐳"}
+
 ### Docker Configuration
 
 Create \`docker-compose.yml\` per environment:
@@ -1711,44 +1951,46 @@ Create \`docker-compose.yml\` per environment:
 \`\`\`yaml
 version: '3.8'
 services:
-  app:
-    build:
-      context: .
-      target: development
-    ports:
-      - "3000:3000"
-    volumes:
-      - .:/app
-      - /app/node_modules
-    environment:
-      - NODE_ENV=development
-    command: npm run dev
+app:
+build:
+context: .
+target: development
+ports:
+- "3000:3000"
+volumes:
+- .:/app
+- /app/node_modules
+environment:
+- NODE_ENV=development
+command: npm run dev
 \`\`\`
 
 **Production:**
 \`\`\`yaml
 version: '3.8'
 services:
-  app:
-    build:
-      context: .
-      target: production
-    ports:
-      - "3000:3000"
-    environment:
-      - NODE_ENV=production
-    restart: always
-    healthcheck:
-      test: ["CMD", "curl", "-f", "http://localhost:3000/health"]
+app:
+build:
+context: .
+target: production
+ports:
+- "3000:3000"
+environment:
+- NODE_ENV=production
+restart: always
+healthcheck:
+test: ["CMD", "curl", "-f", "http://localhost:3000/health"]
       interval: 30s
-      timeout: 10s
-      retries: 3
+timeout: 10s
+retries: 3
 \`\`\`
 
 ### Multi-stage Dockerfile
 
 \`\`\`dockerfile
+
 # Development stage
+
 FROM node:18-alpine AS development
 WORKDIR /app
 COPY package*.json ./
@@ -1757,6 +1999,7 @@ COPY . .
 CMD ["npm", "run", "dev"]
 
 # Production stage
+
 FROM node:18-alpine AS production
 WORKDIR /app
 COPY package*.json ./
@@ -1786,19 +2029,22 @@ CMD ["npm", "start"]
 **Solutions**:
 
 1. **Import CSS:**
+
 ```javascript
 import '@fsegurai/marked-extended-tabs/styles/tabs.css';
 ```
 
 2. **Check for conflicting styles:**
+
 ```css
 /* Make sure nothing is overriding tab display */
 .marked-extended-tabs-content-pane {
-  display: none; /* Should be hidden by default */
+    display: none; /* Should be hidden by default */
 }
 ```
 
 3. **Verify tab structure:**
+
 ```markdown
 <!-- Ensure proper nesting -->
 ::::tabs
@@ -1815,6 +2061,7 @@ Content
 **Solutions**:
 
 1. **Use valid Unicode/emoji:**
+
 ```markdown
 <!-- Correct -->
 :::tab{label="Code" icon="📜"}
@@ -1825,10 +2072,11 @@ Content
 ```
 
 2. **Check font support:**
+
 ```css
 /* Ensure emoji font is loaded */
 .marked-extended-tabs-icon {
-  font-family: "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
+    font-family: "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
 }
 ```
 
@@ -1839,13 +2087,15 @@ Content
 **Solutions**:
 
 1. **Set animation type:**
+
 ```javascript
 marked.use(markedExtendedTabs({
-  animation: 'fade'  // or 'slide'
+    animation: 'fade'  // or 'slide'
 }));
 ```
 
 2. **Import theme CSS:**
+
 ```javascript
 import '@fsegurai/marked-extended-tabs/styles/tabs-theme.css';
 ```
@@ -1855,14 +2105,16 @@ import '@fsegurai/marked-extended-tabs/styles/tabs-theme.css';
 **Problem**: No tab is active by default.
 
 **Solution**:
+
 ```javascript
 // Enable auto-activation
 marked.use(markedExtendedTabs({
-  autoActivate: true  // Default is true
+    autoActivate: true  // Default is true
 }));
 ```
 
 Or mark a tab as active:
+
 ```markdown
 :::tab{label="Tab 1" active="true"}
 ```
@@ -1873,37 +2125,37 @@ Or mark a tab as active:
 
 ```tsx
 // TabsContent.tsx
-import { marked } from 'marked';
+import {marked} from 'marked';
 import markedExtendedTabs from '@fsegurai/marked-extended-tabs';
 import '@fsegurai/marked-extended-tabs/styles/tabs.css';
 import '@fsegurai/marked-extended-tabs/styles/tabs-theme.css';
-import { useEffect, useState } from 'react';
+import {useEffect, useState} from 'react';
 
 marked.use(markedExtendedTabs({
-  animation: 'fade',
-  autoActivate: true
+    animation: 'fade',
+    autoActivate: true
 }));
 
 interface Props {
-  content: string;
-  animation?: 'fade' | 'slide' | 'none';
+    content: string;
+    animation?: 'fade' | 'slide' | 'none';
 }
 
-export function TabsContent({ content, animation = 'fade' }: Props) {
-  const [html, setHtml] = useState('');
-  
-  useEffect(() => {
-    marked.use(markedExtendedTabs({ animation }));
-    const parsed = marked.parse(content);
-    setHtml(parsed);
-  }, [content, animation]);
-  
-  return (
-    <div 
-      className="tabs-wrapper"
-      dangerouslySetInnerHTML={{ __html: html }} 
-    />
-  );
+export function TabsContent({content, animation = 'fade'}: Props) {
+    const [html, setHtml] = useState('');
+
+    useEffect(() => {
+        marked.use(markedExtendedTabs({animation}));
+        const parsed = marked.parse(content);
+        setHtml(parsed);
+    }, [content, animation]);
+
+    return (
+            <div
+                    className="tabs-wrapper"
+                    dangerouslySetInnerHTML={{__html: html}}
+            />
+    );
 }
 
 // Usage:
@@ -1948,18 +2200,18 @@ const html = computed(() => {
 
 ```typescript
 // tabs-content.component.ts
-import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
-import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
-import { marked } from 'marked';
+import {Component, Input, OnChanges, SimpleChanges} from '@angular/core';
+import {DomSanitizer, SafeHtml} from '@angular/platform-browser';
+import {marked} from 'marked';
 import markedExtendedTabs from '@fsegurai/marked-extended-tabs';
 
 marked.use(markedExtendedTabs({
-  animation: 'fade'
+    animation: 'fade'
 }));
 
 @Component({
-  selector: 'app-tabs-content',
-  template: \`<div [innerHTML]="parsedContent"></div>\`,
+    selector: 'app-tabs-content',
+    template: \`<div [innerHTML]="parsedContent"></div>\`,
   styleUrls: [
     '../node_modules/@fsegurai/marked-extended-tabs/styles/tabs.css',
     '../node_modules/@fsegurai/marked-extended-tabs/styles/tabs-theme.css'
@@ -1991,13 +2243,14 @@ export class TabsContentComponent implements OnChanges {
 ```javascript
 // Disable animations for better performance
 marked.use(markedExtendedTabs({
-  animation: 'none'
+    animation: 'none'
 }));
 ```
 
 ### Contributing
 
-Found a bug or have a feature request? Please open an issue on [GitHub](https://github.com/fsegurai/marked-extensions/issues).
+Found a bug or have a feature request? Please open an issue
+on [GitHub](https://github.com/fsegurai/marked-extensions/issues).
 
 ### Related Resources