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

package/README.custom.md

@@ -1,44 +1,379 @@
 <!-- SECTION:CUSTOM_INTRO -->
----
 
-This extension enables you to create interactive tabbed content sections with support for custom icons, animations, and
-nested Markdown content. All tabs are implemented using CSS-only interactions, providing excellent performance and
-accessibility.
+## 🎯 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.
+
+### ✨ Key Features
+
+- 📑 **Interactive Tabs**: Create multi-tab content sections with easy navigation
+- 🎨 **Custom Icons**: Add emojis or Unicode icons to tab headers
+- ✨ **3 Animation Types**: Fade, slide, or no animation between tabs
+- 🚀 **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
+- 🎯 **Auto-Activation**: Automatically activate first tab
+- 💾 **Persist Selection**: Remember tab choice across sessions
+- 🎨 **Customizable Styles**: Multiple variants (compact, vertical, pills)
+- 🌈 **Dark Mode Ready**: Theme support included
+- 📱 **Responsive**: Mobile-friendly with scrollable tabs
+- 🔧 **Highly Configurable**: Extensive customization options
+
+### 🎪 Live Demo
+
+Experience all tab styles and animations: [View Demo](https://fsegurai.github.io/marked-extensions)
+
+---
 
 <!-- SECTION:CUSTOM_TOC_USAGE -->
 
-	- [Aliases](#aliases)
-	- [Configuration Options](#configuration-options)
+	- [Quick Start](#quick-start)
+	- [Syntax & Usage](#syntax--usage)
+	- [Tab Features](#tab-features)
 	- [Animation Types](#animation-types)
+	- [Configuration Options](#configuration-options)
+	- [Use Cases](#use-cases)
+	- [Aliases](#aliases)
 	- [Advanced Examples](#advanced-examples)
 
 <!-- SECTION:CUSTOM_BASIC_USAGE -->
-**`tabs` is the identifier for the extended tabs block, and `tab` for individual tab items.**
+
+## Quick Start
+
+### 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.**
 
 <!-- SECTION:CUSTOM_USAGE_EXAMPLE -->
-const exampleMarkdown = `
+
+### Installation
+
+Install the package using your preferred package manager:
+
+```bash
+# Using Bun (recommended)
+bun add @fsegurai/marked-extended-tabs
+
+# Using npm
+npm install @fsegurai/marked-extended-tabs
+
+# Using yarn
+yarn add @fsegurai/marked-extended-tabs
+
+# Using pnpm
+pnpm add @fsegurai/marked-extended-tabs
+```
+
+### Basic Implementation
+
+```javascript
+import { marked } from 'marked';
+import markedExtendedTabs from '@fsegurai/marked-extended-tabs';
+
+// Import styles (required for functionality)
+import '@fsegurai/marked-extended-tabs/styles/tabs.css';
+// Optional: Import theme for enhanced visuals
+import '@fsegurai/marked-extended-tabs/styles/tabs-theme.css';
+
+// Register the extension
+marked.use(markedExtendedTabs({
+  animation: 'fade',
+  autoActivate: true,
+  persistSelection: false
+}));
+
+// Your markdown content with tabs
+const markdown = `
+# API Documentation
+
+## Quick Start Guide
+
 ::::tabs
-:::tab{label="JavaScript" active="true"}
+:::tab{label="JavaScript" icon="📜" active="true"}
+## Installation
+
+\`\`\`bash
+npm install @myapi/client
+\`\`\`
+
+## Basic Usage
+
 \`\`\`javascript
-console.log("Hello from JavaScript!");
+import { APIClient } from '@myapi/client';
+
+const client = new APIClient({
+  apiKey: 'your-api-key',
+  baseURL: 'https://api.example.com'
+});
+
+// Fetch data
+const users = await client.users.list();
+console.log(users);
+
+// Create a resource
+const newUser = await client.users.create({
+  name: 'John Doe',
+  email: 'john@example.com'
+});
 \`\`\`
+
+**Key Features:**
+- ✅ TypeScript support
+- ✅ Promise-based API
+- ✅ Automatic retries
+- ✅ Request/response interceptors
 :::tabend
 
 :::tab{label="Python" icon="🐍"}
+## Installation
+
+\`\`\`bash
+pip install myapi-client
+\`\`\`
+
+## Basic Usage
+
 \`\`\`python
-print("Hello from Python!")
+from myapi import APIClient
+
+# Initialize client
+client = APIClient(
+    api_key='your-api-key',
+    base_url='https://api.example.com'
+)
+
+# Fetch data
+users = client.users.list()
+print(users)
+
+# Create a resource
+new_user = client.users.create(
+    name='John Doe',
+    email='john@example.com'
+)
+\`\`\`
+
+**Key Features:**
+- ✅ Type hints included
+- ✅ Async/await support
+- ✅ Automatic pagination
+- ✅ Built-in error handling
+:::tabend
+
+:::tab{label="cURL" icon="🔧"}
+## Authentication
+
+Add your API key to the request headers:
+
+\`\`\`bash
+curl -H "Authorization: Bearer YOUR_API_KEY" \\
+     https://api.example.com/users
+\`\`\`
+
+## List Users
+
+\`\`\`bash
+curl -X GET https://api.example.com/users \\
+     -H "Authorization: Bearer YOUR_API_KEY" \\
+     -H "Content-Type: application/json"
+\`\`\`
+
+## Create User
+
+\`\`\`bash
+curl -X POST https://api.example.com/users \\
+     -H "Authorization: Bearer YOUR_API_KEY" \\
+     -H "Content-Type: application/json" \\
+     -d '{
+       "name": "John Doe",
+       "email": "john@example.com"
+     }'
+\`\`\`
+
+**Response:**
+\`\`\`json
+{
+  "id": "usr_123",
+  "name": "John Doe",
+  "email": "john@example.com",
+  "created_at": "2026-02-17T10:00:00Z"
+}
 \`\`\`
 :::tabend
 
-:::tab{label="HTML" icon="🌐"}
-\`\`\`html
-<h1>Hello from HTML!</h1>
+:::tab{label="Ruby" icon="💎"}
+## Installation
+
+\`\`\`bash
+gem install myapi-client
+\`\`\`
+
+## Basic Usage
+
+\`\`\`ruby
+require 'myapi'
+
+# Initialize client
+client = MyAPI::Client.new(
+  api_key: 'your-api-key',
+  base_url: 'https://api.example.com'
+)
+
+# Fetch data
+users = client.users.list
+puts users
+
+# Create a resource
+new_user = client.users.create(
+  name: 'John Doe',
+  email: 'john@example.com'
+)
 \`\`\`
+
+**Key Features:**
+- ✅ Ruby 3.0+ compatible
+- ✅ ActiveRecord-style interface
+- ✅ Comprehensive test suite
+- ✅ Webhook support
 :::tabend
 ::::tabsend
+
+## Response Format
+
+All API responses follow this structure:
+
+\`\`\`json
+{
+  "data": { /* Your resource */ },
+  "meta": {
+    "timestamp": "2026-02-17T10:00:00Z",
+    "version": "v2.0"
+  }
+}
+\`\`\`
 `;
 
-marked.parse(exampleMarkdown);
+// Parse and render
+const html = marked.parse(markdown);
+document.getElementById('content').innerHTML = html;
+```
+
+### Syntax & Usage
+
+#### Basic Tabs
+
+Create simple tabs with labels:
+
+```markdown
+::::tabs
+:::tab{label="Tab 1" active="true"}
+Content for tab 1
+:::tabend
+
+:::tab{label="Tab 2"}
+Content for tab 2
+:::tabend
+
+:::tab{label="Tab 3"}
+Content for tab 3
+:::tabend
+::::tabsend
+```
+
+#### Tabs with Icons
+
+Add emojis or Unicode icons:
+
+```markdown
+::::tabs
+:::tab{label="JavaScript" icon="📜" active="true"}
+JavaScript code here
+:::tabend
+
+:::tab{label="Python" icon="🐍"}
+Python code here
+:::tabend
+
+:::tab{label="Ruby" icon="💎"}
+Ruby code here
+:::tabend
+::::tabsend
+```
+
+#### Auto-Active First Tab
+
+When no tab has `active="true"`, the first tab activates automatically (if `autoActivate: true`):
+
+```markdown
+::::tabs
+:::tab{label="Overview"}
+First tab (auto-active)
+:::tabend
+
+:::tab{label="Details"}
+Second tab
+:::tabend
+::::tabsend
+```
+
+#### Rich Content in Tabs
+
+Tabs support full Markdown:
+
+```markdown
+::::tabs
+:::tab{label="Documentation" icon="📖" active="true"}
+# Getting Started
+
+Follow these steps:
+
+1. Install the package
+2. Import the library
+3. Initialize the client
+
+## Code Example
+
+\`\`\`javascript
+import { Client } from 'mylib';
+const client = new Client();
+\`\`\`
+
+**Important**: Don't forget to set your API key!
+
+[Read more →](https://docs.example.com)
+:::tabend
+
+:::tab{label="FAQ" icon="❓"}
+## Frequently Asked Questions
+
+### How do I authenticate?
+
+Use your API key in the Authorization header.
+
+### What's the rate limit?
+
+- Free tier: 100 requests/hour
+- Pro tier: 10,000 requests/hour
+- Enterprise: Custom limits
+:::tabend
+::::tabsend
+```
+
+#### Short Aliases
+
+Use shorter syntax:
+
+```markdown
+:tabs
+:tab{label="Tab 1"}
+Content here
+:tabend
+
+:tab{label="Tab 2"}
+More content
+:tabend
+:tabsend
+```
 
 <!-- SECTION:CUSTOM_USAGE_NOTES -->
 The extension supports **nested Markdown content** within tabs, including code blocks, tables, lists, and even other
@@ -47,8 +382,22 @@ system.
 
 ### Styling Your Tabs
 
-This extension injects minimal structural CSS for functionality. Visual styling is completely separated for maximum
-flexibility.
+This extension provides optional CSS/SCSS files located in the `styles/` directory. Import them into your project to style the tabs.
+
+Usage examples:
+
+```javascript
+// JS/TS
+import '@fsegurai/marked-extended-tabs/styles/tabs.css';
+import '@fsegurai/marked-extended-tabs/styles/tabs-theme.css';
+```
+
+```html
+<!-- Plain HTML -->
+<link rel="stylesheet" href="node_modules/@fsegurai/marked-extended-tabs/styles/tabs.css">
+<link rel="stylesheet" href="node_modules/@fsegurai/marked-extended-tabs/styles/tabs-theme.css">
+```
+
 
 #### Generated HTML Structure
 
@@ -358,7 +707,6 @@ The marked-extended-tabs extension accepts the following configuration options:
 - `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.
-- `injectStyles`: Whether to inject default CSS styles. Defaults to true.
 
 Tab syntax parameters:
 
@@ -460,3 +808,1204 @@ marked.use(markedExtendedTabs({
     }
 }));
 ```
+
+### Tab Features Summary
+
+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 |
+
+### Best Practices
+
+#### 1. **Use Descriptive Labels**
+
+```markdown
+<!-- Good: Clear, descriptive labels -->
+::::tabs
+:::tab{label="Installation Guide"}
+:::tab{label="Configuration Options"}
+:::tab{label="API Reference"}
+::::tabsend
+
+<!-- Avoid: Vague labels -->
+::::tabs
+:::tab{label="Info"}
+:::tab{label="More"}
+:::tab{label="Other"}
+::::tabsend
+```
+
+#### 2. **Appropriate Icon Usage**
+
+```markdown
+<!-- Good: Relevant icons -->
+:::tab{label="JavaScript" icon="📜"}
+:::tab{label="Python" icon="🐍"}
+:::tab{label="Ruby" icon="💎"}
+
+<!-- Avoid: Confusing or irrelevant -->
+:::tab{label="JavaScript" icon="🌮"}  <!-- ❌ -->
+:::tab{label="Python" icon="🚗"}      <!-- ❌ -->
+```
+
+#### 3. **Limit Number of Tabs**
+
+```markdown
+<!-- Good: 3-7 tabs for easy navigation -->
+::::tabs
+:::tab{label="Overview"}
+:::tab{label="Installation"}
+:::tab{label="Usage"}
+:::tab{label="Examples"}
+::::tabsend
+
+<!-- Avoid: Too many tabs -->
+::::tabs
+<!-- 15+ tabs make navigation difficult -->
+::::tabsend
+```
+
+#### 4. **Consistent Content Structure**
+
+```markdown
+<!-- 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
+
+<!-- Avoid: Inconsistent structure -->
+::::tabs
+:::tab{label="Tab 1"}
+# Heading
+Content
+:::tabend
+
+:::tab{label="Tab 2"}
+Just some text without headings or structure
+:::tabend
+::::tabsend
+```
+
+#### 5. **Mark Appropriate Default Tab**
+
+```markdown
+<!-- Good: First tab or most relevant active -->
+::::tabs
+:::tab{label="Quick Start" icon="⚡" active="true"}
+Most users start here
+:::tabend
+
+:::tab{label="Advanced"}
+For experienced users
+:::tabend
+::::tabsend
+
+<!-- Avoid: Marking wrong tab as active -->
+::::tabs
+:::tab{label="Quick Start"}
+:::tabend
+
+:::tab{label="Advanced Setup" active="true"}
+<!-- ❌ New users shouldn't start here -->
+:::tabend
+::::tabsend
+```
+
+### Use Cases
+
+#### 1. **Multi-Language Code Examples**
+
+```markdown
+# Authentication API
+
+## Making Your First Request
+
+::::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'
+  })
+});
+
+const data = await response.json();
+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}\`
+  }
+});
+\`\`\`
+
+### Using Axios
+
+\`\`\`javascript
+import axios from 'axios';
+
+const { data } = await axios.post('https://api.example.com/auth/login', {
+  username: 'user@example.com',
+  password: 'secure_password'
+});
+
+console.log('Token:', data.access_token);
+
+// Set default authorization header
+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'
+    }
+)
+
+data = response.json()
+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}'}
+)
+
+print(user_response.json())
+\`\`\`
+
+### Using HTTPX (Async)
+
+\`\`\`python
+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'
+            }
+        )
+        
+        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"
+)
+
+type LoginRequest struct {
+    Username string \`json:"username"\`
+    Password string \`json:"password"\`
+}
+
+type LoginResponse struct {
+    AccessToken string \`json:"access_token"\`
+}
+
+func main() {
+    // Prepare login request
+    loginData := LoginRequest{
+        Username: "user@example.com",
+        Password: "secure_password",
+    }
+    
+    jsonData, _ := json.Marshal(loginData)
+    
+    // Make request
+    resp, err := http.Post(
+        "https://api.example.com/auth/login",
+        "application/json",
+        bytes.NewBuffer(jsonData),
+    )
+    if err != nil {
+        panic(err)
+    }
+    defer resp.Body.Close()
+    
+    // Parse response
+    body, _ := ioutil.ReadAll(resp.Body)
+    var loginResp LoginResponse
+    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"
+  }'
+\`\`\`
+
+**Response:**
+\`\`\`json
+{
+  "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"
+\`\`\`
+:::tabend
+::::tabsend
+
+## Error Handling
+
+All endpoints return standard error responses:
+
+\`\`\`json
+{
+  "error": {
+    "code": "INVALID_CREDENTIALS",
+    "message": "The username or password is incorrect",
+    "timestamp": "2026-02-17T10:30:00Z"
+  }
+}
+\`\`\`
+```
+
+#### 2. **Platform-Specific Installation**
+
+```markdown
+# Installation Guide
+
+## Choose Your Platform
+
+::::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)
+
+2. **Run** the installer and follow the setup wizard
+
+3. **Verify** installation:
+   \`\`\`powershell
+   myapp --version
+   \`\`\`
+
+### Using Package Manager (Chocolatey)
+
+\`\`\`powershell
+choco install myapp
+\`\`\`
+
+### Using Package Manager (Winget)
+
+\`\`\`powershell
+winget install MyCompany.MyApp
+\`\`\`
+
+### System Requirements
+
+- Windows 10 or later
+- 4GB RAM minimum (8GB recommended)
+- 500MB free disk space
+- .NET Runtime 6.0 or later
+
+### Troubleshooting
+
+**"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
+
+:::tab{label="macOS" icon="🍎"}
+### Using Homebrew (Recommended)
+
+\`\`\`bash
+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)
+
+2. **Open** the .dmg file
+
+3. **Drag** MyApp to Applications folder
+
+4. **Verify** installation:
+   \`\`\`bash
+   myapp --version
+   \`\`\`
+
+### System Requirements
+
+- macOS 11 (Big Sur) or later
+- 4GB RAM minimum
+- 500MB free disk space
+
+### Troubleshooting
+
+**"App can't be opened" error:**
+Right-click the app → Open → Confirm to bypass Gatekeeper
+:::tabend
+
+:::tab{label="Linux" icon="🐧"}
+### Using Package Manager
+
+**Ubuntu/Debian:**
+\`\`\`bash
+sudo apt update
+sudo apt install myapp
+\`\`\`
+
+**Fedora/RHEL:**
+\`\`\`bash
+sudo dnf install myapp
+\`\`\`
+
+**Arch Linux:**
+\`\`\`bash
+sudo pacman -S myapp
+\`\`\`
+
+### Using Snap
+
+\`\`\`bash
+sudo snap install myapp
+\`\`\`
+
+### Building from Source
+
+\`\`\`bash
+git clone https://github.com/mycompany/myapp.git
+cd myapp
+./configure
+make
+sudo make install
+\`\`\`
+
+### System Requirements
+
+- Linux kernel 5.0 or later
+- 4GB RAM minimum
+- 500MB free disk space
+- glibc 2.31 or later
+
+### Verify Installation
+
+\`\`\`bash
+myapp --version
+which myapp
+\`\`\`
+:::tabend
+
+:::tab{label="Docker" icon="🐳"}
+### Using Docker
+
+Pull the official image:
+\`\`\`bash
+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
+\`\`\`
+
+### Using Docker Compose
+
+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
+\`\`\`
+
+Start services:
+\`\`\`bash
+docker-compose up -d
+\`\`\`
+
+### Available Tags
+
+- \`latest\` - Latest stable release
+- \`2.0.5\` - Specific version
+- \`alpine\` - Lightweight Alpine-based image
+- \`dev\` - Development build
+:::tabend
+::::tabsend
+
+## Post-Installation
+
+After installation, configure your environment:
+
+\`\`\`bash
+myapp init
+myapp config set api-key YOUR_KEY
+\`\`\`
+```
+
+#### 3. **Framework Comparison**
+
+```markdown
+# Web Framework Comparison
+
+## React vs Vue vs Angular
+
+::::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
+- ✅ Excellent for SPAs
+- ✅ Strong TypeScript support
+
+**Cons:**
+- ❌ Steep learning curve
+- ❌ JSX syntax to learn
+- ❌ Need additional libraries for routing, state
+
+### Hello World Example
+
+\`\`\`jsx
+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>
+  );
+}
+
+export default App;
+\`\`\`
+
+### When to Choose React
+
+- Building complex SPAs
+- Need flexibility in architecture
+- Large team with React expertise
+- Mobile app with React Native
+:::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
+- ✅ Smaller bundle size
+- ✅ Template syntax familiar to HTML
+
+**Cons:**
+- ❌ Smaller ecosystem than React
+- ❌ Less corporate backing
+- ❌ Fewer job opportunities
+
+### Hello World Example
+
+\`\`\`vue
+<template>
+  <div>
+    <h1>Hello, Vue!</h1>
+    <p>Count: {{ count }}</p>
+    <button @click="count++">
+      Increment
+    </button>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const count = ref(0);
+</script>
+\`\`\`
+
+### When to Choose Vue
+
+- Quick prototyping
+- Small to medium projects
+- Team with HTML/CSS background
+- Gradual migration from legacy code
+:::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)
+- ✅ Great for large applications
+- ✅ CLI tooling
+
+**Cons:**
+- ❌ Steeper learning curve
+- ❌ Larger bundle size
+- ❌ More opinionated
+- ❌ Verbose syntax
+
+### Hello World Example
+
+\`\`\`typescript
+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>
+  \`
+})
+export class AppComponent {
+  count = 0;
+  
+  increment() {
+    this.count++;
+  }
+}
+\`\`\`
+
+### When to Choose Angular
+
+- Enterprise applications
+- Large teams
+- Need complete framework
+- TypeScript-first development
+:::tabend
+
+:::tab{label="Comparison" icon="📊"}
+### Side-by-Side Comparison
+
+| Feature | React | Vue | Angular |
+|---------|-------|-----|---------|
+| **Type** | Library | Framework | Framework |
+| **Learning Curve** | Moderate | Easy | Steep |
+| **Bundle Size** | Medium | Small | Large |
+| **TypeScript** | Optional | Optional | Default |
+| **Performance** | Excellent | Excellent | Good |
+| **Ecosystem** | Huge | Growing | Large |
+| **Best For** | SPAs, Complex UIs | All projects | Enterprise |
+| **Mobile** | React Native | Weex, NativeScript | Ionic |
+| **State Mgmt** | Redux, Context | Vuex, Pinia | Services, RxJS |
+| **Community** | Very Large | Large | Large |
+
+### Performance Benchmarks
+
+| Metric | React | Vue | Angular |
+|--------|-------|-----|---------|
+| Initial Load | 45 KB | 38 KB | 95 KB |
+| Time to Interactive | 1.2s | 0.9s | 1.8s |
+| Memory Usage | 12 MB | 9 MB | 18 MB |
+| DOM Operations | Fast | Fast | Good |
+
+### Popularity (GitHub Stars)
+
+- React: ⭐ 220K+
+- Vue: ⭐ 205K+
+- Angular: ⭐ 93K+
+
+*As of February 2026*
+:::tabend
+::::tabsend
+
+## Making Your Choice
+
+Consider your:
+- Team expertise
+- Project requirements
+- Timeline
+- Long-term maintenance
+```
+
+#### 4. **Configuration Environments**
+
+```markdown
+# Environment Configuration
+
+## Setup for Different Environments
+
+::::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
+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
+\`\`\`
+
+### Dev Tools
+
+- ✅ Hot module replacement
+- ✅ Source maps enabled
+- ✅ Verbose logging
+- ✅ Mock API responses
+- ✅ Local database
+:::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
+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
+\`\`\`
+
+### Staging Features
+
+- ✅ Production-like environment
+- ✅ Real database (non-production)
+- ✅ Error tracking enabled
+- ✅ Performance monitoring
+- ✅ QA testing environment
+:::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
+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
+\`\`\`
+
+### Production Requirements
+
+- ✅ SSL/TLS enabled
+- ✅ CDN configured
+- ✅ Caching enabled
+- ✅ Rate limiting active
+- ✅ Monitoring and alerts
+- ✅ Automated backups
+- ✅ Load balancing
+:::tabend
+
+:::tab{label="Docker" icon="🐳"}
+### Docker Configuration
+
+Create \`docker-compose.yml\` per environment:
+
+**Development:**
+\`\`\`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
+\`\`\`
+
+**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"]
+      interval: 30s
+      timeout: 10s
+      retries: 3
+\`\`\`
+
+### Multi-stage Dockerfile
+
+\`\`\`dockerfile
+# Development stage
+FROM node:18-alpine AS development
+WORKDIR /app
+COPY package*.json ./
+RUN npm install
+COPY . .
+CMD ["npm", "run", "dev"]
+
+# Production stage
+FROM node:18-alpine AS production
+WORKDIR /app
+COPY package*.json ./
+RUN npm ci --only=production
+COPY . .
+RUN npm run build
+CMD ["npm", "start"]
+\`\`\`
+:::tabend
+::::tabsend
+
+## Environment Variables Best Practices
+
+1. ✅ Never commit secrets to version control
+2. ✅ Use different keys for each environment
+3. ✅ Rotate credentials regularly
+4. ✅ Use secret management tools (Vault, AWS Secrets Manager)
+5. ✅ Document all environment variables
+```
+
+### Troubleshooting
+
+#### Tabs Not Switching
+
+**Problem**: Clicking tabs doesn't change content.
+
+**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 */
+}
+```
+
+3. **Verify tab structure:**
+```markdown
+<!-- Ensure proper nesting -->
+::::tabs
+:::tab{label="Tab 1"}
+Content
+:::tabend
+::::tabsend
+```
+
+#### Icons Not Showing
+
+**Problem**: Tab icons don't display.
+
+**Solutions**:
+
+1. **Use valid Unicode/emoji:**
+```markdown
+<!-- Correct -->
+:::tab{label="Code" icon="📜"}
+:::tab{label="Python" icon="🐍"}
+
+<!-- Wrong -->
+:::tab{label="Code" icon="invalid"}  <!-- ❌ -->
+```
+
+2. **Check font support:**
+```css
+/* Ensure emoji font is loaded */
+.marked-extended-tabs-icon {
+  font-family: "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
+}
+```
+
+#### Animation Not Working
+
+**Problem**: No animation between tabs.
+
+**Solutions**:
+
+1. **Set animation type:**
+```javascript
+marked.use(markedExtendedTabs({
+  animation: 'fade'  // or 'slide'
+}));
+```
+
+2. **Import theme CSS:**
+```javascript
+import '@fsegurai/marked-extended-tabs/styles/tabs-theme.css';
+```
+
+#### First Tab Not Active
+
+**Problem**: No tab is active by default.
+
+**Solution**:
+```javascript
+// Enable auto-activation
+marked.use(markedExtendedTabs({
+  autoActivate: true  // Default is true
+}));
+```
+
+Or mark a tab as active:
+```markdown
+:::tab{label="Tab 1" active="true"}
+```
+
+### Framework Integration
+
+#### React Integration
+
+```tsx
+// TabsContent.tsx
+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';
+
+marked.use(markedExtendedTabs({
+  animation: 'fade',
+  autoActivate: true
+}));
+
+interface Props {
+  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 }} 
+    />
+  );
+}
+
+// Usage:
+// <TabsContent content={markdownWithTabs} animation="fade" />
+```
+
+#### Vue 3 Integration
+
+```vue
+<script setup lang="ts">
+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 { computed } from 'vue';
+
+marked.use(markedExtendedTabs({
+  animation: 'fade'
+}));
+
+interface Props {
+  content: string;
+  animation?: 'fade' | 'slide' | 'none';
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  animation: 'fade'
+});
+
+const html = computed(() => {
+  marked.use(markedExtendedTabs({ animation: props.animation }));
+  return marked.parse(props.content);
+});
+</script>
+
+<template>
+  <div class="tabs-container" v-html="html" />
+</template>
+```
+
+#### Angular Integration
+
+```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 markedExtendedTabs from '@fsegurai/marked-extended-tabs';
+
+marked.use(markedExtendedTabs({
+  animation: 'fade'
+}));
+
+@Component({
+  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'
+  ]
+})
+export class TabsContentComponent implements OnChanges {
+  @Input() content: string = '';
+  @Input() animation: 'fade' | 'slide' | 'none' = 'fade';
+  parsedContent: SafeHtml = '';
+
+  constructor(private sanitizer: DomSanitizer) {}
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['content'] || changes['animation']) {
+      marked.use(markedExtendedTabs({ animation: this.animation }));
+      const html = marked.parse(this.content);
+      this.parsedContent = this.sanitizer.bypassSecurityTrustHtml(html);
+    }
+  }
+}
+```
+
+### Performance Tips
+
+1. **Limit number of tabs**: Keep under 10 tabs for best UX
+2. **Lazy load content**: For heavy content, consider lazy loading
+3. **Optimize animations**: Use 'none' for instant switching if needed
+
+```javascript
+// Disable animations for better performance
+marked.use(markedExtendedTabs({
+  animation: 'none'
+}));
+```
+
+### Contributing
+
+Found a bug or have a feature request? Please open an issue on [GitHub](https://github.com/fsegurai/marked-extensions/issues).
+
+### Related Resources
+
+- [Marked.js Documentation](https://marked.js.org/)
+- [Extension Demo](https://fsegurai.github.io/marked-extensions)
+- [Source Code](https://github.com/fsegurai/marked-extensions)
+- [npm Package](https://www.npmjs.com/package/@fsegurai/marked-extended-tabs)
+- [ARIA Tabs Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/)
+
+
+