diff --git a/SYNTAX_HIGHLIGHTING.md b/SYNTAX_HIGHLIGHTING.md
new file mode 100644
index 0000000..d242e1b
--- /dev/null
+++ b/SYNTAX_HIGHLIGHTING.md
@@ -0,0 +1,408 @@
+# OverType Syntax Highlighting API
+
+OverType provides a simple yet powerful API for integrating custom syntax highlighting libraries with your markdown editor. This document explains how to use the highlighting API and provides examples for popular highlighting libraries.
+
+## Overview
+
+The OverType syntax highlighting API allows you to:
+
+- **Global Highlighting**: Set a highlighter that applies to all OverType instances
+- **Per-Instance Highlighting**: Set a highlighter for specific editor instances
+- **Library Agnostic**: Works with any highlighting library (Shiki, Prism, highlight.js, etc.)
+- **Real-time**: Highlights code as you type
+- **Preserves Alignment**: Maintains perfect character positioning for the WYSIWYG experience
+
+## Basic Usage
+
+### Global Code Highlighter
+
+```javascript
+// Set a global highlighter that applies to all OverType instances
+OverType.setCodeHighlighter((code, language) => {
+    // Your highlighting logic here
+    return highlightedHtml;
+});
+```
+
+### Per-Instance Code Highlighter
+
+```javascript
+// Option 1: Set during initialization
+const [editor] = new OverType('#editor', {
+    codeHighlighter: (code, language) => {
+        return highlightedHtml;
+    }
+});
+
+// Option 2: Set after initialization
+editor.setCodeHighlighter((code, language) => {
+    return highlightedHtml;
+});
+```
+
+### Disable Highlighting
+
+```javascript
+// Disable global highlighting
+OverType.setCodeHighlighter(null);
+
+// Disable per-instance highlighting
+editor.setCodeHighlighter(null);
+```
+
+## API Contract
+
+### Highlighter Function Signature
+
+```javascript
+function highlighter(code, language) {
+    // Parameters:
+    // - code: string - The raw code content to highlight
+    // - language: string - Language extracted from fence (e.g., 'javascript', 'python', '')
+
+    // Returns:
+    // - string - HTML with syntax highlighting
+}
+```
+
+### Requirements
+
+1. **Preserve Character Positions**: The returned HTML must maintain the same character positions as the input
+2. **Handle Unknown Languages**: Should gracefully handle languages not supported by your highlighter
+3. **Escape HTML**: Must return properly escaped HTML if the highlighter doesn't handle escaping
+4. **Performance**: Should be fast enough for real-time highlighting (consider debouncing for heavy highlighters)
+5. **Error Handling**: Should not throw errors; fallback to plain text if highlighting fails
+
+## Examples
+
+### 1. Simple Pattern-Based Highlighter
+
+```javascript
+function simpleHighlighter(code, language) {
+    return code
+        // Keywords
+        .replace(/\b(function|const|let|var|if|else|for|while|return|class)\b/g,
+            '<span style="color: #0066cc; font-weight: bold;">$1</span>')
+        // Strings
+        .replace(/(["'])((?:\\.|(?!\1)[^\\])*?)\1/g,
+            '<span style="color: #008800;">$1$2$1</span>')
+        // Comments
+        .replace(/(\/\/.*$|#.*$)/gm,
+            '<span style="color: #808080; font-style: italic;">$1</span>')
+        // Numbers
+        .replace(/\b(\d+(?:\.\d+)?)\b/g,
+            '<span style="color: #ff6600;">$1</span>');
+}
+
+OverType.setCodeHighlighter(simpleHighlighter);
+```
+
+### 2. Shiki.js Integration (v3.0+)
+
+```javascript
+import { codeToHtml } from 'shiki';
+
+// Async highlighter function
+async function shikiHighlighter(code, language) {
+    try {
+        // Map common aliases
+        const langMap = {
+            'js': 'javascript',
+            'ts': 'typescript',
+            'py': 'python',
+            'rs': 'rust'
+        };
+
+        const normalizedLang = langMap[language] || language || 'text';
+
+        const highlighted = await codeToHtml(code, {
+            lang: normalizedLang,
+            theme: 'github-light'
+        });
+
+        // Extract inner HTML from pre>code element
+        const match = highlighted.match(/<code[^>]*>([\s\S]*?)<\/code>/);
+        return match ? match[1] : code;
+
+    } catch (error) {
+        console.warn('Shiki highlighting failed:', error);
+        return code; // Fallback to plain text
+    }
+}
+
+// Synchronous wrapper with caching for real-time highlighting
+const highlightCache = new Map();
+
+function syncShikiHighlighter(code, language) {
+    const cacheKey = `${language}:${code.substring(0, 100)}`;
+
+    if (highlightCache.has(cacheKey)) {
+        return highlightCache.get(cacheKey);
+    }
+
+    // Start async highlighting
+    shikiHighlighter(code, language).then(result => {
+        highlightCache.set(cacheKey, result);
+        // Trigger re-render
+        OverType.setCodeHighlighter(syncShikiHighlighter);
+    });
+
+    return code; // Return plain code while highlighting
+}
+
+OverType.setCodeHighlighter(syncShikiHighlighter);
+```
+
+### 2b. Shiki.js Legacy (v0.14)
+
+```javascript
+import { getHighlighter } from 'shiki@0.14.7';
+
+let shikiHighlighter = null;
+
+async function initShiki() {
+    shikiHighlighter = await getHighlighter({
+        themes: ['github-light', 'github-dark'],
+        langs: ['javascript', 'typescript', 'python', 'rust', 'go']
+    });
+
+    OverType.setCodeHighlighter((code, language) => {
+        if (!shikiHighlighter) return code;
+
+        try {
+            const langMap = {
+                'js': 'javascript',
+                'ts': 'typescript',
+                'py': 'python',
+                'rs': 'rust'
+            };
+
+            const normalizedLang = langMap[language] || language || 'text';
+
+            if (!shikiHighlighter.getLoadedLanguages().includes(normalizedLang)) {
+                return code;
+            }
+
+            const highlighted = shikiHighlighter.codeToHtml(code, {
+                lang: normalizedLang,
+                theme: 'github-light'
+            });
+
+            const match = highlighted.match(/<code[^>]*>([\s\S]*?)<\/code>/);
+            return match ? match[1] : code;
+
+        } catch (error) {
+            console.warn('Shiki highlighting failed:', error);
+            return code;
+        }
+    });
+}
+
+initShiki();
+```
+
+### 3. Prism.js Integration
+
+```javascript
+import Prism from 'prismjs';
+// Import languages you need
+import 'prismjs/components/prism-javascript';
+import 'prismjs/components/prism-python';
+import 'prismjs/components/prism-rust';
+
+function prismHighlighter(code, language) {
+    try {
+        // Map aliases
+        const langMap = {
+            'js': 'javascript',
+            'py': 'python',
+            'rs': 'rust'
+        };
+
+        const normalizedLang = langMap[language] || language;
+
+        if (Prism.languages[normalizedLang]) {
+            return Prism.highlight(code, Prism.languages[normalizedLang], normalizedLang);
+        }
+
+        return code; // Fallback for unsupported languages
+    } catch (error) {
+        console.warn('Prism highlighting failed:', error);
+        return code;
+    }
+}
+
+OverType.setCodeHighlighter(prismHighlighter);
+```
+
+### 4. highlight.js Integration
+
+```javascript
+import hljs from 'highlight.js';
+
+function hljsHighlighter(code, language) {
+    try {
+        if (language && hljs.getLanguage(language)) {
+            const result = hljs.highlight(code, { language });
+            return result.value;
+        } else {
+            // Auto-detect language
+            const result = hljs.highlightAuto(code);
+            return result.value;
+        }
+    } catch (error) {
+        console.warn('highlight.js highlighting failed:', error);
+        return hljs.util.escapeHtml(code);
+    }
+}
+
+OverType.setCodeHighlighter(hljsHighlighter);
+```
+
+### 5. Language-Specific Highlighters
+
+```javascript
+// Different highlighters for different languages
+function multiHighlighter(code, language) {
+    switch (language) {
+        case 'json':
+            return highlightJson(code);
+        case 'sql':
+            return highlightSql(code);
+        case 'javascript':
+        case 'js':
+            return highlightJavaScript(code);
+        default:
+            return simpleHighlighter(code, language);
+    }
+}
+
+function highlightJson(code) {
+    return code
+        .replace(/(["'])((?:\\.|(?!\1)[^\\])*?)(\1)(\s*:\s*)/g,
+            '<span style="color: #9cdcfe;">$1$2$3</span>$4')
+        .replace(/:\s*(["'])((?:\\.|(?!\1)[^\\])*?)\1/g,
+            ': <span style="color: #ce9178;">$1$2$1</span>')
+        .replace(/:\s*(\d+(?:\.\d+)?)/g,
+            ': <span style="color: #b5cea8;">$1</span>')
+        .replace(/:\s*(true|false|null)/g,
+            ': <span style="color: #569cd6;">$1</span>');
+}
+
+OverType.setCodeHighlighter(multiHighlighter);
+```
+
+## Performance Considerations
+
+### Debouncing for Heavy Highlighters
+
+```javascript
+let highlightTimeout;
+
+function debouncedHighlighter(code, language) {
+    return new Promise((resolve) => {
+        clearTimeout(highlightTimeout);
+        highlightTimeout = setTimeout(() => {
+            resolve(heavyHighlighter(code, language));
+        }, 150); // 150ms debounce
+    });
+}
+
+// For async highlighters, you might need a synchronous wrapper
+let highlightCache = new Map();
+
+function cachedAsyncHighlighter(code, language) {
+    const cacheKey = `${language}:${code}`;
+
+    if (highlightCache.has(cacheKey)) {
+        return highlightCache.get(cacheKey);
+    }
+
+    // Start async highlighting
+    heavyAsyncHighlighter(code, language).then(result => {
+        highlightCache.set(cacheKey, result);
+        // Trigger re-render if needed
+        OverType.setCodeHighlighter(cachedAsyncHighlighter);
+    });
+
+    // Return plain text while highlighting is in progress
+    return code;
+}
+```
+
+### Language Detection
+
+```javascript
+function detectLanguage(code, suggestedLanguage) {
+    // Use suggested language if valid
+    if (suggestedLanguage && supportedLanguages.includes(suggestedLanguage)) {
+        return suggestedLanguage;
+    }
+
+    // Simple heuristics for common languages
+    if (/^\s*{[\s\S]*}\s*$/.test(code.trim())) {
+        return 'json';
+    }
+    if (/\b(SELECT|FROM|WHERE|INSERT|UPDATE|DELETE)\b/i.test(code)) {
+        return 'sql';
+    }
+    if (/\b(function|const|let|var|=&gt;)\b/.test(code)) {
+        return 'javascript';
+    }
+    if (/\b(def|import|from|class|if __name__)\b/.test(code)) {
+        return 'python';
+    }
+
+    return 'text';
+}
+
+function smartHighlighter(code, language) {
+    const detectedLanguage = detectLanguage(code, language);
+    return actualHighlighter(code, detectedLanguage);
+}
+```
+
+## Best Practices
+
+1. **Always provide fallbacks**: If highlighting fails, return the original code
+2. **Handle edge cases**: Empty strings, very large code blocks, unsupported languages
+3. **Consider performance**: Use caching, debouncing, or web workers for heavy highlighting
+4. **Test thoroughly**: Test with various languages, edge cases, and large documents
+5. **Provide user feedback**: Show loading states or errors when appropriate
+
+## Troubleshooting
+
+### Common Issues
+
+1. **Characters not aligning**: Make sure your highlighter preserves all whitespace and character positions
+2. **Performance problems**: Consider debouncing or caching for expensive highlighting operations
+3. **Languages not working**: Check that your highlighter library supports the requested language
+4. **HTML escaping issues**: Ensure proper HTML escaping to prevent XSS vulnerabilities
+
+### Debug Mode
+
+```javascript
+function debugHighlighter(code, language) {
+    console.log('Highlighting:', { language, codeLength: code.length });
+
+    try {
+        const result = yourHighlighter(code, language);
+        console.log('Highlight success:', { resultLength: result.length });
+        return result;
+    } catch (error) {
+        console.error('Highlight failed:', error);
+        return code;
+    }
+}
+
+OverType.setCodeHighlighter(debugHighlighter);
+```
+
+## Integration Examples
+
+Complete integration examples are available in the `examples/` directory:
+
+- `examples/syntax-highlighting-api.html` - Basic API demonstration
+- `examples/shiki-integration.html` - Full Shiki.js integration with themes and language support
+
+These examples show real-world usage patterns and can serve as starting points for your own implementations.
diff --git a/examples/highlightjs-integration.html b/examples/highlightjs-integration.html
new file mode 100644
index 0000000..0b1dfba
--- /dev/null
+++ b/examples/highlightjs-integration.html
@@ -0,0 +1,2220 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>OverType + highlight.js Integration</title>
+
+    <!-- Highlight.js CSS Theme -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/github.min.css" id="hljs-theme">
+
+    <style>
+        body {
+            font-family: system-ui, -apple-system, sans-serif;
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 40px 20px;
+            background: #f5f5f5;
+        }
+
+        h1 { color: #333; margin-bottom: 10px; }
+        .subtitle { color: #666; margin-bottom: 30px; }
+
+        .editor-container {
+            height: 600px;
+            background: white;
+            border-radius: 8px;
+            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+            overflow: hidden;
+        }
+
+        .controls {
+            margin-top: 20px;
+            display: flex;
+            gap: 10px;
+            flex-wrap: wrap;
+        }
+
+        button, select {
+            padding: 8px 16px;
+            border: none;
+            background: #4a90e2;
+            color: white;
+            border-radius: 4px;
+            cursor: pointer;
+            font-size: 14px;
+        }
+
+        select {
+            background: white;
+            color: #333;
+            border: 1px solid #ddd;
+        }
+
+        button:hover { background: #357abd; }
+        button:disabled { background: #ccc; cursor: not-allowed; }
+
+        .status {
+            margin-top: 10px;
+            padding: 10px;
+            background: white;
+            border-radius: 4px;
+            border: 1px solid #e0e0e0;
+        }
+
+        .status.ready { background: #d4edda; border-color: #c3e6cb; }
+        .status.error { background: #f8d7da; border-color: #f5c6cb; }
+
+        .info {
+            margin-top: 20px;
+            padding: 15px;
+            background: white;
+            border-radius: 8px;
+            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+            font-size: 14px;
+            line-height: 1.5;
+        }
+
+        .info h3 { margin-top: 0; color: #333; }
+        .info code {
+            background: #f5f5f5;
+            padding: 2px 4px;
+            border-radius: 2px;
+        }
+
+        .theme-selector {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+
+        .features {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+            gap: 15px;
+            margin-top: 15px;
+        }
+
+        .feature {
+            padding: 10px;
+            background: #f8f9fa;
+            border-radius: 6px;
+            border-left: 3px solid #4a90e2;
+        }
+
+        .feature h4 {
+            margin: 0 0 5px 0;
+            color: #333;
+        }
+
+        .feature p {
+            margin: 0;
+            font-size: 13px;
+            color: #666;
+        }
+    </style>
+</head>
+<body>
+    <h1>OverType + highlight.js Integration</h1>
+    <p class="subtitle">Real-time syntax highlighting with highlight.js auto-detection and 180+ languages</p>
+
+    <div id="editor" class="editor-container"></div>
+
+    <div class="controls">
+        <div class="theme-selector">
+            <label for="themeSelect">Theme:</label>
+            <select id="themeSelect">
+                <option value="github">GitHub</option>
+                <option value="github-dark">GitHub Dark</option>
+                <option value="vs2015">VS2015</option>
+                <option value="atom-one-dark">Atom One Dark</option>
+                <option value="atom-one-light">Atom One Light</option>
+                <option value="monokai-sublime">Monokai</option>
+                <option value="stackoverflow-light">Stack Overflow Light</option>
+                <option value="stackoverflow-dark">Stack Overflow Dark</option>
+            </select>
+        </div>
+        <button onclick="loadWebDevExample()">Web Dev Example</button>
+        <button onclick="loadSystemsExample()">Systems Example</button>
+        <button onclick="loadDataExample()">Data Example</button>
+    </div>
+
+    <div id="status" class="status">Initializing highlight.js syntax highlighting...</div>
+
+    <div class="info">
+        <h3>About highlight.js Integration</h3>
+        <p>This example demonstrates OverType's integration with <strong>highlight.js</strong>, a popular syntax highlighting library:</p>
+
+        <div class="features">
+            <div class="feature">
+                <h4>🎨 Themes</h4>
+                <p>Choose from dozens of color themes to match your design</p>
+            </div>
+            <div class="feature">
+                <h4>🔍 Auto-Detection</h4>
+                <p>Automatically detects language when not specified</p>
+            </div>
+            <div class="feature">
+                <h4>📚 180+ Languages</h4>
+                <p>Supports virtually every programming language</p>
+            </div>
+            <div class="feature">
+                <h4>⚡ Performance</h4>
+                <p>Fast highlighting with minimal overhead</p>
+            </div>
+            <div class="feature">
+                <h4>🔧 Easy Setup</h4>
+                <p>Simple CDN integration, no build process required</p>
+            </div>
+            <div class="feature">
+                <h4>📱 Universal</h4>
+                <p>Works in all modern browsers and environments</p>
+            </div>
+        </div>
+
+        <h3>Implementation</h3>
+        <p>The integration uses OverType's <code>setCodeHighlighter</code> API with highlight.js's programmatic API for real-time highlighting as you type.</p>
+    </div>
+
+    <!-- Load highlight.js from CDN -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/highlight.min.js"></script>
+    <!-- Additional languages -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/languages/go.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/languages/rust.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/languages/kotlin.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/languages/swift.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/languages/php.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/languages/ruby.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/languages/scala.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/languages/dockerfile.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/languages/yaml.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/languages/nginx.min.js"></script>
+
+    <script type="module">
+        import { OverType } from "../dist/overtype.esm.js"
+
+        let highlightingEnabled = false;
+        let currentTheme = 'github';
+
+        // Initialize editor with sample content
+        const [editor] = new OverType('#editor', {
+            placeholder: 'Initialize highlight.js to see syntax highlighting...',
+            value: `# highlight.js Integration Demo
+
+Once highlight.js is loaded, all code blocks will be highlighted with auto language detection.
+
+## JavaScript/Node.js
+
+\`\`\`javascript
+// Express.js API with async/await
+const express = require('express');
+const app = express();
+
+app.use(express.json());
+
+// Async route handler with error handling
+app.get('/api/users/:id', async (req, res) => {
+    try {
+        const { id } = req.params;
+        const user = await getUserById(id);
+
+        if (!user) {
+            return res.status(404).json({
+                error: 'User not found',
+                code: 'USER_NOT_FOUND'
+            });
+        }
+
+        res.json({
+            user: {
+                ...user,
+                // Remove sensitive fields
+                password: undefined,
+                resetToken: undefined
+            }
+        });
+    } catch (error) {
+        console.error('Error fetching user:', error);
+        res.status(500).json({ error: 'Internal server error' });
+    }
+});
+
+const PORT = process.env.PORT || 3000;
+app.listen(PORT, () => {
+    console.log(\`Server running on port \${PORT}\`);
+});
+\`\`\`
+
+## Python
+
+\`\`\`python
+# Data processing with pandas and asyncio
+import pandas as pd
+import asyncio
+import aiohttp
+from typing import List, Dict, Optional
+
+class AsyncDataProcessor:
+    def __init__(self, api_base_url: str, concurrency_limit: int = 10):
+        self.api_base_url = api_base_url
+        self.semaphore = asyncio.Semaphore(concurrency_limit)
+        self.session: Optional[aiohttp.ClientSession] = None
+
+    async def __aenter__(self):
+        self.session = aiohttp.ClientSession()
+        return self
+
+    async def __aexit__(self, exc_type, exc_val, exc_tb):
+        if self.session:
+            await self.session.close()
+
+    async def process_batch(self, items: List[Dict]) -> pd.DataFrame:
+        """Process a batch of items concurrently"""
+        tasks = [self.process_item(item) for item in items]
+        results = await asyncio.gather(*tasks, return_exceptions=True)
+
+        # Filter successful results
+        valid_results = [
+            result for result in results
+            if not isinstance(result, Exception)
+        ]
+
+        return pd.DataFrame(valid_results)
+
+    async def process_item(self, item: Dict) -> Dict:
+        async with self.semaphore:
+            url = f"{self.api_base_url}/process"
+
+            async with self.session.post(url, json=item) as response:
+                if response.status == 200:
+                    data = await response.json()
+                    return {
+                        'id': item['id'],
+                        'processed_at': pd.Timestamp.now(),
+                        'result': data['result'],
+                        'confidence': data.get('confidence', 0.0)
+                    }
+                else:
+                    raise aiohttp.ClientError(f"API error: {response.status}")
+
+# Usage
+async def main():
+    items = [{'id': i, 'data': f'item_{i}'} for i in range(100)]
+
+    async with AsyncDataProcessor('https://api.example.com') as processor:
+        df = await processor.process_batch(items)
+        print(f"Processed {len(df)} items successfully")
+
+        # Save to CSV
+        df.to_csv('processed_data.csv', index=False)
+
+if __name__ == "__main__":
+    asyncio.run(main())
+\`\`\`
+
+## Go
+
+\`\`\`go
+// Concurrent web scraper with channels and goroutines
+package main
+
+import (
+    "context"
+    "fmt"
+    "io"
+    "net/http"
+    "sync"
+    "time"
+)
+
+type Result struct {
+    URL     string
+    Content string
+    Error   error
+    Duration time.Duration
+}
+
+type Scraper struct {
+    client      *http.Client
+    concurrency int
+    timeout     time.Duration
+}
+
+func NewScraper(concurrency int, timeout time.Duration) *Scraper {
+    return &Scraper{
+        client: &http.Client{
+            Timeout: timeout,
+        },
+        concurrency: concurrency,
+        timeout:     timeout,
+    }
+}
+
+func (s *Scraper) ScrapeURLs(ctx context.Context, urls []string) <-chan Result {
+    results := make(chan Result, len(urls))
+    work := make(chan string, len(urls))
+
+    // Send work to channel
+    go func() {
+        defer close(work)
+        for _, url := range urls {
+            select {
+            case work <- url:
+            case <-ctx.Done():
+                return
+            }
+        }
+    }()
+
+    // Start workers
+    var wg sync.WaitGroup
+    for i := 0; i < s.concurrency; i++ {
+        wg.Add(1)
+        go func() {
+            defer wg.Done()
+            s.worker(ctx, work, results)
+        }()
+    }
+
+    // Close results channel when all workers are done
+    go func() {
+        wg.Wait()
+        close(results)
+    }()
+
+    return results
+}
+
+func (s *Scraper) worker(ctx context.Context, work <-chan string, results chan<- Result) {
+    for url := range work {
+        select {
+        case <-ctx.Done():
+            return
+        default:
+            result := s.scrapeURL(ctx, url)
+            select {
+            case results <- result:
+            case <-ctx.Done():
+                return
+            }
+        }
+    }
+}
+
+func (s *Scraper) scrapeURL(ctx context.Context, url string) Result {
+    start := time.Now()
+
+    req, err := http.NewRequestWithContext(ctx, "GET", url, nil)
+    if err != nil {
+        return Result{URL: url, Error: err, Duration: time.Since(start)}
+    }
+
+    resp, err := s.client.Do(req)
+    if err != nil {
+        return Result{URL: url, Error: err, Duration: time.Since(start)}
+    }
+    defer resp.Body.Close()
+
+    content, err := io.ReadAll(resp.Body)
+    if err != nil {
+        return Result{URL: url, Error: err, Duration: time.Since(start)}
+    }
+
+    return Result{
+        URL:      url,
+        Content:  string(content),
+        Duration: time.Since(start),
+    }
+}
+
+func main() {
+    urls := []string{
+        "https://example.com",
+        "https://httpbin.org/json",
+        "https://jsonplaceholder.typicode.com/posts/1",
+    }
+
+    scraper := NewScraper(3, 10*time.Second)
+    ctx, cancel := context.WithTimeout(context.Background(), 30*time.Second)
+    defer cancel()
+
+    results := scraper.ScrapeURLs(ctx, urls)
+
+    for result := range results {
+        if result.Error != nil {
+            fmt.Printf("Error scraping %s: %v (took %v)\n",
+                result.URL, result.Error, result.Duration)
+        } else {
+            fmt.Printf("Successfully scraped %s (%d bytes, took %v)\n",
+                result.URL, len(result.Content), result.Duration)
+        }
+    }
+}
+\`\`\``,
+            onChange: (value, instance) => {
+                // Debounce highlighting for performance
+                clearTimeout(window.highlightTimeout);
+                if (highlightingEnabled) {
+                    window.highlightTimeout = setTimeout(() => {
+                        instance.updatePreview();
+                    }, 150);
+                }
+            }
+        });
+
+        function initializeHighlightJs() {
+            const statusDiv = document.getElementById('status');
+
+            try {
+                // Configure highlight.js
+                hljs.configure({
+                    ignoreUnescapedHTML: true,  // Important for our use case
+                    throwUnescapedHTML: false
+                });
+
+                statusDiv.className = 'status ready';
+                statusDiv.textContent = 'highlight.js loaded and syntax highlighting enabled!';
+
+                console.log('highlight.js loaded with languages:', hljs.listLanguages());
+
+                // Automatically enable highlighting after successful initialization
+                enableHighlighting();
+
+            } catch (error) {
+                console.error('Failed to initialize highlight.js:', error);
+                statusDiv.className = 'status error';
+                statusDiv.textContent = 'Failed to initialize highlight.js: ' + error.message;
+            }
+        }
+
+        // highlight.js highlighter function
+        function highlightJsHighlighter(code, language) {
+            try {
+                // Map common language aliases
+                const languageMap = {
+                    'js': 'javascript',
+                    'ts': 'typescript',
+                    'py': 'python',
+                    'rs': 'rust',
+                    'sh': 'bash',
+                    'yml': 'yaml',
+                    'dockerfile': 'docker'
+                };
+
+                const normalizedLang = languageMap[language] || language;
+
+                // If language is specified and supported, use it
+                if (normalizedLang && hljs.getLanguage(normalizedLang)) {
+                    const result = hljs.highlight(code, { language: normalizedLang });
+                    return result.value;
+                } else if (normalizedLang) {
+                    // If language specified but not supported, try auto-detection
+                    console.warn('Language not supported by highlight.js:', normalizedLang);
+                }
+
+                // Auto-detect language if not specified or not supported
+                const result = hljs.highlightAuto(code);
+
+                // Log detected language for debugging
+                if (result.language) {
+                    console.log('Auto-detected language:', result.language, 'for code starting with:', code.substring(0, 50));
+                }
+
+                return result.value;
+
+            } catch (error) {
+                console.error('highlight.js highlighting error:', error);
+                // Return escaped HTML as fallback
+                return hljs.util.escapeHtml(code);
+            }
+        }
+
+        function enableHighlighting() {
+            const statusDiv = document.getElementById('status');
+
+            // Enable highlighting
+            OverType.setCodeHighlighter(highlightJsHighlighter);
+            highlightingEnabled = true;
+            statusDiv.className = 'status ready';
+            statusDiv.textContent = 'highlight.js highlighting enabled - code blocks will be highlighted as you type';
+
+            console.log('highlight.js highlighting enabled');
+        }
+
+        function changeTheme() {
+            const themeSelect = document.getElementById('themeSelect');
+            const newTheme = themeSelect.value;
+            const themeLink = document.getElementById('hljs-theme');
+
+            // If same theme, no-op
+            if (currentTheme === newTheme) return;
+
+            // Swap CSS with cache-busting and wait for load, then re-render
+            const href = `https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/${newTheme}.min.css`;
+
+            // Create a new link to avoid missing 'load' on same element
+            const newLink = document.createElement('link');
+            newLink.rel = 'stylesheet';
+            newLink.id = 'hljs-theme-temp';
+            newLink.href = href + `?v=${Date.now()}`; // bust cache when theme switching rapidly
+
+            newLink.addEventListener('load', () => {
+                // Replace old link with the loaded one
+                themeLink.replaceWith(newLink);
+                newLink.id = 'hljs-theme';
+                currentTheme = newTheme;
+
+                // Re-apply highlighter and refresh preview to ensure classes/styles apply
+                if (highlightingEnabled) {
+                    OverType.setCodeHighlighter(highlightJsHighlighter);
+                    // Debounced immediate refresh of preview
+                    try { editor.updatePreview(); } catch (_) {}
+                }
+
+                console.log('Changed theme to:', newTheme);
+            }, { once: true });
+
+            // Append to head to start loading
+            document.head.appendChild(newLink);
+        }
+
+        function loadWebDevExample() {
+            const content = `# Web Development Stack
+
+## React with TypeScript and Hooks
+
+\`\`\`typescript
+import React, { useState, useEffect, useCallback } from 'react';
+import axios from 'axios';
+
+interface User {
+  id: number;
+  name: string;
+  email: string;
+  avatar?: string;
+}
+
+interface ApiResponse<T> {
+  data: T;
+  success: boolean;
+  message?: string;
+}
+
+const UserManagement: React.FC = () => {
+  const [users, setUsers] = useState<User[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const fetchUsers = useCallback(async () => {
+    try {
+      setLoading(true);
+      setError(null);
+
+      const response = await axios.get<ApiResponse<User[]>>('/api/users');
+
+      if (response.data.success) {
+        setUsers(response.data.data);
+      } else {
+        throw new Error(response.data.message || 'Failed to fetch users');
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'An error occurred');
+      console.error('Error fetching users:', err);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  const deleteUser = async (userId: number) => {
+    if (!window.confirm('Are you sure you want to delete this user?')) {
+      return;
+    }
+
+    try {
+      await axios.delete(\`/api/users/\${userId}\`);
+      setUsers(prev => prev.filter(user => user.id !== userId));
+    } catch (err) {
+      setError('Failed to delete user');
+      console.error('Error deleting user:', err);
+    }
+  };
+
+  useEffect(() => {
+    fetchUsers();
+  }, [fetchUsers]);
+
+  if (loading) {
+    return <div className="loading-spinner">Loading users...</div>;
+  }
+
+  if (error) {
+    return (
+      <div className="error-container">
+        <p className="error-message">{error}</p>
+        <button onClick={fetchUsers} className="retry-button">
+          Retry
+        </button>
+      </div>
+    );
+  }
+
+  return (
+    <div className="user-management">
+      <h2>User Management</h2>
+      <div className="user-grid">
+        {users.map(user => (
+          <div key={user.id} className="user-card">
+            {user.avatar && (
+              <img
+                src={user.avatar}
+                alt={\`\${user.name}'s avatar\`}
+                className="user-avatar"
+              />
+            )}
+            <h3>{user.name}</h3>
+            <p className="user-email">{user.email}</p>
+            <div className="user-actions">
+              <button onClick={() => deleteUser(user.id)}>
+                Delete
+              </button>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default UserManagement;
+\`\`\`
+
+## CSS with Modern Features
+
+\`\`\`css
+/* Modern CSS with Grid, Flexbox, and Custom Properties */
+:root {
+  --primary-color: #007acc;
+  --secondary-color: #f0f8ff;
+  --text-color: #333;
+  --border-radius: clamp(4px, 1vw, 8px);
+  --spacing-sm: 0.5rem;
+  --spacing-md: 1rem;
+  --spacing-lg: 2rem;
+}
+
+.user-management {
+  container-type: inline-size;
+  padding: var(--spacing-lg);
+}
+
+.user-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  gap: var(--spacing-md);
+  margin-top: var(--spacing-lg);
+}
+
+.user-card {
+  background: white;
+  border-radius: var(--border-radius);
+  padding: var(--spacing-md);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+
+  &:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
+  }
+}
+
+.user-avatar {
+  width: 60px;
+  height: 60px;
+  border-radius: 50%;
+  object-fit: cover;
+  margin-bottom: var(--spacing-sm);
+}
+
+.user-email {
+  color: #666;
+  font-size: 0.9rem;
+  margin-bottom: var(--spacing-md);
+}
+
+.user-actions {
+  display: flex;
+  gap: var(--spacing-sm);
+  justify-content: flex-end;
+}
+
+/* Container Queries for responsive design */
+@container (max-width: 600px) {
+  .user-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* Dark mode support */
+@media (prefers-color-scheme: dark) {
+  :root {
+    --primary-color: #4db8ff;
+    --secondary-color: #1a1a1a;
+    --text-color: #f0f0f0;
+  }
+
+  .user-card {
+    background: #2a2a2a;
+    color: var(--text-color);
+  }
+}
+
+/* High contrast mode */
+@media (prefers-contrast: high) {
+  .user-card {
+    border: 2px solid var(--primary-color);
+  }
+}
+\`\`\`
+
+## Vue 3 Composition API
+
+\`\`\`vue
+<template>
+  <div class="product-catalog">
+    <SearchFilters
+      v-model:search="searchQuery"
+      v-model:category="selectedCategory"
+      v-model:priceRange="priceRange"
+      :categories="categories"
+      @reset="resetFilters"
+    />
+
+    <div class="product-grid">
+      <TransitionGroup name="product" tag="div">
+        <ProductCard
+          v-for="product in filteredProducts"
+          :key="product.id"
+          :product="product"
+          @add-to-cart="addToCart"
+          @toggle-favorite="toggleFavorite"
+        />
+      </TransitionGroup>
+    </div>
+
+    <LoadingSpinner v-if="loading" />
+    <EmptyState v-else-if="filteredProducts.length === 0" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, watch } from 'vue';
+import { useProductStore } from '@/stores/product';
+import { useCartStore } from '@/stores/cart';
+import { useFavoritesStore } from '@/stores/favorites';
+import type { Product, Category, PriceRange } from '@/types';
+
+// Store composables
+const productStore = useProductStore();
+const cartStore = useCartStore();
+const favoritesStore = useFavoritesStore();
+
+// Reactive state
+const searchQuery = ref('');
+const selectedCategory = ref<string | null>(null);
+const priceRange = ref<PriceRange>({ min: 0, max: 1000 });
+const loading = ref(true);
+
+// Computed properties
+const products = computed(() => productStore.products);
+const categories = computed(() => productStore.categories);
+
+const filteredProducts = computed(() => {
+  let filtered = products.value;
+
+  // Search filter
+  if (searchQuery.value) {
+    const query = searchQuery.value.toLowerCase();
+    filtered = filtered.filter(product =>
+      product.name.toLowerCase().includes(query) ||
+      product.description.toLowerCase().includes(query) ||
+      product.tags?.some(tag => tag.toLowerCase().includes(query))
+    );
+  }
+
+  // Category filter
+  if (selectedCategory.value) {
+    filtered = filtered.filter(product =>
+      product.categoryId === selectedCategory.value
+    );
+  }
+
+  // Price range filter
+  filtered = filtered.filter(product =>
+    product.price >= priceRange.value.min &&
+    product.price <= priceRange.value.max
+  );
+
+  return filtered.sort((a, b) => {
+    // Sort by favorites first, then by name
+    const aFav = favoritesStore.isFavorite(a.id);
+    const bFav = favoritesStore.isFavorite(b.id);
+
+    if (aFav && !bFav) return -1;
+    if (!aFav && bFav) return 1;
+
+    return a.name.localeCompare(b.name);
+  });
+});
+
+// Methods
+const addToCart = (product: Product, quantity: number = 1) => {
+  cartStore.addItem(product, quantity);
+};
+
+const toggleFavorite = (product: Product) => {
+  favoritesStore.toggle(product.id);
+};
+
+const resetFilters = () => {
+  searchQuery.value = '';
+  selectedCategory.value = null;
+  priceRange.value = { min: 0, max: 1000 };
+};
+
+// Watchers
+watch([searchQuery, selectedCategory, priceRange], () => {
+  // Analytics tracking
+  productStore.trackFilterUsage({
+    search: searchQuery.value,
+    category: selectedCategory.value,
+    priceRange: priceRange.value
+  });
+}, { deep: true });
+
+// Lifecycle
+onMounted(async () => {
+  try {
+    await Promise.all([
+      productStore.fetchProducts(),
+      productStore.fetchCategories()
+    ]);
+  } catch (error) {
+    console.error('Failed to load catalog data:', error);
+  } finally {
+    loading.value = false;
+  }
+});
+<\/script>
+
+<style scoped>
+.product-catalog {
+  padding: 2rem;
+}
+
+.product-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 1.5rem;
+  margin-top: 2rem;
+}
+
+/* Transition animations */
+.product-enter-active,
+.product-leave-active {
+  transition: all 0.5s ease;
+}
+
+.product-enter-from,
+.product-leave-to {
+  opacity: 0;
+  transform: scale(0.8) translateY(20px);
+}
+
+.product-move {
+  transition: transform 0.5s ease;
+}
+</style>
+\`\`\`\`;
+
+            editor.setValue(content);
+        }
+
+        function loadSystemsExample() {
+            const content = \`# Systems Programming
+
+## Rust Systems Programming
+
+\`\`\`rust
+use std::collections::HashMap;
+use std::sync::{Arc, Mutex, RwLock};
+use std::thread;
+use std::time::{Duration, Instant};
+use tokio::sync::mpsc;
+use serde::{Deserialize, Serialize};
+
+#[derive(Debug, Clone, Serialize, Deserialize)]
+pub struct MetricPoint {
+    timestamp: u64,
+    value: f64,
+    labels: HashMap<String, String>,
+}
+
+#[derive(Debug)]
+pub struct MetricsCollector {
+    metrics: Arc<RwLock<HashMap<String, Vec<MetricPoint>>>>,
+    aggregators: Arc<Mutex<Vec<Box<dyn Aggregator + Send>>>>,
+}
+
+pub trait Aggregator: Send + Sync {
+    fn aggregate(&self, metrics: &[MetricPoint]) -> Option<f64>;
+    fn name(&self) -> &'static str;
+}
+
+pub struct AverageAggregator;
+pub struct MaxAggregator;
+pub struct P95Aggregator;
+
+impl Aggregator for AverageAggregator {
+    fn aggregate(&self, metrics: &[MetricPoint]) -> Option<f64> {
+        if metrics.is_empty() {
+            return None;
+        }
+        let sum: f64 = metrics.iter().map(|m| m.value).sum();
+        Some(sum / metrics.len() as f64)
+    }
+
+    fn name(&self) -> &'static str {
+        "average"
+    }
+}
+
+impl Aggregator for MaxAggregator {
+    fn aggregate(&self, metrics: &[MetricPoint]) -> Option<f64> {
+        metrics.iter().map(|m| m.value).fold(None, |acc, val| {
+            Some(acc.map_or(val, |acc_val| acc_val.max(val)))
+        })
+    }
+
+    fn name(&self) -> &'static str {
+        "max"
+    }
+}
+
+impl Aggregator for P95Aggregator {
+    fn aggregate(&self, metrics: &[MetricPoint]) -> Option<f64> {
+        if metrics.is_empty() {
+            return None;
+        }
+
+        let mut values: Vec<f64> = metrics.iter().map(|m| m.value).collect();
+        values.sort_by(|a, b| a.partial_cmp(b).unwrap_or(std::cmp::Ordering::Equal));
+
+        let index = ((values.len() as f64) * 0.95) as usize;
+        values.get(index.min(values.len() - 1)).copied()
+    }
+
+    fn name(&self) -> &'static str {
+        "p95"
+    }
+}
+
+impl MetricsCollector {
+    pub fn new() -> Self {
+        Self {
+            metrics: Arc::new(RwLock::new(HashMap::new())),
+            aggregators: Arc::new(Mutex::new(Vec::new())),
+        }
+    }
+
+    pub fn add_aggregator(&self, aggregator: Box<dyn Aggregator + Send>) {
+        let mut aggregators = self.aggregators.lock().unwrap();
+        aggregators.push(aggregator);
+    }
+
+    pub fn record_metric(&self, name: String, point: MetricPoint) -> Result<(), Box<dyn std::error::Error>> {
+        let mut metrics = self.metrics.write().map_err(|_| "Lock poisoned")?;
+        metrics.entry(name).or_insert_with(Vec::new).push(point);
+        Ok(())
+    }
+
+    pub async fn start_collection_loop(&self, mut receiver: mpsc::Receiver<(String, MetricPoint)>) {
+        let metrics = Arc::clone(&self.metrics);
+
+        tokio::spawn(async move {
+            while let Some((name, point)) = receiver.recv().await {
+                if let Ok(mut metrics_map) = metrics.write() {
+                    metrics_map.entry(name).or_insert_with(Vec::new).push(point);
+                }
+            }
+        });
+    }
+
+    pub fn aggregate_metrics(&self, metric_name: &str, window: Duration) -> HashMap<String, f64> {
+        let mut results = HashMap::new();
+        let now = std::time::SystemTime::now()
+            .duration_since(std::time::UNIX_EPOCH)
+            .unwrap()
+            .as_secs();
+        let window_start = now - window.as_secs();
+
+        if let Ok(metrics) = self.metrics.read() {
+            if let Some(metric_points) = metrics.get(metric_name) {
+                let windowed_points: Vec<MetricPoint> = metric_points
+                    .iter()
+                    .filter(|point| point.timestamp >= window_start)
+                    .cloned()
+                    .collect();
+
+                if let Ok(aggregators) = self.aggregators.lock() {
+                    for aggregator in aggregators.iter() {
+                        if let Some(value) = aggregator.aggregate(&windowed_points) {
+                            results.insert(aggregator.name().to_string(), value);
+                        }
+                    }
+                }
+            }
+        }
+
+        results
+    }
+
+    pub fn cleanup_old_metrics(&self, retention: Duration) {
+        let cutoff = std::time::SystemTime::now()
+            .duration_since(std::time::UNIX_EPOCH)
+            .unwrap()
+            .as_secs() - retention.as_secs();
+
+        if let Ok(mut metrics) = self.metrics.write() {
+            for (_, points) in metrics.iter_mut() {
+                points.retain(|point| point.timestamp >= cutoff);
+            }
+
+            // Remove empty metric series
+            metrics.retain(|_, points| !points.is_empty());
+        }
+    }
+}
+
+#[tokio::main]
+async fn main() -> Result<(), Box<dyn std::error::Error>> {
+    let collector = Arc::new(MetricsCollector::new());
+
+    // Add aggregators
+    collector.add_aggregator(Box::new(AverageAggregator));
+    collector.add_aggregator(Box::new(MaxAggregator));
+    collector.add_aggregator(Box::new(P95Aggregator));
+
+    // Create metrics channel
+    let (sender, receiver) = mpsc::channel(1000);
+
+    // Start collection loop
+    collector.start_collection_loop(receiver).await;
+
+    // Simulate metric collection
+    let collector_clone = Arc::clone(&collector);
+    let sender_clone = sender.clone();
+
+    tokio::spawn(async move {
+        let mut counter = 0;
+        loop {
+            let now = std::time::SystemTime::now()
+                .duration_since(std::time::UNIX_EPOCH)
+                .unwrap()
+                .as_secs();
+
+            let metric = MetricPoint {
+                timestamp: now,
+                value: (counter as f64 * 1.5) + (rand::random::<f64>() * 10.0),
+                labels: {
+                    let mut labels = HashMap::new();
+                    labels.insert("service".to_string(), "api".to_string());
+                    labels.insert("instance".to_string(), format!("host-{}", counter % 3));
+                    labels
+                },
+            };
+
+            if sender_clone.send(("response_time".to_string(), metric)).await.is_err() {
+                break;
+            }
+
+            counter += 1;
+            tokio::time::sleep(Duration::from_millis(100)).await;
+        }
+    });
+
+    // Periodic aggregation and cleanup
+    let collector_clone = Arc::clone(&collector);
+    tokio::spawn(async move {
+        let mut interval = tokio::time::interval(Duration::from_secs(10));
+
+        loop {
+            interval.tick().await;
+
+            // Aggregate metrics
+            let aggregated = collector_clone.aggregate_metrics(
+                "response_time",
+                Duration::from_secs(60)
+            );
+
+            println!("Aggregated metrics: {:?}", aggregated);
+
+            // Cleanup old metrics
+            collector_clone.cleanup_old_metrics(Duration::from_secs(300));
+        }
+    });
+
+    // Keep the main thread alive
+    tokio::time::sleep(Duration::from_secs(30)).await;
+    println!("Metrics collection completed");
+
+    Ok(())
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn test_average_aggregator() {
+        let aggregator = AverageAggregator;
+        let metrics = vec![
+            MetricPoint { timestamp: 1, value: 10.0, labels: HashMap::new() },
+            MetricPoint { timestamp: 2, value: 20.0, labels: HashMap::new() },
+            MetricPoint { timestamp: 3, value: 30.0, labels: HashMap::new() },
+        ];
+
+        let result = aggregator.aggregate(&metrics);
+        assert_eq!(result, Some(20.0));
+    }
+
+    #[tokio::test]
+    async fn test_metrics_collection() {
+        let collector = MetricsCollector::new();
+        collector.add_aggregator(Box::new(AverageAggregator));
+
+        let metric = MetricPoint {
+            timestamp: 1,
+            value: 42.0,
+            labels: HashMap::new(),
+        };
+
+        collector.record_metric("test_metric".to_string(), metric).unwrap();
+
+        let aggregated = collector.aggregate_metrics(
+            "test_metric",
+            Duration::from_secs(60)
+        );
+
+        assert!(aggregated.contains_key("average"));
+        assert_eq!(aggregated["average"], 42.0);
+    }
+}
+\`\`\`
+
+## C++ High-Performance Computing
+
+\`\`\`cpp
+#include <iostream>
+#include <vector>
+#include <memory>
+#include <thread>
+#include <mutex>
+#include <condition_variable>
+#include <atomic>
+#include <chrono>
+#include <algorithm>
+#include <numeric>
+#include <future>
+#include <queue>
+
+template<typename T>
+class ThreadSafeQueue {
+private:
+    mutable std::mutex mtx_;
+    std::queue<T> queue_;
+    std::condition_variable condition_;
+
+public:
+    ThreadSafeQueue() = default;
+
+    ThreadSafeQueue(const ThreadSafeQueue& other) {
+        std::lock_guard<std::mutex> lock(other.mtx_);
+        queue_ = other.queue_;
+    }
+
+    ThreadSafeQueue& operator=(const ThreadSafeQueue&) = delete;
+
+    void push(T item) {
+        std::lock_guard<std::mutex> lock(mtx_);
+        queue_.push(std::move(item));
+        condition_.notify_one();
+    }
+
+    bool try_pop(T& item) {
+        std::lock_guard<std::mutex> lock(mtx_);
+        if (queue_.empty()) {
+            return false;
+        }
+        item = std::move(queue_.front());
+        queue_.pop();
+        return true;
+    }
+
+    std::shared_ptr<T> try_pop() {
+        std::lock_guard<std::mutex> lock(mtx_);
+        if (queue_.empty()) {
+            return std::shared_ptr<T>();
+        }
+        auto res = std::make_shared<T>(std::move(queue_.front()));
+        queue_.pop();
+        return res;
+    }
+
+    void wait_and_pop(T& item) {
+        std::unique_lock<std::mutex> lock(mtx_);
+        while (queue_.empty()) {
+            condition_.wait(lock);
+        }
+        item = std::move(queue_.front());
+        queue_.pop();
+    }
+
+    std::shared_ptr<T> wait_and_pop() {
+        std::unique_lock<std::mutex> lock(mtx_);
+        while (queue_.empty()) {
+            condition_.wait(lock);
+        }
+        auto res = std::make_shared<T>(std::move(queue_.front()));
+        queue_.pop();
+        return res;
+    }
+
+    bool empty() const {
+        std::lock_guard<std::mutex> lock(mtx_);
+        return queue_.empty();
+    }
+
+    size_t size() const {
+        std::lock_guard<std::mutex> lock(mtx_);
+        return queue_.size();
+    }
+};
+
+class ThreadPool {
+private:
+    std::vector<std::thread> workers_;
+    ThreadSafeQueue<std::function<void()>> tasks_;
+    std::atomic<bool> stopping_{false};
+
+public:
+    explicit ThreadPool(size_t num_threads) {
+        for (size_t i = 0; i < num_threads; ++i) {
+            workers_.emplace_back([this] {
+                while (!stopping_.load()) {
+                    std::function<void()> task;
+                    if (tasks_.try_pop(task)) {
+                        task();
+                    } else {
+                        std::this_thread::sleep_for(std::chrono::milliseconds(1));
+                    }
+                }
+            });
+        }
+    }
+
+    ~ThreadPool() {
+        stopping_.store(true);
+        for (auto& worker : workers_) {
+            if (worker.joinable()) {
+                worker.join();
+            }
+        }
+    }
+
+    template<typename F, typename... Args>
+    auto submit(F&& f, Args&&... args)
+        -> std::future<typename std::result_of<F(Args...)>::type> {
+
+        using return_type = typename std::result_of<F(Args...)>::type;
+
+        auto task = std::make_shared<std::packaged_task<return_type()>>(
+            std::bind(std::forward<F>(f), std::forward<Args>(args)...)
+        );
+
+        std::future<return_type> result = task->get_future();
+
+        if (stopping_.load()) {
+            throw std::runtime_error("ThreadPool is stopping");
+        }
+
+        tasks_.push([task]() { (*task)(); });
+        return result;
+    }
+
+    size_t num_threads() const {
+        return workers_.size();
+    }
+};
+
+// Matrix multiplication with parallel processing
+template<typename T>
+class Matrix {
+private:
+    std::vector<std::vector<T>> data_;
+    size_t rows_, cols_;
+
+public:
+    Matrix(size_t rows, size_t cols) : rows_(rows), cols_(cols) {
+        data_.resize(rows, std::vector<T>(cols, T{}));
+    }
+
+    Matrix(std::initializer_list<std::initializer_list<T>> init) {
+        rows_ = init.size();
+        cols_ = init.begin()->size();
+        data_.reserve(rows_);
+
+        for (const auto& row : init) {
+            data_.emplace_back(row);
+        }
+    }
+
+    T& operator()(size_t row, size_t col) {
+        return data_[row][col];
+    }
+
+    const T& operator()(size_t row, size_t col) const {
+        return data_[row][col];
+    }
+
+    size_t rows() const { return rows_; }
+    size_t cols() const { return cols_; }
+
+    Matrix<T> parallel_multiply(const Matrix<T>& other, ThreadPool& pool) const {
+        if (cols_ != other.rows_) {
+            throw std::invalid_argument("Matrix dimensions don't match for multiplication");
+        }
+
+        Matrix<T> result(rows_, other.cols_);
+        std::vector<std::future<void>> futures;
+
+        // Divide work among threads
+        size_t num_threads = pool.num_threads();
+        size_t rows_per_thread = (rows_ + num_threads - 1) / num_threads;
+
+        for (size_t t = 0; t < num_threads; ++t) {
+            size_t start_row = t * rows_per_thread;
+            size_t end_row = std::min(start_row + rows_per_thread, rows_);
+
+            if (start_row < end_row) {
+                futures.push_back(pool.submit([this, &other, &result, start_row, end_row]() {
+                    for (size_t i = start_row; i < end_row; ++i) {
+                        for (size_t j = 0; j < other.cols_; ++j) {
+                            T sum = T{};
+                            for (size_t k = 0; k < cols_; ++k) {
+                                sum += data_[i][k] * other(k, j);
+                            }
+                            result(i, j) = sum;
+                        }
+                    }
+                }));
+            }
+        }
+
+        // Wait for all tasks to complete
+        for (auto& future : futures) {
+            future.get();
+        }
+
+        return result;
+    }
+
+    void print() const {
+        for (size_t i = 0; i < rows_; ++i) {
+            for (size_t j = 0; j < cols_; ++j) {
+                std::cout << data_[i][j] << " ";
+            }
+            std::cout << std::endl;
+        }
+    }
+};
+
+// Benchmark function
+template<typename Func>
+auto benchmark(const std::string& name, Func&& func) {
+    auto start = std::chrono::high_resolution_clock::now();
+    auto result = func();
+    auto end = std::chrono::high_resolution_clock::now();
+
+    auto duration = std::chrono::duration_cast<std::chrono::microseconds>(end - start);
+    std::cout << name << " took: " << duration.count() << " microseconds" << std::endl;
+
+    return result;
+}
+
+int main() {
+    const size_t matrix_size = 100;
+    const size_t num_threads = std::thread::hardware_concurrency();
+
+    std::cout << "Using " << num_threads << " threads" << std::endl;
+
+    ThreadPool pool(num_threads);
+
+    // Create large random matrices
+    Matrix<double> A(matrix_size, matrix_size);
+    Matrix<double> B(matrix_size, matrix_size);
+
+    // Initialize with random values
+    std::random_device rd;
+    std::mt19937 gen(rd());
+    std::uniform_real_distribution<> dis(0.0, 10.0);
+
+    for (size_t i = 0; i < matrix_size; ++i) {
+        for (size_t j = 0; j < matrix_size; ++j) {
+            A(i, j) = dis(gen);
+            B(i, j) = dis(gen);
+        }
+    }
+
+    // Benchmark parallel multiplication
+    auto result = benchmark("Parallel matrix multiplication", [&]() {
+        return A.parallel_multiply(B, pool);
+    });
+
+    std::cout << "Matrix multiplication completed successfully!" << std::endl;
+    std::cout << "Result matrix size: " << result.rows() << "x" << result.cols() << std::endl;
+
+    return 0;
+}
+\`\`\`\`;
+
+            editor.setValue(content);
+        }
+
+        function loadDataExample() {
+            const content = \`# Data Science & Analytics
+
+## SQL Advanced Analytics
+
+\`\`\`sql
+-- Advanced Customer Segmentation and Cohort Analysis
+WITH customer_metrics AS (
+    SELECT
+        c.customer_id,
+        c.first_name,
+        c.last_name,
+        c.email,
+        c.registration_date,
+        c.country,
+        c.acquisition_channel,
+
+        -- Recency (days since last order)
+        COALESCE(
+            DATEDIFF(CURRENT_DATE, MAX(o.order_date)),
+            999
+        ) AS recency_days,
+
+        -- Frequency (number of orders)
+        COUNT(DISTINCT o.order_id) AS order_frequency,
+
+        -- Monetary (total spend)
+        COALESCE(SUM(oi.quantity * oi.unit_price), 0) AS total_spend,
+
+        -- Average order value
+        COALESCE(
+            SUM(oi.quantity * oi.unit_price) / NULLIF(COUNT(DISTINCT o.order_id), 0),
+            0
+        ) AS avg_order_value,
+
+        -- Customer lifetime value indicators
+        DATEDIFF(CURRENT_DATE, c.registration_date) AS customer_lifetime_days,
+
+        -- Seasonal behavior
+        CASE
+            WHEN EXTRACT(MONTH FROM MAX(o.order_date)) IN (12, 1, 2) THEN 'Winter'
+            WHEN EXTRACT(MONTH FROM MAX(o.order_date)) IN (3, 4, 5) THEN 'Spring'
+            WHEN EXTRACT(MONTH FROM MAX(o.order_date)) IN (6, 7, 8) THEN 'Summer'
+            ELSE 'Fall'
+        END AS preferred_season,
+
+        -- Favorite product category
+        (
+            SELECT pc.category_name
+            FROM order_items oi2
+            JOIN orders o2 ON oi2.order_id = o2.order_id
+            JOIN products p ON oi2.product_id = p.product_id
+            JOIN product_categories pc ON p.category_id = pc.category_id
+            WHERE o2.customer_id = c.customer_id
+            GROUP BY pc.category_name
+            ORDER BY SUM(oi2.quantity * oi2.unit_price) DESC
+            LIMIT 1
+        ) AS favorite_category,
+
+        -- Purchase pattern consistency
+        STDDEV(DATEDIFF(o.order_date, LAG(o.order_date) OVER (PARTITION BY c.customer_id ORDER BY o.order_date))) AS order_interval_stddev
+
+    FROM customers c
+    LEFT JOIN orders o ON c.customer_id = o.customer_id
+    LEFT JOIN order_items oi ON o.order_id = oi.order_id
+    WHERE c.registration_date >= '2020-01-01'
+    GROUP BY c.customer_id, c.first_name, c.last_name, c.email, c.registration_date, c.country, c.acquisition_channel
+),
+
+rfm_quartiles AS (
+    -- Calculate quartiles for RFM scoring
+    SELECT
+        PERCENTILE_CONT(0.25) WITHIN GROUP (ORDER BY recency_days) AS recency_q1,
+        PERCENTILE_CONT(0.50) WITHIN GROUP (ORDER BY recency_days) AS recency_q2,
+        PERCENTILE_CONT(0.75) WITHIN GROUP (ORDER BY recency_days) AS recency_q3,
+
+        PERCENTILE_CONT(0.25) WITHIN GROUP (ORDER BY order_frequency) AS frequency_q1,
+        PERCENTILE_CONT(0.50) WITHIN GROUP (ORDER BY order_frequency) AS frequency_q2,
+        PERCENTILE_CONT(0.75) WITHIN GROUP (ORDER BY order_frequency) AS frequency_q3,
+
+        PERCENTILE_CONT(0.25) WITHIN GROUP (ORDER BY total_spend) AS monetary_q1,
+        PERCENTILE_CONT(0.50) WITHIN GROUP (ORDER BY total_spend) AS monetary_q2,
+        PERCENTILE_CONT(0.75) WITHIN GROUP (ORDER BY total_spend) AS monetary_q3
+    FROM customer_metrics
+),
+
+rfm_scores AS (
+    -- Calculate RFM scores using quartiles
+    SELECT cm.*,
+        -- Recency Score (lower days = higher score)
+        CASE
+            WHEN cm.recency_days <= rq.recency_q1 THEN 4
+            WHEN cm.recency_days <= rq.recency_q2 THEN 3
+            WHEN cm.recency_days <= rq.recency_q3 THEN 2
+            ELSE 1
+        END AS recency_score,
+
+        -- Frequency Score
+        CASE
+            WHEN cm.order_frequency >= rq.frequency_q3 THEN 4
+            WHEN cm.order_frequency >= rq.frequency_q2 THEN 3
+            WHEN cm.order_frequency >= rq.frequency_q1 THEN 2
+            ELSE 1
+        END AS frequency_score,
+
+        -- Monetary Score
+        CASE
+            WHEN cm.total_spend >= rq.monetary_q3 THEN 4
+            WHEN cm.total_spend >= rq.monetary_q2 THEN 3
+            WHEN cm.total_spend >= rq.monetary_q1 THEN 2
+            ELSE 1
+        END AS monetary_score
+
+    FROM customer_metrics cm
+    CROSS JOIN rfm_quartiles rq
+),
+
+customer_segments AS (
+    -- Advanced customer segmentation based on RFM and behavioral patterns
+    SELECT *,
+        -- RFM-based segments
+        CASE
+            WHEN recency_score = 4 AND frequency_score >= 3 AND monetary_score >= 3
+                THEN 'Champions'
+            WHEN recency_score >= 3 AND frequency_score >= 2 AND monetary_score >= 2
+                THEN 'Loyal Customers'
+            WHEN recency_score >= 3 AND frequency_score <= 2 AND monetary_score <= 2
+                THEN 'Potential Loyalists'
+            WHEN recency_score >= 2 AND frequency_score <= 2 AND monetary_score >= 3
+                THEN 'Big Spenders'
+            WHEN recency_score >= 3 AND frequency_score <= 1
+                THEN 'New Customers'
+            WHEN recency_score = 2 AND frequency_score >= 2
+                THEN 'At Risk'
+            WHEN recency_score = 1 AND frequency_score >= 3 AND monetary_score >= 3
+                THEN 'Cannot Lose Them'
+            WHEN recency_score = 1 AND frequency_score >= 2
+                THEN 'Hibernating'
+            ELSE 'Lost'
+        END AS rfm_segment,
+
+        -- Value-based tiers
+        CASE
+            WHEN total_spend >= 2000 THEN 'VIP'
+            WHEN total_spend >= 1000 THEN 'High Value'
+            WHEN total_spend >= 500 THEN 'Medium Value'
+            WHEN total_spend >= 100 THEN 'Standard'
+            ELSE 'Low Value'
+        END AS value_tier,
+
+        -- Behavioral segments
+        CASE
+            WHEN order_interval_stddev <= 7 AND order_frequency >= 3 THEN 'Regular'
+            WHEN avg_order_value >= (SELECT AVG(avg_order_value) * 1.5 FROM customer_metrics) THEN 'High AOV'
+            WHEN customer_lifetime_days <= 90 THEN 'Recent'
+            WHEN customer_lifetime_days >= 365 THEN 'Veteran'
+            ELSE 'Occasional'
+        END AS behavioral_segment
+
+    FROM rfm_scores
+),
+
+cohort_analysis AS (
+    -- Monthly cohort analysis for retention tracking
+    SELECT
+        DATE_TRUNC('month', c.registration_date) AS cohort_month,
+        DATE_DIFF('month', DATE_TRUNC('month', c.registration_date), DATE_TRUNC('month', o.order_date)) AS period_number,
+        COUNT(DISTINCT c.customer_id) AS customers_in_period,
+        SUM(oi.quantity * oi.unit_price) AS revenue_in_period
+
+    FROM customers c
+    JOIN orders o ON c.customer_id = o.customer_id
+    JOIN order_items oi ON o.order_id = oi.order_id
+    WHERE c.registration_date >= '2022-01-01'
+    GROUP BY cohort_month, period_number
+),
+
+cohort_sizes AS (
+    -- Initial cohort sizes for retention calculation
+    SELECT
+        DATE_TRUNC('month', registration_date) AS cohort_month,
+        COUNT(DISTINCT customer_id) AS cohort_size,
+        SUM(CASE WHEN total_spend > 0 THEN 1 ELSE 0 END) AS paying_customers
+    FROM customer_metrics
+    WHERE registration_date >= '2022-01-01'
+    GROUP BY DATE_TRUNC('month', registration_date)
+)
+
+-- Main analysis output
+SELECT
+    'Customer Segmentation Summary' AS analysis_type,
+    rfm_segment AS segment,
+    COUNT(*) AS customer_count,
+    ROUND(COUNT(*) * 100.0 / SUM(COUNT(*)) OVER (), 2) AS percentage,
+    ROUND(AVG(total_spend), 2) AS avg_total_spend,
+    ROUND(AVG(avg_order_value), 2) AS avg_order_value,
+    ROUND(AVG(order_frequency), 1) AS avg_order_frequency,
+    ROUND(AVG(recency_days), 1) AS avg_recency_days,
+
+    -- Business impact metrics
+    SUM(total_spend) AS segment_total_revenue,
+    ROUND(SUM(total_spend) * 100.0 / SUM(SUM(total_spend)) OVER (), 2) AS revenue_percentage,
+
+    -- Recommended actions
+    CASE rfm_segment
+        WHEN 'Champions' THEN 'Reward loyalty, early access to new products, referral programs'
+        WHEN 'Loyal Customers' THEN 'Upsell premium products, loyalty program, exclusive offers'
+        WHEN 'Potential Loyalists' THEN 'Membership programs, personalized recommendations'
+        WHEN 'New Customers' THEN 'Onboarding sequence, welcome offers, education content'
+        WHEN 'Big Spenders' THEN 'VIP treatment, premium support, exclusive products'
+        WHEN 'At Risk' THEN 'Win-back campaigns, satisfaction surveys, special discounts'
+        WHEN 'Cannot Lose Them' THEN 'Personal outreach, significant offers, feedback calls'
+        WHEN 'Hibernating' THEN 'Reactivation campaigns, product updates, surveys'
+        ELSE 'Low-cost acquisition attempts, re-engagement surveys'
+    END AS recommended_action
+
+FROM customer_segments
+GROUP BY rfm_segment
+
+UNION ALL
+
+-- Channel performance analysis
+SELECT
+    'Channel Performance' AS analysis_type,
+    CONCAT(acquisition_channel, ' - ', value_tier) AS segment,
+    COUNT(*) AS customer_count,
+    ROUND(COUNT(*) * 100.0 / SUM(COUNT(*)) OVER (PARTITION BY acquisition_channel), 2) AS percentage,
+    ROUND(AVG(total_spend), 2) AS avg_total_spend,
+    ROUND(AVG(avg_order_value), 2) AS avg_order_value,
+    ROUND(AVG(order_frequency), 1) AS avg_order_frequency,
+    ROUND(AVG(recency_days), 1) AS avg_recency_days,
+    SUM(total_spend) AS segment_total_revenue,
+    ROUND(SUM(total_spend) * 100.0 / SUM(SUM(total_spend)) OVER (PARTITION BY acquisition_channel), 2) AS revenue_percentage,
+    CONCAT('Optimize ', acquisition_channel, ' for ', value_tier, ' customers') AS recommended_action
+
+FROM customer_segments
+WHERE acquisition_channel IS NOT NULL
+GROUP BY acquisition_channel, value_tier
+
+UNION ALL
+
+-- Geographic insights
+SELECT
+    'Geographic Analysis' AS analysis_type,
+    CONCAT(country, ' - ', behavioral_segment) AS segment,
+    COUNT(*) AS customer_count,
+    ROUND(COUNT(*) * 100.0 / SUM(COUNT(*)) OVER (PARTITION BY country), 2) AS percentage,
+    ROUND(AVG(total_spend), 2) AS avg_total_spend,
+    ROUND(AVG(avg_order_value), 2) AS avg_order_value,
+    ROUND(AVG(order_frequency), 1) AS avg_order_frequency,
+    ROUND(AVG(recency_days), 1) AS avg_recency_days,
+    SUM(total_spend) AS segment_total_revenue,
+    ROUND(SUM(total_spend) * 100.0 / SUM(SUM(total_spend)) OVER (PARTITION BY country), 2) AS revenue_percentage,
+    CONCAT('Localize strategy for ', behavioral_segment, ' customers in ', country) AS recommended_action
+
+FROM customer_segments
+WHERE country IS NOT NULL
+GROUP BY country, behavioral_segment
+HAVING COUNT(*) >= 10
+
+ORDER BY analysis_type, customer_count DESC;
+
+-- Separate query for cohort retention analysis
+WITH retention_rates AS (
+    SELECT
+        ca.cohort_month,
+        ca.period_number,
+        ca.customers_in_period,
+        cs.cohort_size,
+        ROUND(ca.customers_in_period * 100.0 / cs.cohort_size, 2) AS retention_rate,
+        ca.revenue_in_period,
+        ROUND(ca.revenue_in_period / ca.customers_in_period, 2) AS avg_revenue_per_customer
+    FROM cohort_analysis ca
+    JOIN cohort_sizes cs ON ca.cohort_month = cs.cohort_month
+)
+
+SELECT
+    cohort_month,
+    period_number,
+    CASE period_number
+        WHEN 0 THEN 'Registration Month'
+        WHEN 1 THEN 'Month 1'
+        WHEN 3 THEN 'Month 3 (Critical)'
+        WHEN 6 THEN 'Month 6'
+        WHEN 12 THEN 'Year 1'
+        ELSE CONCAT('Month ', period_number)
+    END AS period_label,
+    retention_rate,
+    avg_revenue_per_customer,
+
+    -- Health indicators
+    CASE
+        WHEN period_number = 1 AND retention_rate >= 40 THEN 'Excellent'
+        WHEN period_number = 1 AND retention_rate >= 25 THEN 'Good'
+        WHEN period_number = 1 AND retention_rate >= 15 THEN 'Average'
+        WHEN period_number = 3 AND retention_rate >= 20 THEN 'Good'
+        WHEN period_number = 6 AND retention_rate >= 15 THEN 'Good'
+        WHEN period_number = 12 AND retention_rate >= 10 THEN 'Good'
+        ELSE 'Needs Attention'
+    END AS retention_health
+
+FROM retention_rates
+WHERE period_number IN (0, 1, 3, 6, 12, 24)
+ORDER BY cohort_month DESC, period_number;
+\`\`\`
+
+## R Statistical Analysis
+
+\`\`\`r
+# Advanced Statistical Analysis and Machine Learning in R
+library(tidyverse)
+library(caret)
+library(randomForest)
+library(xgboost)
+library(corrplot)
+library(VIM)
+library(mice)
+library(plotly)
+library(DT)
+
+# Advanced Data Preprocessing Pipeline
+preprocess_data <- function(data, target_var, test_split = 0.2) {
+
+  cat("Starting advanced data preprocessing...\\n")
+
+  # Initial data summary
+  cat("Dataset shape:", nrow(data), "rows,", ncol(data), "columns\\n")
+  cat("Missing values summary:\\n")
+  print(colSums(is.na(data)))
+
+  # Identify column types
+  numeric_cols <- data %>%
+    select_if(is.numeric) %>%
+    names() %>%
+    setdiff(target_var)
+
+  categorical_cols <- data %>%
+    select_if(function(x) is.character(x) | is.factor(x)) %>%
+    names()
+
+  cat("Numeric columns:", length(numeric_cols), "\\n")
+  cat("Categorical columns:", length(categorical_cols), "\\n")
+
+  # Advanced missing value imputation
+  if (any(is.na(data))) {
+    cat("Performing advanced missing value imputation using MICE...\\n")
+
+    # Use MICE for sophisticated imputation
+    mice_imputation <- mice(data, m = 5, method = 'pmm', printFlag = FALSE)
+    data_imputed <- complete(mice_imputation)
+
+    cat("Missing values after imputation:", sum(is.na(data_imputed)), "\\n")
+  } else {
+    data_imputed <- data
+  }
+
+  # Feature engineering
+  cat("Creating engineered features...\\n")
+
+  # Polynomial features for top numeric predictors
+  if (length(numeric_cols) >= 2) {
+    # Calculate correlation with target to identify top predictors
+    correlations <- cor(data_imputed[numeric_cols],
+                       data_imputed[[target_var]],
+                       use = "complete.obs")
+    top_numeric <- names(sort(abs(correlations), decreasing = TRUE))[1:min(3, length(numeric_cols))]
+
+    # Create polynomial features
+    for (col in top_numeric) {
+      data_imputed[[paste0(col, "_squared")]] <- data_imputed[[col]]^2
+      data_imputed[[paste0(col, "_log")]] <- log1p(abs(data_imputed[[col]]))
+    }
+
+    # Create interaction features
+    if (length(top_numeric) >= 2) {
+      for (i in 1:(length(top_numeric)-1)) {
+        for (j in (i+1):length(top_numeric)) {
+          col1 <- top_numeric[i]
+          col2 <- top_numeric[j]
+          data_imputed[[paste0(col1, "_x_", col2)]] <-
+            data_imputed[[col1]] * data_imputed[[col2]]
+        }
+      }
+    }
+  }
+
+  # Advanced categorical encoding
+  if (length(categorical_cols) > 0) {
+    for (col in categorical_cols) {
+      # Target encoding for high-cardinality categories
+      if (n_distinct(data_imputed[[col]]) > 10) {
+        target_encoding <- data_imputed %>%
+          group_by(!!sym(col)) %>%
+          summarise(mean_target = mean(!!sym(target_var), na.rm = TRUE),
+                   .groups = 'drop')
+
+        data_imputed <- data_imputed %>%
+          left_join(target_encoding, by = col) %>%
+          mutate(!!paste0(col, "_target_encoded") := mean_target) %>%
+          select(-mean_target)
+      }
+
+      # Frequency encoding
+      freq_encoding <- data_imputed %>%
+        count(!!sym(col), name = "frequency")
+
+      data_imputed <- data_imputed %>%
+        left_join(freq_encoding, by = col) %>%
+        rename(!!paste0(col, "_frequency") := frequency)
+    }
+  }
+
+  # Outlier detection and treatment
+  cat("Detecting and treating outliers...\\n")
+  numeric_cols_updated <- data_imputed %>%
+    select_if(is.numeric) %>%
+    names() %>%
+    setdiff(target_var)
+
+  for (col in numeric_cols_updated) {
+    Q1 <- quantile(data_imputed[[col]], 0.25, na.rm = TRUE)
+    Q3 <- quantile(data_imputed[[col]], 0.75, na.rm = TRUE)
+    IQR <- Q3 - Q1
+    lower_bound <- Q1 - 1.5 * IQR
+    upper_bound <- Q3 + 1.5 * IQR
+
+    outliers_count <- sum(data_imputed[[col]] < lower_bound |
+                         data_imputed[[col]] > upper_bound, na.rm = TRUE)
+
+    if (outliers_count > 0) {
+      cat("Treating", outliers_count, "outliers in", col, "\\n")
+      data_imputed[[col]] <- pmax(pmin(data_imputed[[col]], upper_bound), lower_bound)
+    }
+  }
+
+  # Train-test split
+  set.seed(42)
+  train_indices <- createDataPartition(data_imputed[[target_var]],
+                                      p = 1 - test_split,
+                                      list = FALSE)
+
+  train_data <- data_imputed[train_indices, ]
+  test_data <- data_imputed[-train_indices, ]
+
+  cat("Training set:", nrow(train_data), "rows\\n")
+  cat("Test set:", nrow(test_data), "rows\\n")
+
+  list(
+    train = train_data,
+    test = test_data,
+    preprocessing_info = list(
+      numeric_cols = numeric_cols_updated,
+      categorical_cols = categorical_cols,
+      original_shape = dim(data),
+      processed_shape = dim(data_imputed)
+    )
+  )
+}
+
+# Advanced Model Training and Evaluation
+train_advanced_models <- function(train_data, test_data, target_var) {
+
+  cat("Training advanced machine learning models...\\n")
+
+  # Prepare data for modeling
+  feature_cols <- setdiff(names(train_data), target_var)
+
+  X_train <- train_data[feature_cols]
+  y_train <- train_data[[target_var]]
+  X_test <- test_data[feature_cols]
+  y_test <- test_data[[target_var]]
+
+  # Model configurations
+  models <- list()
+  results <- data.frame()
+
+  # Random Forest
+  cat("Training Random Forest...\\n")
+  rf_model <- randomForest(
+    x = X_train,
+    y = y_train,
+    ntree = 500,
+    mtry = floor(sqrt(ncol(X_train))),
+    importance = TRUE,
+    do.trace = 50
+  )
+
+  rf_pred <- predict(rf_model, X_test)
+  rf_rmse <- sqrt(mean((y_test - rf_pred)^2))
+  rf_mae <- mean(abs(y_test - rf_pred))
+  rf_r2 <- cor(y_test, rf_pred)^2
+
+  models[["random_forest"]] <- rf_model
+  results <- rbind(results, data.frame(
+    Model = "Random Forest",
+    RMSE = rf_rmse,
+    MAE = rf_mae,
+    R_squared = rf_r2
+  ))
+
+  # XGBoost
+  cat("Training XGBoost...\\n")
+  # Prepare data for XGBoost
+  dtrain <- xgb.DMatrix(data = as.matrix(X_train), label = y_train)
+  dtest <- xgb.DMatrix(data = as.matrix(X_test), label = y_test)
+
+  # XGBoost parameters
+  xgb_params <- list(
+    objective = "reg:squarederror",
+    eval_metric = "rmse",
+    max_depth = 6,
+    eta = 0.1,
+    subsample = 0.8,
+    colsample_bytree = 0.8
+  )
+
+  # Train with early stopping
+  xgb_model <- xgb.train(
+    params = xgb_params,
+    data = dtrain,
+    nrounds = 1000,
+    watchlist = list(train = dtrain, test = dtest),
+    early_stopping_rounds = 50,
+    print_every_n = 100,
+    verbose = 1
+  )
+
+  xgb_pred <- predict(xgb_model, dtest)
+  xgb_rmse <- sqrt(mean((y_test - xgb_pred)^2))
+  xgb_mae <- mean(abs(y_test - xgb_pred))
+  xgb_r2 <- cor(y_test, xgb_pred)^2
+
+  models[["xgboost"]] <- xgb_model
+  results <- rbind(results, data.frame(
+    Model = "XGBoost",
+    RMSE = xgb_rmse,
+    MAE = xgb_mae,
+    R_squared = xgb_r2
+  ))
+
+  # Linear Model with Regularization
+  cat("Training Regularized Linear Model...\\n")
+  lm_model <- train(
+    x = X_train,
+    y = y_train,
+    method = "glmnet",
+    trControl = trainControl(method = "cv", number = 5),
+    tuneGrid = expand.grid(
+      alpha = seq(0, 1, 0.1),
+      lambda = 10^seq(-3, 1, length = 50)
+    )
+  )
+
+  lm_pred <- predict(lm_model, X_test)
+  lm_rmse <- sqrt(mean((y_test - lm_pred)^2))
+  lm_mae <- mean(abs(y_test - lm_pred))
+  lm_r2 <- cor(y_test, lm_pred)^2
+
+  models[["linear_regularized"]] <- lm_model
+  results <- rbind(results, data.frame(
+    Model = "Regularized Linear",
+    RMSE = lm_rmse,
+    MAE = lm_mae,
+    R_squared = lm_r2
+  ))
+
+  # Ensemble Model (Simple Average)
+  ensemble_pred <- (rf_pred + xgb_pred + lm_pred) / 3
+  ensemble_rmse <- sqrt(mean((y_test - ensemble_pred)^2))
+  ensemble_mae <- mean(abs(y_test - ensemble_pred))
+  ensemble_r2 <- cor(y_test, ensemble_pred)^2
+
+  results <- rbind(results, data.frame(
+    Model = "Ensemble Average",
+    RMSE = ensemble_rmse,
+    MAE = ensemble_mae,
+    R_squared = ensemble_r2
+  ))
+
+  cat("\\nModel Performance Comparison:\\n")
+  print(results %>% arrange(RMSE))
+
+  # Feature importance analysis
+  cat("\\nAnalyzing feature importance...\\n")
+
+  # Random Forest importance
+  rf_importance <- importance(rf_model) %>%
+    as.data.frame() %>%
+    rownames_to_column("Feature") %>%
+    arrange(desc(\`%IncMSE\`))
+
+  # XGBoost importance
+  xgb_importance <- xgb.importance(
+    feature_names = colnames(X_train),
+    model = xgb_model
+  )
+
+  list(
+    models = models,
+    results = results,
+    predictions = list(
+      random_forest = rf_pred,
+      xgboost = xgb_pred,
+      linear_regularized = lm_pred,
+      ensemble = ensemble_pred,
+      actual = y_test
+    ),
+    feature_importance = list(
+      random_forest = rf_importance,
+      xgboost = xgb_importance
+    )
+  )
+}
+
+# Main execution function
+analyze_dataset <- function(file_path, target_variable) {
+
+  # Load and inspect data
+  cat("Loading dataset from:", file_path, "\\n")
+  data <- read.csv(file_path, stringsAsFactors = FALSE)
+
+  cat("Dataset loaded successfully!\\n")
+  cat("Shape:", nrow(data), "rows,", ncol(data), "columns\\n")
+  cat("Target variable:", target_variable, "\\n")
+
+  # Data preprocessing
+  processed_data <- preprocess_data(data, target_variable)
+
+  # Model training and evaluation
+  model_results <- train_advanced_models(
+    processed_data$train,
+    processed_data$test,
+    target_variable
+  )
+
+  # Create visualizations
+  cat("Creating visualizations...\\n")
+
+  # Model comparison plot
+  performance_plot <- model_results$results %>%
+    pivot_longer(cols = c(RMSE, MAE, R_squared),
+                names_to = "Metric",
+                values_to = "Value") %>%
+    ggplot(aes(x = Model, y = Value, fill = Model)) +
+    geom_col() +
+    facet_wrap(~Metric, scales = "free_y") +
+    theme_minimal() +
+    theme(axis.text.x = element_text(angle = 45, hjust = 1)) +
+    labs(title = "Model Performance Comparison",
+         subtitle = "Lower RMSE/MAE and higher R² indicate better performance")
+
+  # Feature importance plot (Random Forest)
+  importance_plot <- model_results$feature_importance$random_forest %>%
+    head(15) %>%
+    ggplot(aes(x = reorder(Feature, \`%IncMSE\`), y = \`%IncMSE\`)) +
+    geom_col(fill = "steelblue") +
+    coord_flip() +
+    theme_minimal() +
+    labs(title = "Top 15 Most Important Features",
+         subtitle = "Based on Random Forest % Increase in MSE",
+         x = "Features",
+         y = "Importance Score")
+
+  # Prediction vs Actual scatter plot
+  best_model_name <- model_results$results %>%
+    arrange(RMSE) %>%
+    slice(1) %>%
+    pull(Model)
+
+  prediction_plot <- data.frame(
+    Actual = model_results$predictions$actual,
+    Predicted = model_results$predictions$ensemble,  # Using ensemble
+    Model = "Ensemble"
+  ) %>%
+    ggplot(aes(x = Actual, y = Predicted)) +
+    geom_point(alpha = 0.6) +
+    geom_abline(slope = 1, intercept = 0, color = "red", linetype = "dashed") +
+    theme_minimal() +
+    labs(title = "Predictions vs Actual Values",
+         subtitle = paste("Model:", best_model_name),
+         x = "Actual Values",
+         y = "Predicted Values")
+
+  # Print final summary
+  cat("\\n" %+% "="*50, "\\n")
+  cat("ANALYSIS COMPLETE\\n")
+  cat("="*50, "\\n")
+  cat("Best performing model:", best_model_name, "\\n")
+  best_performance <- model_results$results %>% arrange(RMSE) %>% slice(1)
+  cat("RMSE:", round(best_performance$RMSE, 4), "\\n")
+  cat("R²:", round(best_performance$R_squared, 4), "\\n")
+
+  return(list(
+    processed_data = processed_data,
+    models = model_results,
+    plots = list(
+      performance = performance_plot,
+      importance = importance_plot,
+      predictions = prediction_plot
+    )
+  ))
+}
+
+# Example usage:
+# results <- analyze_dataset("your_dataset.csv", "target_column_name")
+# print(results$plots$performance)
+# print(results$plots$importance)
+# print(results$plots$predictions)
+\`\`\``;
+
+            editor.setValue(content);
+        }
+
+        // Auto-initialize highlight.js when page loads and wire UI events
+        window.addEventListener('load', () => {
+            // Theme change handler (module-scoped function isn't on window)
+            const themeSelectEl = document.getElementById('themeSelect');
+            if (themeSelectEl) themeSelectEl.addEventListener('change', () => changeTheme());
+
+            setTimeout(() => {
+                initializeHighlightJs();
+            }, 500);
+        });
+
+        console.log('highlight.js integration example loaded');
+    </script>
+</body>
+</html>
diff --git a/examples/shiki-integration.html b/examples/shiki-integration.html
new file mode 100644
index 0000000..a20612d
--- /dev/null
+++ b/examples/shiki-integration.html
@@ -0,0 +1,1637 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>OverType + Shiki.js Integration</title>
+    <style>
+        body {
+            font-family: system-ui, -apple-system, sans-serif;
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 40px 20px;
+            background: #f5f5f5;
+        }
+
+        h1 { color: #333; margin-bottom: 10px; }
+        .subtitle { color: #666; margin-bottom: 30px; }
+
+        .editor-container {
+            height: 600px;
+            background: white;
+            border-radius: 8px;
+            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+            overflow: hidden;
+        }
+
+        .controls {
+            margin-top: 20px;
+            display: flex;
+            gap: 10px;
+            flex-wrap: wrap;
+        }
+
+        button {
+            padding: 8px 16px;
+            border: none;
+            background: #4a90e2;
+            color: white;
+            border-radius: 4px;
+            cursor: pointer;
+            font-size: 14px;
+        }
+
+        button:hover { background: #357abd; }
+        button:disabled { background: #ccc; cursor: not-allowed; }
+
+        .status {
+            margin-top: 10px;
+            padding: 10px;
+            background: white;
+            border-radius: 4px;
+            border: 1px solid #e0e0e0;
+        }
+
+        .status.loading { background: #fff3cd; border-color: #ffeaa7; }
+        .status.ready { background: #d4edda; border-color: #c3e6cb; }
+        .status.error { background: #f8d7da; border-color: #f5c6cb; }
+
+        .info {
+            margin-top: 20px;
+            padding: 15px;
+            background: white;
+            border-radius: 8px;
+            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+            font-size: 14px;
+            line-height: 1.5;
+        }
+
+        .info h3 { margin-top: 0; color: #333; }
+        .info code {
+            background: #f5f5f5;
+            padding: 2px 4px;
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <h1>OverType + Shiki.js Integration</h1>
+    <p class="subtitle">Real-time syntax highlighting powered by Shiki's TextMate grammar engine</p>
+
+    <div id="editor" class="editor-container"></div>
+
+    <div class="controls">
+        <button onclick="setAdvancedExample()">Load Advanced Example</button>
+        <button onclick="setWebExample()">Load Web Example</button>
+        <button onclick="setDataExample()">Load Data Science Example</button>
+    </div>
+
+    <div id="status" class="status">Initializing Shiki syntax highlighter...</div>
+
+    <div class="info">
+        <h3>About This Integration</h3>
+        <p>This example demonstrates how to integrate <strong>Shiki.js</strong> with OverType for professional-grade syntax highlighting:</p>
+        <ul>
+            <li><strong>TextMate Grammars</strong>: Uses the same syntax highlighting as VS Code</li>
+            <li><strong>Multiple Themes</strong>: Supports dozens of color themes</li>
+            <li><strong>Language Support</strong>: 100+ programming languages</li>
+            <li><strong>Real-time</strong>: Highlights code as you type</li>
+            <li><strong>Preserves Alignment</strong>: Maintains perfect character positioning</li>
+        </ul>
+        <p><strong>Implementation:</strong> The integration uses OverType's <code>setCodeHighlighter</code> API to provide a custom highlighting function that calls Shiki's core tokenizer.</p>
+    </div>
+
+    <script type="module">
+        import { OverType } from "../dist/overtype.esm.js"
+        import { codeToHtml } from 'https://esm.sh/shiki@3.0.0';
+
+        window.codeToHtml = codeToHtml;
+
+        let highlighter = null;
+        let shikiEnabled = false;
+
+        // Initialize editor with sample content
+        const [editor] = new OverType('#editor', {
+            placeholder: 'Initialize Shiki to see syntax highlighting...',
+            value: `# Shiki.js Integration Demo
+
+Once Shiki is loaded, all code blocks will be highlighted with VS Code quality syntax highlighting.
+
+## JavaScript/TypeScript
+
+\`\`\`typescript
+interface User {
+    id: number;
+    name: string;
+    email: string;
+    active: boolean;
+}
+
+class UserService {
+    private users: User[] = [];
+
+    async createUser(userData: Omit<User, 'id'>): Promise<User> {
+        const newUser: User = {
+            id: Date.now(),
+            ...userData
+        };
+
+        this.users.push(newUser);
+        await this.saveToDatabase(newUser);
+
+        return newUser;
+    }
+
+    findUserByEmail(email: string): User | undefined {
+        return this.users.find(user =>
+            user.email.toLowerCase() === email.toLowerCase() && user.active
+        );
+    }
+
+    private async saveToDatabase(user: User): Promise<void> {
+        // Simulate async database operation
+        return new Promise(resolve => setTimeout(resolve, 100));
+    }
+}
+
+export { UserService, User };
+\`\`\`
+
+## Python
+
+\`\`\`python
+from typing import List, Optional, Dict, Any
+import asyncio
+import json
+
+class DataProcessor:
+    def __init__(self, config: Dict[str, Any]):
+        self.config = config
+        self.processed_count = 0
+
+    async def process_batch(self, items: List[Dict]) -> List[Dict]:
+        """
+        Process a batch of items asynchronously
+        """
+        tasks = [self.process_item(item) for item in items]
+        results = await asyncio.gather(*tasks, return_exceptions=True)
+
+        # Filter out exceptions
+        valid_results = [
+            result for result in results
+            if not isinstance(result, Exception)
+        ]
+
+        self.processed_count += len(valid_results)
+        return valid_results
+
+    async def process_item(self, item: Dict) -> Optional[Dict]:
+        # Simulate async processing
+        await asyncio.sleep(0.01)
+
+        if not item.get('valid', True):
+            raise ValueError(f"Invalid item: {item}")
+
+        return {
+            'id': item['id'],
+            'processed_data': item['data'].upper(),
+            'timestamp': time.time()
+        }
+
+# Usage example
+async def main():
+    processor = DataProcessor({'batch_size': 100})
+
+    sample_data = [
+        {'id': i, 'data': f'item_{i}', 'valid': True}
+        for i in range(50)
+    ]
+
+    results = await processor.process_batch(sample_data)
+    print(f"Processed {len(results)} items")
+
+if __name__ == "__main__":
+    asyncio.run(main())
+\`\`\`
+
+## Rust
+
+\`\`\`rust
+use std::collections::HashMap;
+use serde::{Deserialize, Serialize};
+use tokio::time::{sleep, Duration};
+
+#[derive(Debug, Clone, Serialize, Deserialize)]
+pub struct Config {
+    pub max_connections: usize,
+    pub timeout_ms: u64,
+    pub retry_attempts: u8,
+}
+
+impl Default for Config {
+    fn default() -> Self {
+        Self {
+            max_connections: 100,
+            timeout_ms: 5000,
+            retry_attempts: 3,
+        }
+    }
+}
+
+pub struct ConnectionPool {
+    config: Config,
+    active_connections: HashMap<String, Connection>,
+}
+
+impl ConnectionPool {
+    pub fn new(config: Config) -> Self {
+        Self {
+            config,
+            active_connections: HashMap::new(),
+        }
+    }
+
+    pub async fn get_connection(&mut self, endpoint: &str) -> Result<&Connection, PoolError> {
+        if let Some(conn) = self.active_connections.get(endpoint) {
+            if conn.is_healthy().await {
+                return Ok(conn);
+            }
+        }
+
+        let conn = self.create_connection(endpoint).await?;
+        self.active_connections.insert(endpoint.to_string(), conn);
+
+        Ok(self.active_connections.get(endpoint).unwrap())
+    }
+
+    async fn create_connection(&self, endpoint: &str) -> Result<Connection, PoolError> {
+        for attempt in 1..=self.config.retry_attempts {
+            match Connection::connect(endpoint, self.config.timeout_ms).await {
+                Ok(conn) => return Ok(conn),
+                Err(e) if attempt == self.config.retry_attempts => return Err(e.into()),
+                Err(_) => sleep(Duration::from_millis(100 * attempt as u64)).await,
+            }
+        }
+
+        unreachable!()
+    }
+}
+\`\`\``,
+            onChange: (value, instance) => {
+                // Debounce highlighting for performance
+                clearTimeout(window.highlightTimeout);
+                window.highlightTimeout = setTimeout(() => {
+                    if (shikiEnabled && highlighter) {
+                        instance.updatePreview();
+                    }
+                }, 150);
+            }
+        });
+
+        async function initializeShiki() {
+            const statusDiv = document.getElementById('status');
+
+            statusDiv.className = 'status loading';
+            statusDiv.textContent = 'Loading Shiki highlighter...';
+
+            try {
+                // Test Shiki 3.0 - no initialization needed
+                await window.codeToHtml('console.log("test")', {
+                    lang: 'javascript',
+                    theme: 'github-light'
+                });
+
+                statusDiv.className = 'status ready';
+                statusDiv.textContent = 'Shiki 3.0 loaded and syntax highlighting enabled!';
+
+                console.log('Shiki 3.0 loaded and ready');
+
+                // Automatically enable Shiki after successful initialization
+                enableShiki();
+
+            } catch (error) {
+                console.error('Failed to load Shiki:', error);
+                statusDiv.className = 'status error';
+                statusDiv.textContent = 'Failed to load Shiki: ' + error.message;
+            }
+        }
+
+        // Shiki 3.0 highlighter function
+        async function shikiHighlighter(code, language) {
+            try {
+                // Map common language aliases
+                const languageMap = {
+                    'js': 'javascript',
+                    'ts': 'typescript',
+                    'py': 'python',
+                    'rs': 'rust',
+                    'sh': 'bash',
+                    'yml': 'yaml'
+                };
+
+                const normalizedLang = languageMap[language] || language || 'text';
+
+                // Get current theme - could be made configurable
+                const theme = 'github-light'; // Could sync with OverType theme
+
+                // Highlight the code using Shiki 3.0 API
+                const highlighted = await window.codeToHtml(code, {
+                    lang: normalizedLang,
+                    theme: theme
+                });
+
+                // Extract just the inner HTML from the pre>code element
+                // Shiki returns full HTML, we just need the content
+                const match = highlighted.match(/<code[^>]*>([\s\S]*?)<\/code>/);
+                return match ? match[1] : code;
+
+            } catch (error) {
+                console.warn('Shiki highlighting error for language:', language, error);
+                return code; // Fallback to plain text
+            }
+        }
+
+        // Wrapper for synchronous usage (with caching)
+        const highlightCache = new Map();
+        
+        function syncShikiHighlighter(code, language) {
+            const cacheKey = `${language}:${code.substring(0, 100)}`;
+            
+            if (highlightCache.has(cacheKey)) {
+                return highlightCache.get(cacheKey);
+            }
+            
+            // Start async highlighting
+            shikiHighlighter(code, language).then(result => {
+                highlightCache.set(cacheKey, result);
+                // Force re-render if this was a cache miss
+                if (shikiEnabled) {
+                    setTimeout(() => {
+                        OverType.setCodeHighlighter(syncShikiHighlighter);
+                    }, 10);
+                }
+            });
+            
+            // Return unhighlighted code while async highlighting is in progress
+            return code;
+        }
+
+        function enableShiki() {
+            const statusDiv = document.getElementById('status');
+
+            // Enable Shiki
+            OverType.setCodeHighlighter(syncShikiHighlighter);
+            shikiEnabled = true;
+            statusDiv.className = 'status ready';
+            statusDiv.textContent = 'Shiki 3.0 highlighting enabled - code blocks will be highlighted as you type';
+
+            console.log('Shiki highlighting enabled');
+        }
+
+        function setAdvancedExample() {
+            const content = `# Advanced Development Examples
+
+## React with Hooks and Context
+
+\`\`\`typescript
+import React, { createContext, useContext, useReducer, useEffect } from 'react';
+import { WebSocketService } from './websocket-service';
+
+interface AppState {
+    user: User | null;
+    notifications: Notification[];
+    isConnected: boolean;
+    theme: 'light' | 'dark';
+}
+
+type AppAction =
+    | { type: 'SET_USER'; payload: User }
+    | { type: 'ADD_NOTIFICATION'; payload: Notification }
+    | { type: 'SET_CONNECTION_STATUS'; payload: boolean }
+    | { type: 'TOGGLE_THEME' };
+
+const AppContext = createContext<{
+    state: AppState;
+    dispatch: React.Dispatch<AppAction>;
+} | null>(null);
+
+function appReducer(state: AppState, action: AppAction): AppState {
+    switch (action.type) {
+        case 'SET_USER':
+            return { ...state, user: action.payload };
+        case 'ADD_NOTIFICATION':
+            return {
+                ...state,
+                notifications: [...state.notifications, action.payload]
+            };
+        case 'SET_CONNECTION_STATUS':
+            return { ...state, isConnected: action.payload };
+        case 'TOGGLE_THEME':
+            return {
+                ...state,
+                theme: state.theme === 'light' ? 'dark' : 'light'
+            };
+        default:
+            return state;
+    }
+}
+
+export const AppProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+    const [state, dispatch] = useReducer(appReducer, {
+        user: null,
+        notifications: [],
+        isConnected: false,
+        theme: 'light'
+    });
+
+    useEffect(() => {
+        const ws = new WebSocketService('ws://localhost:8080');
+
+        ws.on('connect', () => {
+            dispatch({ type: 'SET_CONNECTION_STATUS', payload: true });
+        });
+
+        ws.on('notification', (notification: Notification) => {
+            dispatch({ type: 'ADD_NOTIFICATION', payload: notification });
+        });
+
+        return () => ws.disconnect();
+    }, []);
+
+    return (
+        <AppContext.Provider value={{ state, dispatch }}>
+            {children}
+        </AppContext.Provider>
+    );
+};
+
+export const useApp = () => {
+    const context = useContext(AppContext);
+    if (!context) {
+        throw new Error('useApp must be used within AppProvider');
+    }
+    return context;
+};
+\`\`\`
+
+## Advanced Python: Machine Learning Pipeline
+
+\`\`\`python
+import pandas as pd
+import numpy as np
+from sklearn.ensemble import RandomForestClassifier, GradientBoostingClassifier
+from sklearn.model_selection import cross_val_score, GridSearchCV
+from sklearn.preprocessing import StandardScaler, LabelEncoder
+from sklearn.pipeline import Pipeline
+from sklearn.compose import ColumnTransformer
+import joblib
+from typing import Dict, List, Tuple, Optional
+import logging
+
+logging.basicConfig(level=logging.INFO)
+logger = logging.getLogger(__name__)
+
+class MLPipeline:
+    """
+    Advanced machine learning pipeline with preprocessing,
+    model selection, and hyperparameter tuning
+    """
+
+    def __init__(self, config: Dict):
+        self.config = config
+        self.preprocessor = None
+        self.model = None
+        self.best_model = None
+
+    def create_preprocessor(self, X: pd.DataFrame) -> ColumnTransformer:
+        """Create preprocessing pipeline based on column types"""
+        numeric_features = X.select_dtypes(include=[np.number]).columns.tolist()
+        categorical_features = X.select_dtypes(include=['object']).columns.tolist()
+
+        preprocessor = ColumnTransformer(
+            transformers=[
+                ('num', StandardScaler(), numeric_features),
+                ('cat', LabelEncoder(), categorical_features)
+            ],
+            remainder='passthrough'
+        )
+
+        logger.info(f"Created preprocessor with {len(numeric_features)} numeric and {len(categorical_features)} categorical features")
+        return preprocessor
+
+    def tune_hyperparameters(self, X: pd.DataFrame, y: pd.Series) -> Dict:
+        """Perform hyperparameter tuning using grid search"""
+
+        models = {
+            'random_forest': {
+                'model': RandomForestClassifier(random_state=42),
+                'params': {
+                    'model__n_estimators': [100, 200, 300],
+                    'model__max_depth': [10, 20, None],
+                    'model__min_samples_split': [2, 5, 10]
+                }
+            },
+            'gradient_boosting': {
+                'model': GradientBoostingClassifier(random_state=42),
+                'params': {
+                    'model__n_estimators': [100, 200],
+                    'model__learning_rate': [0.01, 0.1, 0.2],
+                    'model__max_depth': [3, 5, 7]
+                }
+            }
+        }
+
+        best_score = 0
+        best_model_name = None
+        best_params = None
+
+        for name, model_config in models.items():
+            logger.info(f"Tuning {name}...")
+
+            pipeline = Pipeline([
+                ('preprocessor', self.preprocessor),
+                ('model', model_config['model'])
+            ])
+
+            grid_search = GridSearchCV(
+                pipeline,
+                model_config['params'],
+                cv=5,
+                scoring='accuracy',
+                n_jobs=-1
+            )
+
+            grid_search.fit(X, y)
+
+            if grid_search.best_score_ > best_score:
+                best_score = grid_search.best_score_
+                best_model_name = name
+                best_params = grid_search.best_params_
+                self.best_model = grid_search.best_estimator_
+
+        logger.info(f"Best model: {best_model_name} with score: {best_score:.4f}")
+        return {
+            'model': best_model_name,
+            'score': best_score,
+            'params': best_params
+        }
+
+    def fit(self, X: pd.DataFrame, y: pd.Series) -> Dict:
+        """Fit the complete pipeline"""
+        logger.info("Starting ML pipeline training...")
+
+        # Create preprocessor
+        self.preprocessor = self.create_preprocessor(X)
+
+        # Tune hyperparameters
+        results = self.tune_hyperparameters(X, y)
+
+        # Final cross-validation
+        cv_scores = cross_val_score(self.best_model, X, y, cv=5, scoring='accuracy')
+        results['cv_mean'] = cv_scores.mean()
+        results['cv_std'] = cv_scores.std()
+
+        logger.info(f"Cross-validation: {cv_scores.mean():.4f} (+/- {cv_scores.std() * 2:.4f})")
+
+        return results
+
+    def save_model(self, filepath: str):
+        """Save the trained model"""
+        if self.best_model is None:
+            raise ValueError("No trained model to save")
+
+        joblib.dump(self.best_model, filepath)
+        logger.info(f"Model saved to {filepath}")
+
+# Usage example
+if __name__ == "__main__":
+    # Load data
+    data = pd.read_csv('training_data.csv')
+    X = data.drop('target', axis=1)
+    y = data['target']
+
+    # Initialize and train pipeline
+    config = {
+        'test_size': 0.2,
+        'random_state': 42,
+        'cv_folds': 5
+    }
+
+    pipeline = MLPipeline(config)
+    results = pipeline.fit(X, y)
+
+    print("Training Results:", results)
+    pipeline.save_model('best_model.joblib')
+\`\`\``;
+
+            editor.setValue(content);
+        }
+
+        function setWebExample() {
+            const content = `# Web Development Stack
+
+## Modern Express.js API with Middleware
+
+\`\`\`javascript
+const express = require('express');
+const cors = require('cors');
+const helmet = require('helmet');
+const rateLimit = require('express-rate-limit');
+const { body, validationResult } = require('express-validator');
+const jwt = require('jsonwebtoken');
+const bcrypt = require('bcryptjs');
+const mongoose = require('mongoose');
+
+const app = express();
+
+// Security middleware
+app.use(helmet());
+app.use(cors({
+    origin: process.env.ALLOWED_ORIGINS?.split(',') || 'http://localhost:3000',
+    credentials: true
+}));
+
+// Rate limiting
+const limiter = rateLimit({
+    windowMs: 15 * 60 * 1000, // 15 minutes
+    max: 100, // limit each IP to 100 requests per windowMs
+    message: 'Too many requests from this IP'
+});
+app.use('/api/', limiter);
+
+app.use(express.json({ limit: '10mb' }));
+app.use(express.urlencoded({ extended: true }));
+
+// Custom middleware for logging
+const requestLogger = (req, res, next) => {
+    const start = Date.now();
+
+    res.on('finish', () => {
+        const duration = Date.now() - start;
+        console.log(
+            \`\${new Date().toISOString()} - \${req.method} \${req.originalUrl} - \${res.statusCode} - \${duration}ms\`
+        );
+    });
+
+    next();
+};
+
+app.use(requestLogger);
+
+// Authentication middleware
+const authenticateToken = (req, res, next) => {
+    const authHeader = req.headers['authorization'];
+    const token = authHeader && authHeader.split(' ')[1];
+
+    if (!token) {
+        return res.status(401).json({ error: 'Access token required' });
+    }
+
+    jwt.verify(token, process.env.JWT_SECRET, (err, user) => {
+        if (err) {
+            return res.status(403).json({ error: 'Invalid or expired token' });
+        }
+        req.user = user;
+        next();
+    });
+};
+
+// Validation middleware
+const validateUser = [
+    body('email').isEmail().normalizeEmail(),
+    body('password').isLength({ min: 8 }).matches(/^(?=.*[a-z])(?=.*[A-Z])(?=.*\\d)/),
+    body('name').trim().isLength({ min: 2, max: 50 }),
+];
+
+const handleValidationErrors = (req, res, next) => {
+    const errors = validationResult(req);
+    if (!errors.isEmpty()) {
+        return res.status(400).json({
+            error: 'Validation failed',
+            details: errors.array()
+        });
+    }
+    next();
+};
+
+// Routes
+app.post('/api/auth/register', validateUser, handleValidationErrors, async (req, res) => {
+    try {
+        const { email, password, name } = req.body;
+
+        // Check if user already exists
+        const existingUser = await User.findOne({ email });
+        if (existingUser) {
+            return res.status(409).json({ error: 'User already exists' });
+        }
+
+        // Hash password
+        const saltRounds = 12;
+        const hashedPassword = await bcrypt.hash(password, saltRounds);
+
+        // Create user
+        const user = new User({
+            email,
+            password: hashedPassword,
+            name,
+            createdAt: new Date()
+        });
+
+        await user.save();
+
+        // Generate JWT
+        const token = jwt.sign(
+            { userId: user._id, email: user.email },
+            process.env.JWT_SECRET,
+            { expiresIn: '24h' }
+        );
+
+        res.status(201).json({
+            message: 'User created successfully',
+            token,
+            user: {
+                id: user._id,
+                email: user.email,
+                name: user.name
+            }
+        });
+
+    } catch (error) {
+        console.error('Registration error:', error);
+        res.status(500).json({ error: 'Internal server error' });
+    }
+});
+
+app.get('/api/users/profile', authenticateToken, async (req, res) => {
+    try {
+        const user = await User.findById(req.user.userId).select('-password');
+        if (!user) {
+            return res.status(404).json({ error: 'User not found' });
+        }
+
+        res.json({ user });
+    } catch (error) {
+        console.error('Profile fetch error:', error);
+        res.status(500).json({ error: 'Internal server error' });
+    }
+});
+
+// Error handling middleware
+app.use((err, req, res, next) => {
+    console.error('Unhandled error:', err);
+    res.status(500).json({
+        error: 'Something went wrong',
+        ...(process.env.NODE_ENV === 'development' && { details: err.message })
+    });
+});
+
+// 404 handler
+app.use('*', (req, res) => {
+    res.status(404).json({ error: 'Endpoint not found' });
+});
+
+const PORT = process.env.PORT || 3001;
+app.listen(PORT, () => {
+    console.log(\`Server running on port \${PORT}\`);
+});
+\`\`\`
+
+## Vue 3 Composition API Component
+
+\`\`\`vue
+<template>
+  <div class="user-dashboard">
+    <header class="dashboard-header">
+      <h1>Welcome, {{ user.name }}</h1>
+      <button @click="toggleTheme" class="theme-toggle">
+        {{ isDarkMode ? '☀️' : '🌙' }}
+      </button>
+    </header>
+
+    <div class="dashboard-content">
+      <div class="stats-grid">
+        <StatCard
+          v-for="stat in stats"
+          :key="stat.id"
+          :title="stat.title"
+          :value="stat.value"
+          :trend="stat.trend"
+          :loading="loading"
+        />
+      </div>
+
+      <div class="chart-section">
+        <h2>Activity Chart</h2>
+        <ChartComponent
+          :data="chartData"
+          :options="chartOptions"
+          @data-point-click="handleDataPointClick"
+        />
+      </div>
+
+      <div class="recent-activity">
+        <h2>Recent Activity</h2>
+        <TransitionGroup name="list" tag="ul">
+          <li
+            v-for="activity in recentActivities"
+            :key="activity.id"
+            class="activity-item"
+            @click="viewActivity(activity)"
+          >
+            <div class="activity-icon">{{ activity.icon }}</div>
+            <div class="activity-details">
+              <span class="activity-title">{{ activity.title }}</span>
+              <span class="activity-time">{{ formatTime(activity.timestamp) }}</span>
+            </div>
+          </li>
+        </TransitionGroup>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, watch } from 'vue';
+import { useRouter } from 'vue-router';
+import { useUserStore } from '@/stores/user';
+import { useTheme } from '@/composables/useTheme';
+import StatCard from '@/components/StatCard.vue';
+import ChartComponent from '@/components/Chart.vue';
+import type { Activity, Stats, ChartData } from '@/types';
+
+interface Props {
+  userId?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  userId: ''
+});
+
+const emit = defineEmits<{
+  activitySelected: [activity: Activity];
+  statsUpdated: [stats: Stats[]];
+}>();
+
+const router = useRouter();
+const userStore = useUserStore();
+const { isDarkMode, toggleTheme } = useTheme();
+
+// Reactive state
+const loading = ref(true);
+const stats = ref<Stats[]>([]);
+const chartData = ref<ChartData | null>(null);
+const recentActivities = ref<Activity[]>([]);
+
+// Computed properties
+const user = computed(() => userStore.currentUser);
+const chartOptions = computed(() => ({
+  responsive: true,
+  plugins: {
+    legend: {
+      position: 'top' as const,
+    },
+    title: {
+      display: true,
+      text: 'User Activity Over Time'
+    }
+  },
+  scales: {
+    y: {
+      beginAtZero: true,
+      grid: {
+        color: isDarkMode.value ? '#374151' : '#e5e7eb'
+      }
+    },
+    x: {
+      grid: {
+        color: isDarkMode.value ? '#374151' : '#e5e7eb'
+      }
+    }
+  }
+}));
+
+// Methods
+const fetchDashboardData = async () => {
+  try {
+    loading.value = true;
+
+    const [statsData, chartResponse, activitiesData] = await Promise.all([
+      fetch('/api/stats').then(res => res.json()),
+      fetch('/api/chart-data').then(res => res.json()),
+      fetch('/api/activities').then(res => res.json())
+    ]);
+
+    stats.value = statsData;
+    chartData.value = chartResponse;
+    recentActivities.value = activitiesData;
+
+    emit('statsUpdated', stats.value);
+  } catch (error) {
+    console.error('Failed to fetch dashboard data:', error);
+  } finally {
+    loading.value = false;
+  }
+};
+
+const handleDataPointClick = (dataPoint: any) => {
+  console.log('Data point clicked:', dataPoint);
+  // Handle chart interaction
+};
+
+const viewActivity = (activity: Activity) => {
+  emit('activitySelected', activity);
+  router.push(\`/activity/\${activity.id}\`);
+};
+
+const formatTime = (timestamp: string) => {
+  return new Date(timestamp).toLocaleString();
+};
+
+// Lifecycle hooks
+onMounted(() => {
+  fetchDashboardData();
+});
+
+// Watchers
+watch(() => props.userId, (newUserId) => {
+  if (newUserId) {
+    fetchDashboardData();
+  }
+}, { immediate: true });
+
+// Auto-refresh data every 5 minutes
+setInterval(fetchDashboardData, 5 * 60 * 1000);
+<\/script>
+
+<style scoped>
+.user-dashboard {
+  padding: 2rem;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.dashboard-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 2rem;
+}
+
+.theme-toggle {
+  background: none;
+  border: 1px solid var(--border-color);
+  border-radius: 50%;
+  width: 40px;
+  height: 40px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.stats-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 1rem;
+  margin-bottom: 2rem;
+}
+
+.chart-section, .recent-activity {
+  background: var(--card-background);
+  padding: 1.5rem;
+  border-radius: 8px;
+  margin-bottom: 2rem;
+}
+
+.activity-item {
+  display: flex;
+  align-items: center;
+  padding: 1rem;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+.activity-item:hover {
+  background: var(--hover-background);
+}
+
+.list-enter-active,
+.list-leave-active {
+  transition: all 0.3s ease;
+}
+
+.list-enter-from,
+.list-leave-to {
+  opacity: 0;
+  transform: translateX(30px);
+}
+</style>
+\`\`\``;
+
+            editor.setValue(content);
+        }
+
+        function setDataExample() {
+            const content = `# Data Science & Analytics
+
+## Advanced Pandas Data Processing
+
+\`\`\`python
+import pandas as pd
+import numpy as np
+import matplotlib.pyplot as plt
+import seaborn as sns
+from sklearn.preprocessing import StandardScaler, LabelEncoder
+from sklearn.model_selection import train_test_split
+from sklearn.ensemble import RandomForestRegressor
+from sklearn.metrics import mean_squared_error, r2_score
+import plotly.express as px
+import plotly.graph_objects as go
+from datetime import datetime, timedelta
+import warnings
+warnings.filterwarnings('ignore')
+
+class AdvancedDataAnalyzer:
+    """
+    Comprehensive data analysis toolkit with preprocessing,
+    visualization, and modeling capabilities
+    """
+
+    def __init__(self, data: pd.DataFrame):
+        self.data = data.copy()
+        self.processed_data = None
+        self.model = None
+        self.feature_importance = None
+
+    def exploratory_data_analysis(self) -> dict:
+        """Perform comprehensive EDA"""
+        print("🔍 Performing Exploratory Data Analysis...")
+
+        # Basic info
+        analysis_results = {
+            'shape': self.data.shape,
+            'dtypes': self.data.dtypes.to_dict(),
+            'missing_values': self.data.isnull().sum().to_dict(),
+            'numeric_summary': self.data.describe().to_dict(),
+            'categorical_summary': {}
+        }
+
+        # Categorical analysis
+        categorical_cols = self.data.select_dtypes(include=['object']).columns
+        for col in categorical_cols:
+            analysis_results['categorical_summary'][col] = {
+                'unique_count': self.data[col].nunique(),
+                'top_values': self.data[col].value_counts().head().to_dict()
+            }
+
+        # Correlation analysis
+        numeric_cols = self.data.select_dtypes(include=[np.number]).columns
+        if len(numeric_cols) > 1:
+            correlation_matrix = self.data[numeric_cols].corr()
+            analysis_results['high_correlations'] = self._find_high_correlations(correlation_matrix)
+
+        return analysis_results
+
+    def _find_high_correlations(self, corr_matrix: pd.DataFrame, threshold: float = 0.8) -> list:
+        """Find pairs of highly correlated features"""
+        high_corr_pairs = []
+        for i in range(len(corr_matrix.columns)):
+            for j in range(i+1, len(corr_matrix.columns)):
+                corr_value = abs(corr_matrix.iloc[i, j])
+                if corr_value > threshold:
+                    high_corr_pairs.append({
+                        'feature1': corr_matrix.columns[i],
+                        'feature2': corr_matrix.columns[j],
+                        'correlation': round(corr_value, 3)
+                    })
+        return high_corr_pairs
+
+    def advanced_preprocessing(self, target_column: str) -> pd.DataFrame:
+        """Advanced data preprocessing pipeline"""
+        print("🔧 Starting advanced preprocessing...")
+
+        df = self.data.copy()
+
+        # Handle missing values intelligently
+        numeric_cols = df.select_dtypes(include=[np.number]).columns
+        categorical_cols = df.select_dtypes(include=['object']).columns
+
+        # Numeric columns - use median for skewed, mean for normal
+        for col in numeric_cols:
+            if col != target_column and df[col].isnull().sum() > 0:
+                if abs(df[col].skew()) > 1:  # Highly skewed
+                    fill_value = df[col].median()
+                    print(f"Filling {col} with median: {fill_value}")
+                else:
+                    fill_value = df[col].mean()
+                    print(f"Filling {col} with mean: {fill_value}")
+                df[col].fillna(fill_value, inplace=True)
+
+        # Categorical columns - use mode or create 'Unknown' category
+        for col in categorical_cols:
+            if df[col].isnull().sum() > 0:
+                if df[col].nunique() < 10:  # Low cardinality
+                    fill_value = df[col].mode()[0]
+                    print(f"Filling {col} with mode: {fill_value}")
+                else:  # High cardinality
+                    fill_value = 'Unknown'
+                    print(f"Filling {col} with 'Unknown'")
+                df[col].fillna(fill_value, inplace=True)
+
+        # Feature engineering
+        df = self._create_engineered_features(df)
+
+        # Encode categorical variables
+        label_encoders = {}
+        for col in categorical_cols:
+            if col in df.columns:  # Check if column still exists
+                le = LabelEncoder()
+                df[f"{col}_encoded"] = le.fit_transform(df[col].astype(str))
+                label_encoders[col] = le
+                print(f"Encoded {col}: {le.classes_[:5]}...")  # Show first 5 classes
+
+        # Detect and handle outliers using IQR method
+        numeric_cols = df.select_dtypes(include=[np.number]).columns
+        for col in numeric_cols:
+            if col != target_column:
+                Q1 = df[col].quantile(0.25)
+                Q3 = df[col].quantile(0.75)
+                IQR = Q3 - Q1
+                lower_bound = Q1 - 1.5 * IQR
+                upper_bound = Q3 + 1.5 * IQR
+
+                outliers_count = len(df[(df[col] < lower_bound) | (df[col] > upper_bound)])
+                if outliers_count > 0:
+                    print(f"Found {outliers_count} outliers in {col}")
+                    # Cap outliers instead of removing them
+                    df[col] = np.clip(df[col], lower_bound, upper_bound)
+
+        self.processed_data = df
+        self.label_encoders = label_encoders
+        return df
+
+    def _create_engineered_features(self, df: pd.DataFrame) -> pd.DataFrame:
+        """Create engineered features based on domain knowledge"""
+        print("⚙️ Creating engineered features...")
+
+        # Date features if datetime columns exist
+        date_columns = df.select_dtypes(include=['datetime64']).columns
+        for col in date_columns:
+            df[f"{col}_year"] = df[col].dt.year
+            df[f"{col}_month"] = df[col].dt.month
+            df[f"{col}_day"] = df[col].dt.day
+            df[f"{col}_dayofweek"] = df[col].dt.dayofweek
+            df[f"{col}_quarter"] = df[col].dt.quarter
+            print(f"Created date features for {col}")
+
+        # Interaction features for numeric columns
+        numeric_cols = df.select_dtypes(include=[np.number]).columns
+        if len(numeric_cols) >= 2:
+            # Create polynomial features for top 3 numeric columns
+            for i, col1 in enumerate(numeric_cols[:3]):
+                for j, col2 in enumerate(numeric_cols[i+1:4], i+1):
+                    if col1 != col2:
+                        df[f"{col1}_{col2}_product"] = df[col1] * df[col2]
+                        df[f"{col1}_{col2}_ratio"] = np.where(
+                            df[col2] != 0, df[col1] / df[col2], 0
+                        )
+
+        # Binning continuous variables
+        for col in numeric_cols[:3]:  # Bin top 3 numeric columns
+            if df[col].nunique() > 10:  # Only if sufficient unique values
+                df[f"{col}_binned"] = pd.cut(df[col], bins=5, labels=False)
+                print(f"Created bins for {col}")
+
+        return df
+
+    def train_predictive_model(self, target_column: str, test_size: float = 0.2):
+        """Train a predictive model with feature selection"""
+        print("🤖 Training predictive model...")
+
+        if self.processed_data is None:
+            raise ValueError("Data must be preprocessed first")
+
+        df = self.processed_data.copy()
+
+        # Prepare features and target
+        feature_cols = df.select_dtypes(include=[np.number]).columns
+        feature_cols = [col for col in feature_cols if col != target_column]
+
+        X = df[feature_cols]
+        y = df[target_column]
+
+        # Split the data
+        X_train, X_test, y_train, y_test = train_test_split(
+            X, y, test_size=test_size, random_state=42
+        )
+
+        # Scale features
+        scaler = StandardScaler()
+        X_train_scaled = scaler.fit_transform(X_train)
+        X_test_scaled = scaler.transform(X_test)
+
+        # Train Random Forest model
+        self.model = RandomForestRegressor(
+            n_estimators=100,
+            max_depth=10,
+            min_samples_split=5,
+            min_samples_leaf=2,
+            random_state=42,
+            n_jobs=-1
+        )
+
+        self.model.fit(X_train_scaled, y_train)
+
+        # Make predictions
+        y_train_pred = self.model.predict(X_train_scaled)
+        y_test_pred = self.model.predict(X_test_scaled)
+
+        # Calculate metrics
+        train_rmse = np.sqrt(mean_squared_error(y_train, y_train_pred))
+        test_rmse = np.sqrt(mean_squared_error(y_test, y_test_pred))
+        train_r2 = r2_score(y_train, y_train_pred)
+        test_r2 = r2_score(y_test, y_test_pred)
+
+        # Feature importance
+        self.feature_importance = pd.DataFrame({
+            'feature': feature_cols,
+            'importance': self.model.feature_importances_
+        }).sort_values('importance', ascending=False)
+
+        results = {
+            'train_rmse': train_rmse,
+            'test_rmse': test_rmse,
+            'train_r2': train_r2,
+            'test_r2': test_r2,
+            'feature_importance': self.feature_importance.head(10),
+            'model': self.model,
+            'scaler': scaler
+        }
+
+        print(f"Model Performance:")
+        print(f"  Train RMSE: {train_rmse:.4f}")
+        print(f"  Test RMSE: {test_rmse:.4f}")
+        print(f"  Train R²: {train_r2:.4f}")
+        print(f"  Test R²: {test_r2:.4f}")
+
+        return results
+
+    def create_interactive_visualizations(self):
+        """Create interactive visualizations using Plotly"""
+        print("📊 Creating interactive visualizations...")
+
+        if self.processed_data is None:
+            raise ValueError("Data must be preprocessed first")
+
+        df = self.processed_data
+        numeric_cols = df.select_dtypes(include=[np.number]).columns[:5]
+
+        # Correlation heatmap
+        fig_corr = go.Figure(data=go.Heatmap(
+            z=df[numeric_cols].corr().values,
+            x=numeric_cols,
+            y=numeric_cols,
+            colorscale='RdYlBu',
+            text=df[numeric_cols].corr().round(2).values,
+            texttemplate="%{text}",
+            textfont={"size": 10},
+        ))
+
+        fig_corr.update_layout(
+            title="Feature Correlation Heatmap",
+            width=600, height=500
+        )
+
+        # Feature importance plot (if model is trained)
+        fig_importance = None
+        if self.feature_importance is not None:
+            fig_importance = px.bar(
+                self.feature_importance.head(10),
+                x='importance',
+                y='feature',
+                orientation='h',
+                title='Top 10 Feature Importance',
+                labels={'importance': 'Importance Score', 'feature': 'Features'}
+            )
+
+        # Distribution plots
+        fig_dist = go.Figure()
+        for col in numeric_cols[:3]:  # Show top 3 numeric columns
+            fig_dist.add_trace(go.Histogram(
+                x=df[col],
+                name=col,
+                opacity=0.7,
+                nbinsx=30
+            ))
+
+        fig_dist.update_layout(
+            title="Distribution of Numeric Features",
+            xaxis_title="Value",
+            yaxis_title="Frequency",
+            barmode='overlay'
+        )
+
+        return {
+            'correlation_heatmap': fig_corr,
+            'feature_importance': fig_importance,
+            'distributions': fig_dist
+        }
+
+# Usage Example
+if __name__ == "__main__":
+    # Load sample dataset (replace with your data)
+    # For demonstration, creating synthetic data
+    np.random.seed(42)
+    n_samples = 1000
+
+    sample_data = pd.DataFrame({
+        'feature_1': np.random.normal(100, 15, n_samples),
+        'feature_2': np.random.exponential(2, n_samples),
+        'feature_3': np.random.randint(1, 100, n_samples),
+        'category_1': np.random.choice(['A', 'B', 'C', 'D'], n_samples),
+        'category_2': np.random.choice(['X', 'Y', 'Z'], n_samples),
+        'date_column': pd.date_range('2020-01-01', periods=n_samples, freq='D'),
+        'target': np.random.normal(50, 10, n_samples)
+    })
+
+    # Add some missing values for demonstration
+    sample_data.loc[np.random.choice(sample_data.index, 50, replace=False), 'feature_1'] = np.nan
+    sample_data.loc[np.random.choice(sample_data.index, 30, replace=False), 'category_1'] = np.nan
+
+    # Initialize analyzer
+    analyzer = AdvancedDataAnalyzer(sample_data)
+
+    # Perform EDA
+    eda_results = analyzer.exploratory_data_analysis()
+    print("EDA Results:", eda_results['shape'])
+
+    # Preprocess data
+    processed_df = analyzer.advanced_preprocessing('target')
+
+    # Train model
+    model_results = analyzer.train_predictive_model('target')
+
+    # Create visualizations
+    plots = analyzer.create_interactive_visualizations()
+
+    print("\\n🎉 Analysis complete! Model trained with R² score:",
+          f"{model_results['test_r2']:.4f}")
+\`\`\`
+
+## SQL Advanced Analytics
+
+\`\`\`sql
+-- Advanced SQL Analytics: Customer Segmentation and Cohort Analysis
+WITH customer_metrics AS (
+    -- Calculate comprehensive customer metrics
+    SELECT
+        c.customer_id,
+        c.first_name,
+        c.last_name,
+        c.email,
+        c.registration_date,
+
+        -- Recency (days since last order)
+        COALESCE(
+            DATE_DIFF(CURRENT_DATE, MAX(o.order_date), DAY),
+            999
+        ) AS recency_days,
+
+        -- Frequency (number of orders)
+        COUNT(DISTINCT o.order_id) AS order_frequency,
+
+        -- Monetary (total spend)
+        COALESCE(SUM(oi.quantity * oi.unit_price), 0) AS total_spend,
+
+        -- Average order value
+        COALESCE(
+            SUM(oi.quantity * oi.unit_price) / NULLIF(COUNT(DISTINCT o.order_id), 0),
+            0
+        ) AS avg_order_value,
+
+        -- Customer lifetime (days since registration)
+        DATE_DIFF(CURRENT_DATE, c.registration_date, DAY) AS customer_lifetime_days,
+
+        -- Favorite category
+        (
+            SELECT pc.category_name
+            FROM order_items oi2
+            JOIN orders o2 ON oi2.order_id = o2.order_id
+            JOIN products p ON oi2.product_id = p.product_id
+            JOIN product_categories pc ON p.category_id = pc.category_id
+            WHERE o2.customer_id = c.customer_id
+            GROUP BY pc.category_name
+            ORDER BY SUM(oi2.quantity) DESC
+            LIMIT 1
+        ) AS favorite_category,
+
+        -- Seasonal purchase pattern
+        CASE
+            WHEN EXTRACT(MONTH FROM MAX(o.order_date)) IN (12, 1, 2) THEN 'Winter'
+            WHEN EXTRACT(MONTH FROM MAX(o.order_date)) IN (3, 4, 5) THEN 'Spring'
+            WHEN EXTRACT(MONTH FROM MAX(o.order_date)) IN (6, 7, 8) THEN 'Summer'
+            ELSE 'Fall'
+        END AS last_purchase_season
+
+    FROM customers c
+    LEFT JOIN orders o ON c.customer_id = o.customer_id
+    LEFT JOIN order_items oi ON o.order_id = oi.order_id
+    WHERE c.registration_date >= '2020-01-01'  -- Focus on recent customers
+    GROUP BY c.customer_id, c.first_name, c.last_name, c.email, c.registration_date
+),
+
+rfm_scores AS (
+    -- Calculate RFM scores using quartiles
+    SELECT *,
+        -- Recency Score (lower days = higher score)
+        CASE
+            WHEN recency_days <= 30 THEN 4
+            WHEN recency_days <= 90 THEN 3
+            WHEN recency_days <= 180 THEN 2
+            ELSE 1
+        END AS recency_score,
+
+        -- Frequency Score
+        CASE
+            WHEN order_frequency >= 10 THEN 4
+            WHEN order_frequency >= 5 THEN 3
+            WHEN order_frequency >= 2 THEN 2
+            ELSE 1
+        END AS frequency_score,
+
+        -- Monetary Score
+        CASE
+            WHEN total_spend >= 1000 THEN 4
+            WHEN total_spend >= 500 THEN 3
+            WHEN total_spend >= 100 THEN 2
+            ELSE 1
+        END AS monetary_score
+
+    FROM customer_metrics
+),
+
+customer_segments AS (
+    -- Define customer segments based on RFM scores
+    SELECT *,
+        CASE
+            WHEN recency_score = 4 AND frequency_score >= 3 AND monetary_score >= 3
+                THEN 'Champions'
+            WHEN recency_score >= 3 AND frequency_score >= 2 AND monetary_score >= 2
+                THEN 'Loyal Customers'
+            WHEN recency_score >= 3 AND frequency_score <= 2 AND monetary_score <= 2
+                THEN 'Potential Loyalists'
+            WHEN recency_score >= 2 AND frequency_score <= 2 AND monetary_score >= 3
+                THEN 'Big Spenders'
+            WHEN recency_score >= 3 AND frequency_score <= 1
+                THEN 'New Customers'
+            WHEN recency_score = 2 AND frequency_score >= 2
+                THEN 'At Risk'
+            WHEN recency_score = 1 AND frequency_score >= 3 AND monetary_score >= 3
+                THEN 'Cannot Lose Them'
+            WHEN recency_score = 1 AND frequency_score >= 2
+                THEN 'Hibernating'
+            ELSE 'Lost'
+        END AS customer_segment,
+
+        -- Customer value tier
+        CASE
+            WHEN total_spend >= 1000 THEN 'High Value'
+            WHEN total_spend >= 250 THEN 'Medium Value'
+            ELSE 'Low Value'
+        END AS value_tier
+
+    FROM rfm_scores
+),
+
+cohort_analysis AS (
+    -- Monthly cohort analysis
+    SELECT
+        DATE_TRUNC(c.registration_date, MONTH) AS cohort_month,
+        DATE_DIFF(
+            DATE_TRUNC(o.order_date, MONTH),
+            DATE_TRUNC(c.registration_date, MONTH),
+            MONTH
+        ) AS period_number,
+        COUNT(DISTINCT c.customer_id) AS customers_in_period
+
+    FROM customers c
+    JOIN orders o ON c.customer_id = o.customer_id
+    WHERE c.registration_date >= '2022-01-01'
+    GROUP BY cohort_month, period_number
+),
+
+cohort_sizes AS (
+    -- Get initial cohort sizes
+    SELECT
+        cohort_month,
+        COUNT(DISTINCT customer_id) AS cohort_size
+    FROM customers
+    WHERE registration_date >= '2022-01-01'
+    GROUP BY DATE_TRUNC(registration_date, MONTH)
+),
+
+retention_rates AS (
+    -- Calculate retention rates
+    SELECT
+        ca.cohort_month,
+        ca.period_number,
+        ca.customers_in_period,
+        cs.cohort_size,
+        ROUND(
+            100.0 * ca.customers_in_period / cs.cohort_size, 2
+        ) AS retention_rate
+    FROM cohort_analysis ca
+    JOIN cohort_sizes cs ON ca.cohort_month = cs.cohort_month
+)
+
+-- Final comprehensive analysis
+SELECT
+    '=== CUSTOMER SEGMENTATION SUMMARY ===' AS analysis_type,
+    customer_segment,
+    COUNT(*) AS segment_size,
+    ROUND(AVG(total_spend), 2) AS avg_spend,
+    ROUND(AVG(order_frequency), 1) AS avg_orders,
+    ROUND(AVG(recency_days), 1) AS avg_recency_days,
+    ROUND(AVG(customer_lifetime_days), 0) AS avg_lifetime_days,
+
+    -- Recommended actions
+    CASE customer_segment
+        WHEN 'Champions' THEN 'Reward them. They can become early adopters for new products.'
+        WHEN 'Loyal Customers' THEN 'Upsell higher value products. Ask for reviews.'
+        WHEN 'Potential Loyalists' THEN 'Offer membership or loyalty program.'
+        WHEN 'New Customers' THEN 'Provide on-boarding support, special offers.'
+        WHEN 'At Risk' THEN 'Send personalized emails, offer discounts.'
+        WHEN 'Cannot Lose Them' THEN 'Win them back via renewals, helpful products.'
+        WHEN 'Hibernating' THEN 'Offer other products and special discounts.'
+        ELSE 'Revive interest with reach out campaign, ignore otherwise.'
+    END AS recommended_action
+
+FROM customer_segments
+GROUP BY customer_segment
+ORDER BY segment_size DESC
+
+UNION ALL
+
+-- Category performance analysis
+SELECT
+    '=== TOP CATEGORIES BY SEGMENT ===' AS analysis_type,
+    CONCAT(customer_segment, ' - ', favorite_category) AS segment_category,
+    COUNT(*) AS customers,
+    NULL AS avg_spend,
+    NULL AS avg_orders,
+    NULL AS avg_recency_days,
+    NULL AS avg_lifetime_days,
+    'Focus marketing efforts on these category preferences' AS recommended_action
+FROM customer_segments
+WHERE favorite_category IS NOT NULL
+GROUP BY customer_segment, favorite_category
+HAVING COUNT(*) >= 10  -- Only show significant patterns
+ORDER BY customers DESC
+LIMIT 20;
+
+-- Separate query for retention analysis visualization
+SELECT
+    cohort_month,
+    period_number,
+    retention_rate,
+
+    -- Create a readable period label
+    CASE period_number
+        WHEN 0 THEN 'Month 0 (Registration)'
+        WHEN 1 THEN 'Month 1'
+        WHEN 2 THEN 'Month 2'
+        WHEN 3 THEN 'Month 3'
+        WHEN 6 THEN 'Month 6'
+        WHEN 12 THEN 'Month 12'
+        ELSE CONCAT('Month ', period_number)
+    END AS period_label,
+
+    -- Retention health indicator
+    CASE
+        WHEN period_number = 1 AND retention_rate >= 50 THEN 'Excellent'
+        WHEN period_number = 1 AND retention_rate >= 30 THEN 'Good'
+        WHEN period_number = 1 AND retention_rate >= 20 THEN 'Average'
+        WHEN period_number = 3 AND retention_rate >= 25 THEN 'Good'
+        WHEN period_number = 6 AND retention_rate >= 15 THEN 'Good'
+        ELSE 'Needs Attention'
+    END AS retention_health
+
+FROM retention_rates
+WHERE period_number IN (0, 1, 2, 3, 6, 12)  -- Focus on key periods
+ORDER BY cohort_month, period_number;
+\`\`\``;
+
+            editor.setValue(content);
+        }
+
+        // Expose functions to global scope for onclick handlers
+        window.setAdvancedExample = setAdvancedExample;
+        window.setWebExample = setWebExample;
+        window.setDataExample = setDataExample;
+
+        console.log('Shiki integration example loaded');
+        
+        // Automatically initialize Shiki when the page loads
+        initializeShiki();
+    </script>
+</body>
+</html>
diff --git a/src/link-tooltip.js b/src/link-tooltip.js
index 44f66dd..4deb92b 100644
--- a/src/link-tooltip.js
+++ b/src/link-tooltip.js
@@ -28,8 +28,7 @@ export class LinkTooltip {
     // Create tooltip element
     this.createTooltip();
     
-    // Listen for cursor position changes
-    this.editor.textarea.addEventListener('selectionchange', () => this.checkCursorPosition());
+    // Note: selectionchange is handled at document level in global listeners
     this.editor.textarea.addEventListener('keyup', (e) => {
       if (e.key.includes('Arrow') || e.key === 'Home' || e.key === 'End') {
         this.checkCursorPosition();
diff --git a/src/overtype.d.ts b/src/overtype.d.ts
index c733d7b..426e6f6 100644
--- a/src/overtype.d.ts
+++ b/src/overtype.d.ts
@@ -2,6 +2,8 @@
 // Project: https://github.com/panphora/overtype
 // Definitions generated from JSDoc comments and implementation
 
+/// <reference lib="es2015" />
+
 export interface Theme {
   name: string;
   colors: {
diff --git a/src/overtype.js b/src/overtype.js
index 1504daa..f6ff00a 100644
--- a/src/overtype.js
+++ b/src/overtype.js
@@ -30,7 +30,7 @@ class OverType {
     constructor(target, options = {}) {
       // Convert target to array of elements
       let elements;
-      
+
       if (typeof target === 'string') {
         elements = document.querySelectorAll(target);
         if (elements.length === 0) {
@@ -73,10 +73,10 @@ class OverType {
      */
     _init(element, options = {}) {
       this.element = element;
-      
+
       // Store the original theme option before merging
       this.instanceTheme = options.theme || null;
-      
+
       this.options = this._mergeOptions(options);
       this.instanceId = ++OverType.instanceCount;
       this.initialized = false;
@@ -98,7 +98,7 @@ class OverType {
 
       // Setup shortcuts manager
       this.shortcuts = new ShortcutsManager(this);
-      
+
       // Setup link tooltip
       this.linkTooltip = new LinkTooltip(this);
 
@@ -107,11 +107,8 @@ class OverType {
         const toolbarButtons = typeof this.options.toolbar === 'object' ? this.options.toolbar.buttons : null;
         this.toolbar = new Toolbar(this, toolbarButtons);
         this.toolbar.create();
-        
-        // Update toolbar states on selection change
-        this.textarea.addEventListener('selectionchange', () => {
-          this.toolbar.updateButtonStates();
-        });
+
+        // Note: selectionchange only works on document level, handled in global listeners
         this.textarea.addEventListener('input', () => {
           this.toolbar.updateButtonStates();
         });
@@ -138,17 +135,17 @@ class OverType {
         /* System-first, guaranteed monospaced; avoids Android 'ui-monospace' pitfalls */
         fontFamily: '"SF Mono", SFMono-Regular, Menlo, Monaco, "Cascadia Code", Consolas, "Roboto Mono", "Noto Sans Mono", "Droid Sans Mono", "Ubuntu Mono", "DejaVu Sans Mono", "Liberation Mono", "Courier New", Courier, monospace',
         padding: '16px',
-        
+
         // Mobile styles
         mobile: {
           fontSize: '16px',  // Prevent zoom on iOS
           padding: '12px',
           lineHeight: 1.5
         },
-        
+
         // Native textarea properties
         textareaProps: {},
-        
+
         // Behavior
         autofocus: false,
         autoResize: false,  // Auto-expand height with content
@@ -156,22 +153,23 @@ class OverType {
         maxHeight: null,    // Maximum height for autoResize mode (null = unlimited)
         placeholder: 'Start typing...',
         value: '',
-        
+
         // Callbacks
         onChange: null,
         onKeydown: null,
-        
+
         // Features
         showActiveLineRaw: false,
         showStats: false,
         toolbar: false,
         statsFormatter: null,
-        smartLists: true  // Enable smart list continuation
+        smartLists: true,  // Enable smart list continuation
+        codeHighlighter: null  // Per-instance code highlighter
       };
-      
+
       // Remove theme and colors from options - these are now global
       const { theme, colors, ...cleanOptions } = options;
-      
+
       return {
         ...defaults,
         ...cleanOptions
@@ -199,7 +197,7 @@ class OverType {
         if (themeName) {
           this.container.setAttribute('data-theme', themeName);
         }
-        
+
         // If using instance theme, apply CSS variables to container
         if (this.instanceTheme) {
           const themeObj = typeof this.instanceTheme === 'string' ? getTheme(this.instanceTheme) : this.instanceTheme;
@@ -211,7 +209,7 @@ class OverType {
         wrapper.parentNode.insertBefore(this.container, wrapper);
         this.container.appendChild(wrapper);
       }
-      
+
       if (!this.wrapper) {
         // No valid structure found
         if (container) container.remove();
@@ -219,7 +217,7 @@ class OverType {
         this._buildFromScratch();
         return;
       }
-      
+
       this.textarea = this.wrapper.querySelector('.overtype-input');
       this.preview = this.wrapper.querySelector('.overtype-preview');
 
@@ -232,7 +230,7 @@ class OverType {
 
       // Store reference on wrapper
       this.wrapper._instance = this;
-      
+
       // Apply instance-specific styles via CSS custom properties
       if (this.options.fontSize) {
         this.wrapper.style.setProperty('--instance-font-size', this.options.fontSize);
@@ -295,14 +293,14 @@ class OverType {
       // Create container that will hold toolbar and editor
       this.container = document.createElement('div');
       this.container.className = 'overtype-container';
-      
+
       // Set theme on container - use instance theme if provided
       const themeToUse = this.instanceTheme || OverType.currentTheme || solar;
       const themeName = typeof themeToUse === 'string' ? themeToUse : themeToUse.name;
       if (themeName) {
         this.container.setAttribute('data-theme', themeName);
       }
-      
+
       // If using instance theme, apply CSS variables to container
       if (this.instanceTheme) {
         const themeObj = typeof this.instanceTheme === 'string' ? getTheme(this.instanceTheme) : this.instanceTheme;
@@ -311,12 +309,12 @@ class OverType {
           this.container.style.cssText += cssVars;
         }
       }
-      
+
       // Create wrapper for editor
       this.wrapper = document.createElement('div');
       this.wrapper.className = 'overtype-wrapper';
-      
-      
+
+
       // Apply instance-specific styles via CSS custom properties
       if (this.options.fontSize) {
         this.wrapper.style.setProperty('--instance-font-size', this.options.fontSize);
@@ -327,7 +325,7 @@ class OverType {
       if (this.options.padding) {
         this.wrapper.style.setProperty('--instance-padding', this.options.padding);
       }
-      
+
       this.wrapper._instance = this;
 
       // Create textarea
@@ -335,7 +333,7 @@ class OverType {
       this.textarea.className = 'overtype-input';
       this.textarea.placeholder = this.options.placeholder;
       this._configureTextarea();
-      
+
       // Apply any native textarea properties
       if (this.options.textareaProps) {
         Object.entries(this.options.textareaProps).forEach(([key, value]) => {
@@ -357,12 +355,12 @@ class OverType {
       // Assemble DOM
       this.wrapper.appendChild(this.textarea);
       this.wrapper.appendChild(this.preview);
-      
+
       // No need to prevent link clicks - pointer-events handles this
-      
+
       // Add wrapper to container first
       this.container.appendChild(this.wrapper);
-      
+
       // Add stats bar at the end (bottom) if enabled
       if (this.options.showStats) {
         this.statsBar = document.createElement('div');
@@ -370,10 +368,10 @@ class OverType {
         this.container.appendChild(this.statsBar);
         this._updateStats();
       }
-      
+
       // Add container to element
       this.element.appendChild(this.container);
-      
+
       // Debug logging
       if (window.location.pathname.includes('demo.html')) {
         console.log('_createDOM completed:', {
@@ -384,14 +382,14 @@ class OverType {
           hasToolbar: this.options.toolbar
         });
       }
-      
+
       // Setup auto-resize if enabled
       if (this.options.autoResize) {
         this._setupAutoResize();
       } else {
         // Ensure auto-resize class is removed if not using auto-resize
         this.container.classList.remove('overtype-auto-resize');
-        
+
         if (window.location.pathname.includes('demo.html')) {
           console.log('Removed auto-resize class from:', this.element.id);
         }
@@ -421,7 +419,7 @@ class OverType {
       if (this.options.autofocus) {
         this.textarea.focus();
       }
-      
+
       // Setup or remove auto-resize
       if (this.options.autoResize) {
         if (!this.container.classList.contains('overtype-auto-resize')) {
@@ -443,21 +441,21 @@ class OverType {
       const text = this.textarea.value;
       const cursorPos = this.textarea.selectionStart;
       const activeLine = this._getCurrentLine(text, cursorPos);
-      
+
       // Parse markdown
-      const html = MarkdownParser.parse(text, activeLine, this.options.showActiveLineRaw);
+      const html = MarkdownParser.parse(text, activeLine, this.options.showActiveLineRaw, this.options.codeHighlighter);
       this.preview.innerHTML = html || '<span style="color: #808080;">Start typing...</span>';
-      
+
       // Apply code block backgrounds
       this._applyCodeBlockBackgrounds();
-      
+
       // Links always have real hrefs now - no need to update them
-      
+
       // Update stats if enabled
       if (this.options.showStats && this.statsBar) {
         this._updateStats();
       }
-      
+
       // Trigger onChange callback
       if (this.options.onChange && this.initialized) {
         this.options.onChange(text, this);
@@ -471,26 +469,26 @@ class OverType {
     _applyCodeBlockBackgrounds() {
       // Find all code fence elements
       const codeFences = this.preview.querySelectorAll('.code-fence');
-      
+
       // Process pairs of code fences
       for (let i = 0; i < codeFences.length - 1; i += 2) {
         const openFence = codeFences[i];
         const closeFence = codeFences[i + 1];
-        
+
         // Get parent divs
         const openParent = openFence.parentElement;
         const closeParent = closeFence.parentElement;
-        
+
         if (!openParent || !closeParent) continue;
-        
+
         // Make fences display: block
         openFence.style.display = 'block';
         closeFence.style.display = 'block';
-        
+
         // Apply class to parent divs
         openParent.classList.add('code-block-line');
         closeParent.classList.add('code-block-line');
-        
+
         // With the new structure, there's a <pre> block between fences, not DIVs
         // We don't need to process anything between the fences anymore
         // The <pre><code> structure already handles the content correctly
@@ -522,21 +520,21 @@ class OverType {
       // Handle Tab key to prevent focus loss and insert spaces
       if (event.key === 'Tab') {
         event.preventDefault();
-        
+
         const start = this.textarea.selectionStart;
         const end = this.textarea.selectionEnd;
         const value = this.textarea.value;
-        
+
         // If there's a selection, indent/outdent based on shift key
         if (start !== end && event.shiftKey) {
           // Outdent: remove 2 spaces from start of each selected line
           const before = value.substring(0, start);
           const selection = value.substring(start, end);
           const after = value.substring(end);
-          
+
           const lines = selection.split('\n');
           const outdented = lines.map(line => line.replace(/^  /, '')).join('\n');
-          
+
           // Try to use execCommand first to preserve undo history
           if (document.execCommand) {
             // Select the text that needs to be replaced
@@ -553,10 +551,10 @@ class OverType {
           const before = value.substring(0, start);
           const selection = value.substring(start, end);
           const after = value.substring(end);
-          
+
           const lines = selection.split('\n');
           const indented = lines.map(line => '  ' + line).join('\n');
-          
+
           // Try to use execCommand first to preserve undo history
           if (document.execCommand) {
             // Select the text that needs to be replaced
@@ -579,12 +577,12 @@ class OverType {
             this.textarea.selectionStart = this.textarea.selectionEnd = start + 2;
           }
         }
-        
+
         // Trigger input event to update preview
         this.textarea.dispatchEvent(new Event('input', { bubbles: true }));
         return;
       }
-      
+
       // Handle Enter key for smart list continuation
       if (event.key === 'Enter' && !event.shiftKey && !event.metaKey && !event.ctrlKey && this.options.smartLists) {
         if (this.handleSmartListContinuation()) {
@@ -592,10 +590,10 @@ class OverType {
           return;
         }
       }
-      
+
       // Let shortcuts manager handle other keys
       const handled = this.shortcuts.handleKeydown(event);
-      
+
       // Call user callback if provided
       if (!handled && this.options.onKeydown) {
         this.options.onKeydown(event, this);
@@ -610,15 +608,15 @@ class OverType {
       const textarea = this.textarea;
       const cursorPos = textarea.selectionStart;
       const context = MarkdownParser.getListContext(textarea.value, cursorPos);
-      
+
       if (!context || !context.inList) return false;
-      
+
       // Handle empty list item (exit list)
       if (context.content.trim() === '' && cursorPos >= context.markerEndPos) {
         this.deleteListMarker(context);
         return true;
       }
-      
+
       // Handle text splitting if cursor is in middle of content
       if (cursorPos > context.markerEndPos && cursorPos < context.lineEnd) {
         this.splitListItem(context, cursorPos);
@@ -626,15 +624,15 @@ class OverType {
         // Just add new item after current line
         this.insertNewListItem(context);
       }
-      
+
       // Handle numbered list renumbering
       if (context.listType === 'numbered') {
         this.scheduleNumberedListUpdate();
       }
-      
+
       return true;
     }
-    
+
     /**
      * Delete list marker and exit list
      * @private
@@ -643,11 +641,11 @@ class OverType {
       // Select from line start to marker end
       this.textarea.setSelectionRange(context.lineStart, context.markerEndPos);
       document.execCommand('delete');
-      
+
       // Trigger input event
       this.textarea.dispatchEvent(new Event('input', { bubbles: true }));
     }
-    
+
     /**
      * Insert new list item
      * @private
@@ -655,11 +653,11 @@ class OverType {
     insertNewListItem(context) {
       const newItem = MarkdownParser.createNewListItem(context);
       document.execCommand('insertText', false, '\n' + newItem);
-      
+
       // Trigger input event
       this.textarea.dispatchEvent(new Event('input', { bubbles: true }));
     }
-    
+
     /**
      * Split list item at cursor position
      * @private
@@ -667,23 +665,23 @@ class OverType {
     splitListItem(context, cursorPos) {
       // Get text after cursor
       const textAfterCursor = context.content.substring(cursorPos - context.markerEndPos);
-      
+
       // Delete text after cursor
       this.textarea.setSelectionRange(cursorPos, context.lineEnd);
       document.execCommand('delete');
-      
+
       // Insert new list item with remaining text
       const newItem = MarkdownParser.createNewListItem(context);
       document.execCommand('insertText', false, '\n' + newItem + textAfterCursor);
-      
+
       // Position cursor after new list marker
       const newCursorPos = this.textarea.selectionStart - textAfterCursor.length;
       this.textarea.setSelectionRange(newCursorPos, newCursorPos);
-      
+
       // Trigger input event
       this.textarea.dispatchEvent(new Event('input', { bubbles: true }));
     }
-    
+
     /**
      * Schedule numbered list renumbering
      * @private
@@ -693,13 +691,13 @@ class OverType {
       if (this.numberUpdateTimeout) {
         clearTimeout(this.numberUpdateTimeout);
       }
-      
+
       // Schedule update after current input cycle
       this.numberUpdateTimeout = setTimeout(() => {
         this.updateNumberedLists();
       }, 10);
     }
-    
+
     /**
      * Update/renumber all numbered lists
      * @private
@@ -707,16 +705,16 @@ class OverType {
     updateNumberedLists() {
       const value = this.textarea.value;
       const cursorPos = this.textarea.selectionStart;
-      
+
       const newValue = MarkdownParser.renumberLists(value);
-      
+
       if (newValue !== value) {
         // Calculate cursor offset
         let offset = 0;
         const oldLines = value.split('\n');
         const newLines = newValue.split('\n');
         let charCount = 0;
-        
+
         for (let i = 0; i < oldLines.length && charCount < cursorPos; i++) {
           if (oldLines[i] !== newLines[i]) {
             const diff = newLines[i].length - oldLines[i].length;
@@ -726,12 +724,12 @@ class OverType {
           }
           charCount += oldLines[i].length + 1; // +1 for newline
         }
-        
+
         // Update textarea
         this.textarea.value = newValue;
         const newCursorPos = cursorPos + offset;
         this.textarea.setSelectionRange(newCursorPos, newCursorPos);
-        
+
         // Trigger update
         this.textarea.dispatchEvent(new Event('input', { bubbles: true }));
       }
@@ -762,7 +760,7 @@ class OverType {
     setValue(value) {
       this.textarea.value = value;
       this.updatePreview();
-      
+
       // Update height if auto-resize is enabled
       if (this.options.autoResize) {
         this._updateAutoHeight();
@@ -778,7 +776,7 @@ class OverType {
      */
     getRenderedHTML(options = {}) {
       const markdown = this.getValue();
-      let html = MarkdownParser.parse(markdown);
+      let html = MarkdownParser.parse(markdown, -1, false, this.options.codeHighlighter);
       
       if (options.cleanHTML) {
         // Remove all syntax marker spans for clean HTML export
@@ -788,7 +786,7 @@ class OverType {
         // Clean up empty class attributes
         html = html.replace(/\sclass=""/g, '');
       }
-      
+
       return html;
     }
 
@@ -842,25 +840,34 @@ class OverType {
       this.updatePreview();
     }
 
+    /**
+     * Set instance-specific code highlighter
+     * @param {Function|null} highlighter - Function that takes (code, language) and returns highlighted HTML
+     */
+    setCodeHighlighter(highlighter) {
+      this.options.codeHighlighter = highlighter;
+      this.updatePreview();
+    }
+
     /**
      * Update stats bar
      * @private
      */
     _updateStats() {
       if (!this.statsBar) return;
-      
+
       const value = this.textarea.value;
       const lines = value.split('\n');
       const chars = value.length;
       const words = value.split(/\s+/).filter(w => w.length > 0).length;
-      
+
       // Calculate line and column
       const selectionStart = this.textarea.selectionStart;
       const beforeCursor = value.substring(0, selectionStart);
       const linesBeforeCursor = beforeCursor.split('\n');
       const currentLine = linesBeforeCursor.length;
       const currentColumn = linesBeforeCursor[linesBeforeCursor.length - 1].length + 1;
-      
+
       // Use custom formatter if provided
       if (this.options.statsFormatter) {
         this.statsBar.innerHTML = this.options.statsFormatter({
@@ -881,7 +888,7 @@ class OverType {
         `;
       }
     }
-    
+
     /**
      * Setup auto-resize functionality
      * @private
@@ -889,51 +896,51 @@ class OverType {
     _setupAutoResize() {
       // Add auto-resize class for styling
       this.container.classList.add('overtype-auto-resize');
-      
+
       // Store previous height for comparison
       this.previousHeight = null;
-      
+
       // Initial height update
       this._updateAutoHeight();
-      
+
       // Listen for input events
       this.textarea.addEventListener('input', () => this._updateAutoHeight());
-      
+
       // Listen for window resize
       window.addEventListener('resize', () => this._updateAutoHeight());
     }
-    
+
     /**
      * Update height based on scrollHeight
      * @private
      */
     _updateAutoHeight() {
       if (!this.options.autoResize) return;
-      
+
       const textarea = this.textarea;
       const preview = this.preview;
       const wrapper = this.wrapper;
-      
+
       // Get computed styles
       const computed = window.getComputedStyle(textarea);
       const paddingTop = parseFloat(computed.paddingTop);
       const paddingBottom = parseFloat(computed.paddingBottom);
-      
+
       // Store scroll positions
       const scrollTop = textarea.scrollTop;
-      
+
       // Reset height to get accurate scrollHeight
       textarea.style.setProperty('height', 'auto', 'important');
-      
+
       // Calculate new height based on scrollHeight
       let newHeight = textarea.scrollHeight;
-      
+
       // Apply min height constraint
       if (this.options.minHeight) {
         const minHeight = parseInt(this.options.minHeight);
         newHeight = Math.max(newHeight, minHeight);
       }
-      
+
       // Apply max height constraint
       let overflow = 'hidden';
       if (this.options.maxHeight) {
@@ -943,35 +950,35 @@ class OverType {
           overflow = 'auto';
         }
       }
-      
+
       // Apply the new height to all elements with !important to override base styles
       const heightPx = newHeight + 'px';
       textarea.style.setProperty('height', heightPx, 'important');
       textarea.style.setProperty('overflow-y', overflow, 'important');
-      
+
       preview.style.setProperty('height', heightPx, 'important');
       preview.style.setProperty('overflow-y', overflow, 'important');
-      
+
       wrapper.style.setProperty('height', heightPx, 'important');
-      
+
       // Restore scroll position
       textarea.scrollTop = scrollTop;
       preview.scrollTop = scrollTop;
-      
+
       // Track if height changed
       if (this.previousHeight !== newHeight) {
         this.previousHeight = newHeight;
         // Could dispatch a custom event here if needed
       }
     }
-    
+
     /**
      * Show or hide stats bar
      * @param {boolean} show - Whether to show stats
      */
     showStats(show) {
       this.options.showStats = show;
-      
+
       if (show && !this.statsBar) {
         // Create stats bar (add to container, not wrapper)
         this.statsBar = document.createElement('div');
@@ -984,7 +991,7 @@ class OverType {
         this.statsBar = null;
       }
     }
-    
+
     /**
      * Show or hide the plain textarea (toggle overlay visibility)
      * @param {boolean} show - true to show plain textarea (hide overlay), false to show overlay
@@ -998,7 +1005,7 @@ class OverType {
         // Show overlay mode (hide plain textarea text)
         this.container.classList.remove('plain-mode');
       }
-      
+
       // Update toolbar button if exists
       if (this.toolbar) {
         const toggleBtn = this.container.querySelector('[data-action="toggle-plain"]');
@@ -1008,7 +1015,7 @@ class OverType {
           toggleBtn.title = show ? 'Show markdown preview' : 'Show plain textarea';
         }
       }
-      
+
       return show;
     }
 
@@ -1025,7 +1032,7 @@ class OverType {
         // Show edit mode
         this.container.classList.remove('preview-mode');
       }
-      
+
       return show;
     }
 
@@ -1046,7 +1053,7 @@ class OverType {
       if (this.wrapper) {
         const content = this.getValue();
         this.wrapper.remove();
-        
+
         // Restore original content
         this.element.textContent = content;
       }
@@ -1111,7 +1118,23 @@ class OverType {
 
       OverType.stylesInjected = true;
     }
-    
+
+    /**
+     * Set global code highlighter for all OverType instances
+     * @param {Function|null} highlighter - Function that takes (code, language) and returns highlighted HTML
+     */
+    static setCodeHighlighter(highlighter) {
+      MarkdownParser.setCodeHighlighter(highlighter);
+
+      // Update all existing instances
+      document.querySelectorAll('.overtype-wrapper').forEach(wrapper => {
+        const instance = wrapper._instance;
+        if (instance && instance.updatePreview) {
+          instance.updatePreview();
+        }
+      });
+    }
+
     /**
      * Set global theme for all OverType instances
      * @param {string|Object} theme - Theme name or custom theme object
@@ -1120,18 +1143,18 @@ class OverType {
     static setTheme(theme, customColors = null) {
       // Process theme
       let themeObj = typeof theme === 'string' ? getTheme(theme) : theme;
-      
+
       // Apply custom colors if provided
       if (customColors) {
         themeObj = mergeTheme(themeObj, customColors);
       }
-      
+
       // Store as current theme
       OverType.currentTheme = themeObj;
-      
+
       // Re-inject styles with new theme
       OverType.injectStyles(true);
-      
+
       // Update all existing instances - update container theme attribute
       document.querySelectorAll('.overtype-container').forEach(container => {
         const themeName = typeof themeObj === 'string' ? themeObj : themeObj.name;
@@ -1139,7 +1162,7 @@ class OverType {
           container.setAttribute('data-theme', themeName);
         }
       });
-      
+
       // Also handle any old-style wrappers without containers
       document.querySelectorAll('.overtype-wrapper').forEach(wrapper => {
         if (!wrapper.closest('.overtype-container')) {
@@ -1148,7 +1171,7 @@ class OverType {
             wrapper.setAttribute('data-theme', themeName);
           }
         }
-        
+
         // Trigger preview update for the instance
         const instance = wrapper._instance;
         if (instance) {
@@ -1201,11 +1224,22 @@ class OverType {
             if (instance.options.showStats && instance.statsBar) {
               instance._updateStats();
             }
-            // Debounce updates
-            clearTimeout(instance._selectionTimeout);
-            instance._selectionTimeout = setTimeout(() => {
-              instance.updatePreview();
-            }, 50);
+            // Update toolbar button states if toolbar exists
+            if (instance.toolbar && instance.toolbar.updateButtonStates) {
+              instance.toolbar.updateButtonStates();
+            }
+            // Update link tooltip position if it exists
+            if (instance.linkTooltip && instance.linkTooltip.checkCursorPosition) {
+              instance.linkTooltip.checkCursorPosition();
+            }
+            // Only update preview if showing active line raw (which depends on cursor position)
+            if (instance.options.showActiveLineRaw) {
+              // Debounce updates
+              clearTimeout(instance._selectionTimeout);
+              instance._selectionTimeout = setTimeout(() => {
+                instance.updatePreview();
+              }, 50);
+            }
           }
         }
       });
@@ -1227,4 +1261,4 @@ OverType.currentTheme = solar;
 
 // Export for module systems
 export default OverType;
-export { OverType };
\ No newline at end of file
+export { OverType };
diff --git a/src/parser.js b/src/parser.js
index 52d5ca7..67549ee 100644
--- a/src/parser.js
+++ b/src/parser.js
@@ -10,6 +10,9 @@ export class MarkdownParser {
   // Track link index for anchor naming
   static linkIndex = 0;
 
+  // Global code highlighter function
+  static codeHighlighter = null;
+
   /**
    * Reset link index (call before parsing a new document)
    */
@@ -17,6 +20,13 @@ export class MarkdownParser {
     this.linkIndex = 0;
   }
 
+  /**
+   * Set global code highlighter function
+   * @param {Function|null} highlighter - Function that takes (code, language) and returns highlighted HTML
+   */
+  static setCodeHighlighter(highlighter) {
+    this.codeHighlighter = highlighter;
+  }
   /**
    * Escape HTML special characters
    * @param {string} text - Raw text to escape
@@ -427,9 +437,10 @@ export class MarkdownParser {
    * @param {string} text - Full markdown text
    * @param {number} activeLine - Currently active line index (optional)
    * @param {boolean} showActiveLineRaw - Show raw markdown on active line
+   * @param {Function} instanceHighlighter - Instance-specific code highlighter (optional)
    * @returns {string} Parsed HTML
    */
-  static parse(text, activeLine = -1, showActiveLineRaw = false) {
+  static parse(text, activeLine = -1, showActiveLineRaw = false, instanceHighlighter = null) {
     // Reset link counter for each parse
     this.resetLinkIndex();
 
@@ -466,19 +477,20 @@ export class MarkdownParser {
     const html = parsedLines.join('');
 
     // Apply post-processing for list consolidation
-    return this.postProcessHTML(html);
+    return this.postProcessHTML(html, instanceHighlighter);
   }
 
   /**
    * Post-process HTML to consolidate lists and code blocks
    * @param {string} html - HTML to post-process
+   * @param {Function} instanceHighlighter - Instance-specific code highlighter (optional)
    * @returns {string} Post-processed HTML with consolidated lists and code blocks
    */
-  static postProcessHTML(html) {
+  static postProcessHTML(html, instanceHighlighter = null) {
     // Check if we're in a browser environment
     if (typeof document === 'undefined' || !document) {
       // In Node.js environment - do manual post-processing
-      return this.postProcessHTMLManual(html);
+      return this.postProcessHTMLManual(html, instanceHighlighter);
     }
 
     // Parse HTML string into DOM
@@ -525,9 +537,25 @@ export class MarkdownParser {
 
             // Store reference to the code element for adding content
             currentCodeBlock._codeElement = codeElement;
+            currentCodeBlock._language = lang;
+            currentCodeBlock._codeContent = '';
             continue;
           } else {
-            // End of code block - fence stays visible
+            // End of code block - apply highlighting if needed
+            const highlighter = instanceHighlighter || this.codeHighlighter;
+            if (currentCodeBlock && highlighter && currentCodeBlock._codeContent) {
+              try {
+                const highlightedCode = highlighter(
+                  currentCodeBlock._codeContent,
+                  currentCodeBlock._language || ''
+                );
+                currentCodeBlock._codeElement.innerHTML = highlightedCode;
+              } catch (error) {
+                console.warn('Code highlighting failed:', error);
+                // Keep the plain text content as fallback
+              }
+            }
+
             inCodeBlock = false;
             currentCodeBlock = null;
             continue;
@@ -538,14 +566,18 @@ export class MarkdownParser {
       // Check if we're in a code block - any div that's not a code fence
       if (inCodeBlock && currentCodeBlock && child.tagName === 'DIV' && !child.querySelector('.code-fence')) {
         const codeElement = currentCodeBlock._codeElement || currentCodeBlock.querySelector('code');
-        // Add the line content to the code block
-        if (codeElement.textContent.length > 0) {
-          codeElement.textContent += '\n';
+        // Add the line content to the code block content (for highlighting)
+        if (currentCodeBlock._codeContent.length > 0) {
+          currentCodeBlock._codeContent += '\n';
         }
         // Get the actual text content, preserving spaces
-        // Use textContent instead of innerHTML to avoid double-escaping
-        // textContent automatically decodes HTML entities
         const lineText = child.textContent.replace(/\u00A0/g, ' '); // \u00A0 is nbsp
+        currentCodeBlock._codeContent += lineText;
+
+        // Also add to the code element (fallback if no highlighter)
+        if (codeElement.textContent.length > 0) {
+          codeElement.textContent += '\n';
+        }
         codeElement.textContent += lineText;
         child.remove();
         continue;
@@ -611,9 +643,10 @@ export class MarkdownParser {
   /**
    * Manual post-processing for Node.js environments (without DOM)
    * @param {string} html - HTML to post-process
+   * @param {Function} instanceHighlighter - Instance-specific code highlighter (optional)
    * @returns {string} Post-processed HTML
    */
-  static postProcessHTMLManual(html) {
+  static postProcessHTMLManual(html, instanceHighlighter = null) {
     let processed = html;
 
     // Process unordered lists
@@ -678,10 +711,22 @@ export class MarkdownParser {
       const lang = openFence.slice(3).trim();
       const langClass = lang ? ` class="language-${lang}"` : '';
 
+      // Apply code highlighting if available
+      let highlightedContent = codeContent;
+      const highlighter = instanceHighlighter || this.codeHighlighter;
+      if (highlighter) {
+        try {
+          highlightedContent = highlighter(codeContent, lang);
+        } catch (error) {
+          console.warn('Code highlighting failed:', error);
+          // Fall back to original content
+        }
+      }
+
       // Keep fence markers visible as separate divs, with pre/code block between them
       let result = `<div><span class="code-fence">${openFence}</span></div>`;
-      // Content is already escaped, don't double-escape
-      result += `<pre class="code-block"><code${langClass}>${codeContent}</code></pre>`;
+      // Use highlighted content if available, otherwise use escaped content
+      result += `<pre class="code-block"><code${langClass}>${highlightedContent}</code></pre>`;
       result += `<div><span class="code-fence">${closeFence}</span></div>`;
 
       return result;