[{"data":1,"prerenderedAt":78},["Reactive",2],{"blog-post-markdown-line-numbers-code-blocks-complete-guide":3},{"slug":4,"title":5,"description":6,"excerpt":7,"date":8,"category":9,"author":10,"keywords":11,"readingMinutes":12,"html":13,"headings":14,"tools":52,"related":53},"markdown-line-numbers-code-blocks-complete-guide","Markdown Line Numbers in Code Blocks: Complete Guide for Enhanced Code Documentation","Master line numbering in Markdown code blocks for better code documentation. Learn platform-specific implementations, CSS styling, JavaScript solutions, and accessibility considerations for technical content.","Line numbers in Markdown code blocks transform simple code examples into professional, navigable documentation that enhances readability and enables precise reference communication. While standard…","2025-09-06","Tutorial","Matthew Rathbone","markdown line numbers, code block line numbers, markdown syntax highlighting, code documentation, technical writing, programming tutorials, code examples",21,"\u003Cp>Line numbers in Markdown code blocks transform simple code examples into professional, navigable documentation that enhances readability and enables precise reference communication. While standard Markdown doesn't include built-in line numbering, various platforms, extensions, and custom solutions provide sophisticated approaches to adding numbered lines that improve code comprehension and collaborative development workflows.\u003C/p>\n\u003Ch2 id=\"why-use-line-numbers-in-code-blocks\">Why Use Line Numbers in Code Blocks?\u003C/h2>\n\u003Cp>Line numbers provide significant advantages for technical documentation and code sharing:\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>Precise Reference\u003C/strong>: Enable exact line references in discussions and code reviews\u003C/li>\n\u003Cli>\u003Cstrong>Enhanced Navigation\u003C/strong>: Help readers locate specific sections in lengthy code examples\u003C/li>\n\u003Cli>\u003Cstrong>Professional Presentation\u003C/strong>: Create publication-quality code documentation\u003C/li>\n\u003Cli>\u003Cstrong>Improved Debugging\u003C/strong>: Facilitate error reporting and troubleshooting discussions\u003C/li>\n\u003Cli>\u003Cstrong>Educational Value\u003C/strong>: Support step-by-step code explanations and tutorials\u003C/li>\n\u003C/ul>\n\u003Ch2 id=\"platform-specific-line-number-implementations\">Platform-Specific Line Number Implementations\u003C/h2>\n\u003Ch3 id=\"github-flavored-markdown\">GitHub Flavored Markdown\u003C/h3>\n\u003Cp>GitHub supports line number highlighting through URL anchors:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">\u003Cspan class=\"hljs-section\">## JavaScript Authentication Example\u003C/span>\n\n\u003Cspan class=\"hljs-code\">```javascript\n// Complete authentication system with error handling\nclass AuthenticationManager {\n    constructor(config) {\n        this.config = {\n            tokenExpiry: config.tokenExpiry || 3600000, // 1 hour default\n            maxLoginAttempts: config.maxAttempts || 5,\n            lockoutDuration: config.lockoutDuration || 300000, // 5 minutes\n            secretKey: config.secretKey || process.env.JWT_SECRET\n        };\n        this.loginAttempts = new Map(); // Track failed attempts\n        this.lockedAccounts = new Map(); // Track account lockouts\n    }\n    \n    async authenticate(email, password) {\n        // Check if account is currently locked\n        if (this.isAccountLocked(email)) {\n            throw new Error('Account temporarily locked due to multiple failed attempts');\n        }\n        \n        try {\n            // Validate input parameters\n            if (!this.isValidEmail(email) || !password) {\n                this.recordFailedAttempt(email);\n                throw new Error('Invalid email or password format');\n            }\n            \n            // Attempt user authentication\n            const user = await this.validateCredentials(email, password);\n            if (!user) {\n                this.recordFailedAttempt(email);\n                throw new Error('Authentication failed: Invalid credentials');\n            }\n            \n            // Generate access token for authenticated user\n            const token = this.generateToken(user);\n            this.clearFailedAttempts(email); // Reset failed attempts on success\n            \n            return {\n                success: true,\n                token: token,\n                user: this.sanitizeUser(user),\n                expiresAt: new Date(Date.now() + this.config.tokenExpiry)\n            };\n            \n        } catch (error) {\n            console.error('Authentication error:', error.message);\n            throw error;\n        }\n    }\n}\n```\u003C/span>\n\n\u003Cspan class=\"hljs-strong\">**Reference specific lines in discussions:**\u003C/span>\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> Line 15: Account lockout check prevents brute force attacks\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> Lines 25-28: Input validation with attempt tracking\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> Lines 35-42: Token generation and success response\n\u003C/code>\u003C/pre>\u003Ch3 id=\"gitlab-markdown-extensions\">GitLab Markdown Extensions\u003C/h3>\n\u003Cp>GitLab provides enhanced code block features with line number support:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">\u003Cspan class=\"hljs-section\">## Python Data Processing Pipeline\u003C/span>\n\n\u003Cspan class=\"hljs-code\">```python\n# Advanced data processing pipeline with error handling and logging\nimport pandas as pd\nimport numpy as np\nimport logging\nfrom typing import Dict, List, Optional, Tuple\nfrom pathlib import Path\nimport json\n\nclass DataProcessor:\n    """\n    Comprehensive data processing pipeline for CSV and JSON data sources.\n    Includes validation, transformation, and export capabilities.\n    """\n    \n    def __init__(self, config_path: str = "config.json"):\n        self.logger = self._setup_logging()\n        self.config = self._load_config(config_path)\n        self.processed_data: Optional[pd.DataFrame] = None\n        self.processing_stats: Dict = {}\n        \n    def _setup_logging(self) -> logging.Logger:\n        """Configure logging for data processing operations"""\n        logger = logging.getLogger('DataProcessor')\n        logger.setLevel(logging.INFO)\n        \n        if not logger.handlers:\n            handler = logging.StreamHandler()\n            formatter = logging.Formatter(\n                '%(asctime)s - %(name)s - %(levelname)s - %(message)s'\n            )\n            handler.setFormatter(formatter)\n            logger.addHandler(handler)\n            \n        return logger\n    \n    def _load_config(self, config_path: str) -> Dict:\n        """Load processing configuration from JSON file"""\n        try:\n            with open(config_path, 'r') as file:\n                config = json.load(file)\n            self.logger.info(f"Configuration loaded from {config_path}")\n            return config\n        except FileNotFoundError:\n            self.logger.warning(f"Config file not found: {config_path}, using defaults")\n            return self._get_default_config()\n        except json.JSONDecodeError as e:\n            self.logger.error(f"Invalid JSON in config file: {e}")\n            raise ValueError(f"Configuration file contains invalid JSON: {e}")\n    \n    def process_csv_data(self, file_path: str, delimiter: str = ',') -> pd.DataFrame:\n        """\n        Process CSV data with comprehensive validation and cleaning.\n        \n        Args:\n            file_path: Path to CSV file\n            delimiter: CSV delimiter character\n            \n        Returns:\n            Processed DataFrame with cleaned and validated data\n        """\n        try:\n            # Load CSV data with error handling\n            self.logger.info(f"Loading CSV data from {file_path}")\n            raw_data = pd.read_csv(file_path, delimiter=delimiter)\n            \n            # Record initial data statistics\n            initial_rows = len(raw_data)\n            self.processing_stats['initial_rows'] = initial_rows\n            self.logger.info(f"Loaded {initial_rows} rows from CSV")\n            \n            # Data validation and cleaning pipeline\n            cleaned_data = self._validate_data_types(raw_data)\n            cleaned_data = self._handle_missing_values(cleaned_data)\n            cleaned_data = self._remove_duplicates(cleaned_data)\n            cleaned_data = self._apply_transformations(cleaned_data)\n            \n            # Record final statistics\n            final_rows = len(cleaned_data)\n            self.processing_stats['final_rows'] = final_rows\n            self.processing_stats['rows_removed'] = initial_rows - final_rows\n            self.processing_stats['data_quality_score'] = self._calculate_quality_score(cleaned_data)\n            \n            self.processed_data = cleaned_data\n            self.logger.info(f"Processing complete: {final_rows} clean rows")\n            \n            return cleaned_data\n            \n        except Exception as e:\n            self.logger.error(f"CSV processing failed: {e}")\n            raise RuntimeError(f"Failed to process CSV data: {e}")\n```\u003C/span>\n\n\u003Cspan class=\"hljs-strong\">**Line-specific documentation:**\u003C/span>\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> Lines 15-19: Constructor initializes core components and statistics tracking\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> Lines 21-33: Logging setup with proper formatting and level configuration  \n\u003Cspan class=\"hljs-bullet\">-\u003C/span> Lines 50-78: CSV processing pipeline with comprehensive error handling\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> Lines 65-69: Data cleaning operations applied sequentially\n\u003C/code>\u003C/pre>\u003Ch3 id=\"prismjs-line-number-plugin\">Prism.js Line Number Plugin\u003C/h3>\n\u003Cp>Enable client-side line numbering with Prism.js:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-html\">\u003Cspan class=\"hljs-comment\"><!-- Prism.js setup with line numbers -->\u003C/span>\n\u003Cspan class=\"hljs-meta\"><!DOCTYPE \u003Cspan class=\"hljs-keyword\">html\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">html\u003C/span> \u003Cspan class=\"hljs-attr\">lang\u003C/span>=\u003Cspan class=\"hljs-string\">"en"\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">head\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">meta\u003C/span> \u003Cspan class=\"hljs-attr\">charset\u003C/span>=\u003Cspan class=\"hljs-string\">"UTF-8"\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">meta\u003C/span> \u003Cspan class=\"hljs-attr\">name\u003C/span>=\u003Cspan class=\"hljs-string\">"viewport"\u003C/span> \u003Cspan class=\"hljs-attr\">content\u003C/span>=\u003Cspan class=\"hljs-string\">"width=device-width, initial-scale=1.0"\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">title\u003C/span>>\u003C/span>Code Documentation with Line Numbers\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">title\u003C/span>>\u003C/span>\n    \n    \u003Cspan class=\"hljs-comment\"><!-- Prism.js core CSS -->\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">link\u003C/span> \u003Cspan class=\"hljs-attr\">href\u003C/span>=\u003Cspan class=\"hljs-string\">"https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css"\u003C/span> \u003Cspan class=\"hljs-attr\">rel\u003C/span>=\u003Cspan class=\"hljs-string\">"stylesheet"\u003C/span> />\u003C/span>\n    \n    \u003Cspan class=\"hljs-comment\"><!-- Line numbers plugin CSS -->\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">link\u003C/span> \u003Cspan class=\"hljs-attr\">href\u003C/span>=\u003Cspan class=\"hljs-string\">"https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/line-numbers/prism-line-numbers.min.css"\u003C/span> \u003Cspan class=\"hljs-attr\">rel\u003C/span>=\u003Cspan class=\"hljs-string\">"stylesheet"\u003C/span> />\u003C/span>\n    \n    \u003Cspan class=\"hljs-comment\"><!-- Line highlight plugin CSS -->\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">link\u003C/span> \u003Cspan class=\"hljs-attr\">href\u003C/span>=\u003Cspan class=\"hljs-string\">"https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/line-highlight/prism-line-highlight.min.css"\u003C/span> \u003Cspan class=\"hljs-attr\">rel\u003C/span>=\u003Cspan class=\"hljs-string\">"stylesheet"\u003C/span> />\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">head\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">body\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-comment\"><!-- Code block with line numbers and highlighting -->\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">pre\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"line-numbers"\u003C/span> \u003Cspan class=\"hljs-attr\">data-line\u003C/span>=\u003Cspan class=\"hljs-string\">"5-8,12,15-17"\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">code\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"language-javascript"\u003C/span>>\u003C/span>\n// React component with hooks and state management\nimport React, { useState, useEffect, useCallback, useMemo } from 'react';\nimport { debounce } from 'lodash';\n\n// Custom hook for API data fetching with caching\nfunction useAPIData(endpoint, options = {}) {\n    const [data, setData] = useState(null);\n    const [loading, setLoading] = useState(false);\n    const [error, setError] = useState(null);\n    const [cache, setCache] = useState(new Map());\n    \n    // Memoized fetch function with caching logic\n    const fetchData = useCallback(async (url, fetchOptions) => {\n        const cacheKey = `${url}_${JSON.stringify(fetchOptions)}`;\n        \n        // Check cache first to avoid unnecessary requests\n        if (cache.has(cacheKey)) {\n            const cachedData = cache.get(cacheKey);\n            if (Date.now() - cachedData.timestamp < 300000) { // 5 minute cache\n                setData(cachedData.data);\n                return cachedData.data;\n            }\n        }\n        \n        setLoading(true);\n        setError(null);\n        \n        try {\n            const response = await fetch(url, fetchOptions);\n            if (!response.ok) {\n                throw new Error(`HTTP error! status: ${response.status}`);\n            }\n            \n            const result = await response.json();\n            \n            // Update cache with timestamp\n            setCache(prev => new Map(prev.set(cacheKey, {\n                data: result,\n                timestamp: Date.now()\n            })));\n            \n            setData(result);\n            return result;\n            \n        } catch (err) {\n            setError(err.message);\n            throw err;\n        } finally {\n            setLoading(false);\n        }\n    }, [cache]);\n    \n    // Debounced API call to prevent excessive requests\n    const debouncedFetch = useMemo(\n        () => debounce(fetchData, 300),\n        [fetchData]\n    );\n    \n    // Effect for initial data loading\n    useEffect(() => {\n        if (endpoint) {\n            fetchData(endpoint, options);\n        }\n    }, [endpoint, fetchData, options]);\n    \n    return {\n        data,\n        loading,\n        error,\n        refetch: () => fetchData(endpoint, options),\n        debouncedRefetch: () => debouncedFetch(endpoint, options)\n    };\n}\n    \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">code\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">pre\u003C/span>>\u003C/span>\n    \n    \u003Cspan class=\"hljs-comment\"><!-- Prism.js core JavaScript -->\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">script\u003C/span> \u003Cspan class=\"hljs-attr\">src\u003C/span>=\u003Cspan class=\"hljs-string\">"https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-core.min.js"\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">script\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">script\u003C/span> \u003Cspan class=\"hljs-attr\">src\u003C/span>=\u003Cspan class=\"hljs-string\">"https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js"\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">script\u003C/span>>\u003C/span>\n    \n    \u003Cspan class=\"hljs-comment\"><!-- Line numbers plugin -->\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">script\u003C/span> \u003Cspan class=\"hljs-attr\">src\u003C/span>=\u003Cspan class=\"hljs-string\">"https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/line-numbers/prism-line-numbers.min.js"\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">script\u003C/span>>\u003C/span>\n    \n    \u003Cspan class=\"hljs-comment\"><!-- Line highlight plugin -->\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">script\u003C/span> \u003Cspan class=\"hljs-attr\">src\u003C/span>=\u003Cspan class=\"hljs-string\">"https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/line-highlight/prism-line-highlight.min.js"\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">script\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">body\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">html\u003C/span>>\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch2 id=\"css-based-line-number-solutions\">CSS-Based Line Number Solutions\u003C/h2>\n\u003Ch3 id=\"pure-css-implementation\">Pure CSS Implementation\u003C/h3>\n\u003Cp>Create line numbers using CSS counters and pseudo-elements:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-css\">\u003Cspan class=\"hljs-comment\">/* CSS-only line numbers for code blocks */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.code-with-lines\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">position\u003C/span>: relative;\n    \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-number\">#f8f8f8\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-number\">#e1e1e1\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">6px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">1.5rem\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">overflow-x\u003C/span>: auto;\n    \u003Cspan class=\"hljs-attribute\">font-family\u003C/span>: \u003Cspan class=\"hljs-string\">'Monaco'\u003C/span>, \u003Cspan class=\"hljs-string\">'Menlo'\u003C/span>, \u003Cspan class=\"hljs-string\">'Ubuntu Mono'\u003C/span>, monospace;\n    \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">14px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-number\">1.4\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.code-with-lines\u003C/span> pre {\n    \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">1rem\u003C/span> \u003Cspan class=\"hljs-number\">1rem\u003C/span> \u003Cspan class=\"hljs-number\">1rem\u003C/span> \u003Cspan class=\"hljs-number\">3.5rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">counter-reset\u003C/span>: line-counter;\n    \u003Cspan class=\"hljs-attribute\">white-space\u003C/span>: pre;\n    \u003Cspan class=\"hljs-attribute\">overflow\u003C/span>: visible;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.code-with-lines\u003C/span> \u003Cspan class=\"hljs-selector-tag\">code\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">display\u003C/span>: block;\n    \u003Cspan class=\"hljs-attribute\">counter-increment\u003C/span>: line-counter;\n    \u003Cspan class=\"hljs-attribute\">position\u003C/span>: relative;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.code-with-lines\u003C/span> \u003Cspan class=\"hljs-selector-tag\">code\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">::before\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">content\u003C/span>: \u003Cspan class=\"hljs-built_in\">counter\u003C/span>(line-counter);\n    \u003Cspan class=\"hljs-attribute\">position\u003C/span>: absolute;\n    \u003Cspan class=\"hljs-attribute\">left\u003C/span>: -\u003Cspan class=\"hljs-number\">3rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">2.5rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: right;\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#666\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">12px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: inherit;\n    \u003Cspan class=\"hljs-attribute\">padding-right\u003C/span>: \u003Cspan class=\"hljs-number\">0.5rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border-right\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-number\">#ddd\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-number\">#f0f0f0\u003C/span>;\n    user-select: none;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Syntax highlighting integration */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.code-with-lines\u003C/span> \u003Cspan class=\"hljs-selector-class\">.token\u003C/span>\u003Cspan class=\"hljs-selector-class\">.comment\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#6a9955\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-style\u003C/span>: italic;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.code-with-lines\u003C/span> \u003Cspan class=\"hljs-selector-class\">.token\u003C/span>\u003Cspan class=\"hljs-selector-class\">.string\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#ce9178\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.code-with-lines\u003C/span> \u003Cspan class=\"hljs-selector-class\">.token\u003C/span>\u003Cspan class=\"hljs-selector-class\">.keyword\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#569cd6\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: bold;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.code-with-lines\u003C/span> \u003Cspan class=\"hljs-selector-class\">.token\u003C/span>\u003Cspan class=\"hljs-selector-class\">.function\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#dcdcaa\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.code-with-lines\u003C/span> \u003Cspan class=\"hljs-selector-class\">.token\u003C/span>\u003Cspan class=\"hljs-selector-class\">.number\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#b5cea8\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Dark theme support */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> (\u003Cspan class=\"hljs-attribute\">prefers-color-scheme\u003C/span>: dark) {\n    \u003Cspan class=\"hljs-selector-class\">.code-with-lines\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-number\">#1e1e1e\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">border-color\u003C/span>: \u003Cspan class=\"hljs-number\">#404040\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#d4d4d4\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.code-with-lines\u003C/span> \u003Cspan class=\"hljs-selector-tag\">code\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">::before\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-number\">#2d2d2d\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#858585\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">border-right-color\u003C/span>: \u003Cspan class=\"hljs-number\">#404040\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.code-with-lines\u003C/span> \u003Cspan class=\"hljs-selector-class\">.token\u003C/span>\u003Cspan class=\"hljs-selector-class\">.comment\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#6a9955\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.code-with-lines\u003C/span> \u003Cspan class=\"hljs-selector-class\">.token\u003C/span>\u003Cspan class=\"hljs-selector-class\">.string\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#ce9178\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.code-with-lines\u003C/span> \u003Cspan class=\"hljs-selector-class\">.token\u003C/span>\u003Cspan class=\"hljs-selector-class\">.keyword\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#569cd6\u003C/span>;\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">/* Responsive adjustments */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> (\u003Cspan class=\"hljs-attribute\">max-width\u003C/span>: \u003Cspan class=\"hljs-number\">768px\u003C/span>) {\n    \u003Cspan class=\"hljs-selector-class\">.code-with-lines\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">12px\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.code-with-lines\u003C/span> pre {\n        \u003Cspan class=\"hljs-attribute\">padding-left\u003C/span>: \u003Cspan class=\"hljs-number\">2.5rem\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.code-with-lines\u003C/span> \u003Cspan class=\"hljs-selector-tag\">code\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">::before\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">left\u003C/span>: -\u003Cspan class=\"hljs-number\">2.5rem\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">2rem\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">10px\u003C/span>;\n    }\n}\n\u003C/code>\u003C/pre>\u003Ch3 id=\"advanced-styling-with-highlighting\">Advanced Styling with Highlighting\u003C/h3>\n\u003Cp>Create sophisticated line number displays with highlighting capabilities:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-css\">\u003Cspan class=\"hljs-comment\">/* Advanced line numbers with highlighting and selection */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.advanced-code-block\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">position\u003C/span>: relative;\n    \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-built_in\">linear-gradient\u003C/span>(\u003Cspan class=\"hljs-number\">135deg\u003C/span>, \u003Cspan class=\"hljs-number\">#667eea\u003C/span> \u003Cspan class=\"hljs-number\">0%\u003C/span>, \u003Cspan class=\"hljs-number\">#764ba2\u003C/span> \u003Cspan class=\"hljs-number\">100%\u003C/span>);\n    \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">10px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">2px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">2rem\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">box-shadow\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">10px\u003C/span> \u003Cspan class=\"hljs-number\">25px\u003C/span> \u003Cspan class=\"hljs-built_in\">rgba\u003C/span>(\u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-number\">0.1\u003C/span>);\n}\n\n\u003Cspan class=\"hljs-selector-class\">.code-container\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-number\">#1e1e1e\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">8px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">position\u003C/span>: relative;\n    \u003Cspan class=\"hljs-attribute\">overflow\u003C/span>: hidden;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.code-header\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-built_in\">linear-gradient\u003C/span>(\u003Cspan class=\"hljs-number\">90deg\u003C/span>, \u003Cspan class=\"hljs-number\">#2d2d2d\u003C/span> \u003Cspan class=\"hljs-number\">0%\u003C/span>, \u003Cspan class=\"hljs-number\">#404040\u003C/span> \u003Cspan class=\"hljs-number\">100%\u003C/span>);\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">0.75rem\u003C/span> \u003Cspan class=\"hljs-number\">1rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-number\">#505050\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">display\u003C/span>: flex;\n    \u003Cspan class=\"hljs-attribute\">align-items\u003C/span>: center;\n    \u003Cspan class=\"hljs-attribute\">justify-content\u003C/span>: space-between;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.code-title\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#ffffff\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">600\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">0.9rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.copy-button\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#007acc\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: white;\n    \u003Cspan class=\"hljs-attribute\">border\u003C/span>: none;\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">0.25rem\u003C/span> \u003Cspan class=\"hljs-number\">0.75rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">4px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">0.8rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">cursor\u003C/span>: pointer;\n    \u003Cspan class=\"hljs-attribute\">transition\u003C/span>: background-color \u003Cspan class=\"hljs-number\">0.2s\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.copy-button\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:hover\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#005a9e\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.line-numbers-wrapper\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">display\u003C/span>: flex;\n    \u003Cspan class=\"hljs-attribute\">font-family\u003C/span>: \u003Cspan class=\"hljs-string\">'Monaco'\u003C/span>, \u003Cspan class=\"hljs-string\">'Menlo'\u003C/span>, \u003Cspan class=\"hljs-string\">'Ubuntu Mono'\u003C/span>, monospace;\n    \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">14px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-number\">1.5\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.line-numbers\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-number\">#2d2d2d\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#858585\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">1rem\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">min-width\u003C/span>: \u003Cspan class=\"hljs-number\">3rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: right;\n    \u003Cspan class=\"hljs-attribute\">border-right\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-number\">#505050\u003C/span>;\n    user-select: none;\n    \u003Cspan class=\"hljs-attribute\">counter-reset\u003C/span>: line-counter;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.line-numbers\u003C/span> \u003Cspan class=\"hljs-selector-class\">.line-number\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">display\u003C/span>: block;\n    \u003Cspan class=\"hljs-attribute\">counter-increment\u003C/span>: line-counter;\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">0.75rem\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">0.5rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">position\u003C/span>: relative;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.line-numbers\u003C/span> \u003Cspan class=\"hljs-selector-class\">.line-number\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">::before\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">content\u003C/span>: \u003Cspan class=\"hljs-built_in\">counter\u003C/span>(line-counter);\n}\n\n\u003Cspan class=\"hljs-comment\">/* Highlighted line numbers */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.line-numbers\u003C/span> \u003Cspan class=\"hljs-selector-class\">.line-number\u003C/span>\u003Cspan class=\"hljs-selector-class\">.highlighted\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-number\">#3c4043\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#ffffff\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.line-numbers\u003C/span> \u003Cspan class=\"hljs-selector-class\">.line-number\u003C/span>\u003Cspan class=\"hljs-selector-class\">.highlighted\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">::after\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">content\u003C/span>: \u003Cspan class=\"hljs-string\">''\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">position\u003C/span>: absolute;\n    \u003Cspan class=\"hljs-attribute\">left\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">top\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">bottom\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">3px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-built_in\">linear-gradient\u003C/span>(\u003Cspan class=\"hljs-number\">45deg\u003C/span>, \u003Cspan class=\"hljs-number\">#ff6b6b\u003C/span>, \u003Cspan class=\"hljs-number\">#ffd93d\u003C/span>);\n}\n\n\u003Cspan class=\"hljs-selector-class\">.code-content\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">flex\u003C/span>: \u003Cspan class=\"hljs-number\">1\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">1rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#d4d4d4\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-number\">#1e1e1e\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">overflow-x\u003C/span>: auto;\n    \u003Cspan class=\"hljs-attribute\">white-space\u003C/span>: pre;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.code-line\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">display\u003C/span>: block;\n    \u003Cspan class=\"hljs-attribute\">min-height\u003C/span>: \u003Cspan class=\"hljs-number\">1.5em\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">position\u003C/span>: relative;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.code-line\u003C/span>\u003Cspan class=\"hljs-selector-class\">.highlighted\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-built_in\">rgba\u003C/span>(\u003Cspan class=\"hljs-number\">255\u003C/span>, \u003Cspan class=\"hljs-number\">255\u003C/span>, \u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-number\">0.1\u003C/span>);\n    \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span> -\u003Cspan class=\"hljs-number\">1rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">1rem\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Error line highlighting */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.code-line\u003C/span>\u003Cspan class=\"hljs-selector-class\">.error\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-built_in\">rgba\u003C/span>(\u003Cspan class=\"hljs-number\">255\u003C/span>, \u003Cspan class=\"hljs-number\">107\u003C/span>, \u003Cspan class=\"hljs-number\">107\u003C/span>, \u003Cspan class=\"hljs-number\">0.2\u003C/span>);\n    \u003Cspan class=\"hljs-attribute\">border-left\u003C/span>: \u003Cspan class=\"hljs-number\">3px\u003C/span> solid \u003Cspan class=\"hljs-number\">#ff6b6b\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span> -\u003Cspan class=\"hljs-number\">1rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">1rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">padding-left\u003C/span>: \u003Cspan class=\"hljs-built_in\">calc\u003C/span>(\u003Cspan class=\"hljs-number\">1rem\u003C/span> - \u003Cspan class=\"hljs-number\">3px\u003C/span>);\n}\n\n\u003Cspan class=\"hljs-comment\">/* Warning line highlighting */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.code-line\u003C/span>\u003Cspan class=\"hljs-selector-class\">.warning\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-built_in\">rgba\u003C/span>(\u003Cspan class=\"hljs-number\">255\u003C/span>, \u003Cspan class=\"hljs-number\">193\u003C/span>, \u003Cspan class=\"hljs-number\">7\u003C/span>, \u003Cspan class=\"hljs-number\">0.2\u003C/span>);\n    \u003Cspan class=\"hljs-attribute\">border-left\u003C/span>: \u003Cspan class=\"hljs-number\">3px\u003C/span> solid \u003Cspan class=\"hljs-number\">#ffc107\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span> -\u003Cspan class=\"hljs-number\">1rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">1rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">padding-left\u003C/span>: \u003Cspan class=\"hljs-built_in\">calc\u003C/span>(\u003Cspan class=\"hljs-number\">1rem\u003C/span> - \u003Cspan class=\"hljs-number\">3px\u003C/span>);\n}\n\n\u003Cspan class=\"hljs-comment\">/* Success/added line highlighting */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.code-line\u003C/span>\u003Cspan class=\"hljs-selector-class\">.added\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-built_in\">rgba\u003C/span>(\u003Cspan class=\"hljs-number\">76\u003C/span>, \u003Cspan class=\"hljs-number\">175\u003C/span>, \u003Cspan class=\"hljs-number\">80\u003C/span>, \u003Cspan class=\"hljs-number\">0.2\u003C/span>);\n    \u003Cspan class=\"hljs-attribute\">border-left\u003C/span>: \u003Cspan class=\"hljs-number\">3px\u003C/span> solid \u003Cspan class=\"hljs-number\">#4caf50\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span> -\u003Cspan class=\"hljs-number\">1rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">1rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">padding-left\u003C/span>: \u003Cspan class=\"hljs-built_in\">calc\u003C/span>(\u003Cspan class=\"hljs-number\">1rem\u003C/span> - \u003Cspan class=\"hljs-number\">3px\u003C/span>);\n}\n\n\u003Cspan class=\"hljs-comment\">/* Deleted line highlighting */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.code-line\u003C/span>\u003Cspan class=\"hljs-selector-class\">.removed\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-built_in\">rgba\u003C/span>(\u003Cspan class=\"hljs-number\">244\u003C/span>, \u003Cspan class=\"hljs-number\">67\u003C/span>, \u003Cspan class=\"hljs-number\">54\u003C/span>, \u003Cspan class=\"hljs-number\">0.2\u003C/span>);\n    \u003Cspan class=\"hljs-attribute\">border-left\u003C/span>: \u003Cspan class=\"hljs-number\">3px\u003C/span> solid \u003Cspan class=\"hljs-number\">#f44336\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span> -\u003Cspan class=\"hljs-number\">1rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">1rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">padding-left\u003C/span>: \u003Cspan class=\"hljs-built_in\">calc\u003C/span>(\u003Cspan class=\"hljs-number\">1rem\u003C/span> - \u003Cspan class=\"hljs-number\">3px\u003C/span>);\n    \u003Cspan class=\"hljs-attribute\">text-decoration\u003C/span>: line-through;\n    \u003Cspan class=\"hljs-attribute\">opacity\u003C/span>: \u003Cspan class=\"hljs-number\">0.7\u003C/span>;\n}\n\u003C/code>\u003C/pre>\u003Ch2 id=\"javascript-enhanced-line-numbers\">JavaScript-Enhanced Line Numbers\u003C/h2>\n\u003Ch3 id=\"dynamic-line-number-generation\">Dynamic Line Number Generation\u003C/h3>\n\u003Cp>Create interactive line numbers with JavaScript:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-javascript\">\u003Cspan class=\"hljs-comment\">// Advanced line number system with interactive features\u003C/span>\n\u003Cspan class=\"hljs-keyword\">class\u003C/span> \u003Cspan class=\"hljs-title class_\">CodeLineNumbers\u003C/span> {\n    \u003Cspan class=\"hljs-title function_\">constructor\u003C/span>(\u003Cspan class=\"hljs-params\">options = {}\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span> = {\n            \u003Cspan class=\"hljs-attr\">startLine\u003C/span>: options.\u003Cspan class=\"hljs-property\">startLine\u003C/span> || \u003Cspan class=\"hljs-number\">1\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">highlightedLines\u003C/span>: options.\u003Cspan class=\"hljs-property\">highlightedLines\u003C/span> || [],\n            \u003Cspan class=\"hljs-attr\">showCopyButton\u003C/span>: options.\u003Cspan class=\"hljs-property\">showCopyButton\u003C/span> !== \u003Cspan class=\"hljs-literal\">false\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">enableLineSelection\u003C/span>: options.\u003Cspan class=\"hljs-property\">enableLineSelection\u003C/span> !== \u003Cspan class=\"hljs-literal\">false\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">syntaxHighlighting\u003C/span>: options.\u003Cspan class=\"hljs-property\">syntaxHighlighting\u003C/span> !== \u003Cspan class=\"hljs-literal\">false\u003C/span>,\n            ...options\n        };\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">selectedLines\u003C/span> = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Set\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">observers\u003C/span> = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Map\u003C/span>();\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">init\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">init\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Find all code blocks and enhance them\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> codeBlocks = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'pre code, .code-block code'\u003C/span>);\n        codeBlocks.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">codeBlock\u003C/span> =>\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">enhanceCodeBlock\u003C/span>(codeBlock));\n        \n        \u003Cspan class=\"hljs-comment\">// Set up global event listeners\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">setupGlobalEventHandlers\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">enhanceCodeBlock\u003C/span>(\u003Cspan class=\"hljs-params\">codeElement\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> preElement = codeElement.\u003Cspan class=\"hljs-title function_\">closest\u003C/span>(\u003Cspan class=\"hljs-string\">'pre'\u003C/span>) || codeElement.\u003Cspan class=\"hljs-property\">parentElement\u003C/span>;\n        \n        \u003Cspan class=\"hljs-comment\">// Skip if already enhanced\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (preElement.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">contains\u003C/span>(\u003Cspan class=\"hljs-string\">'enhanced-code-block'\u003C/span>)) {\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Create enhanced structure\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> wrapper = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">createWrapper\u003C/span>(codeElement);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> lineNumbers = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">createLineNumbers\u003C/span>(codeElement);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> codeContent = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">createCodeContent\u003C/span>(codeElement);\n        \n        \u003Cspan class=\"hljs-comment\">// Add copy functionality\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">showCopyButton\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> copyButton = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">createCopyButton\u003C/span>(codeElement);\n            wrapper.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(copyButton);\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Replace original element\u003C/span>\n        preElement.\u003Cspan class=\"hljs-property\">parentNode\u003C/span>.\u003Cspan class=\"hljs-title function_\">replaceChild\u003C/span>(wrapper, preElement);\n        \n        \u003Cspan class=\"hljs-comment\">// Set up line selection if enabled\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">enableLineSelection\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">setupLineSelection\u003C/span>(wrapper, lineNumbers, codeContent);\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Apply syntax highlighting if enabled\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">syntaxHighlighting\u003C/span> && \u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-property\">Prism\u003C/span>) {\n            \u003Cspan class=\"hljs-title class_\">Prism\u003C/span>.\u003Cspan class=\"hljs-title function_\">highlightElement\u003C/span>(codeContent.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'code'\u003C/span>));\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Set up intersection observer for lazy loading\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">setupIntersectionObserver\u003C/span>(wrapper);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">createWrapper\u003C/span>(\u003Cspan class=\"hljs-params\">codeElement\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> wrapper = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n        wrapper.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'enhanced-code-block'\u003C/span>;\n        wrapper.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'data-language'\u003C/span>, \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">getLanguage\u003C/span>(codeElement));\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> wrapper;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">createLineNumbers\u003C/span>(\u003Cspan class=\"hljs-params\">codeElement\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> lines = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">getCodeLines\u003C/span>(codeElement);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> lineNumbersContainer = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n        lineNumbersContainer.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'line-numbers-container'\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> lineNumbersList = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n        lineNumbersList.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'line-numbers-list'\u003C/span>;\n        \n        lines.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">line, index\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> lineNumber = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> actualLineNumber = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">startLine\u003C/span> + index;\n            \n            lineNumber.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'line-number'\u003C/span>;\n            lineNumber.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = actualLineNumber;\n            lineNumber.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'data-line'\u003C/span>, actualLineNumber);\n            \n            \u003Cspan class=\"hljs-comment\">// Highlight specific lines\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">highlightedLines\u003C/span>.\u003Cspan class=\"hljs-title function_\">includes\u003C/span>(actualLineNumber)) {\n                lineNumber.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">add\u003C/span>(\u003Cspan class=\"hljs-string\">'highlighted'\u003C/span>);\n            }\n            \n            \u003Cspan class=\"hljs-comment\">// Add click handler for line selection\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">enableLineSelection\u003C/span>) {\n                lineNumber.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'click'\u003C/span>, \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">e\u003C/span>) =>\u003C/span> {\n                    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">toggleLineSelection\u003C/span>(actualLineNumber, e.\u003Cspan class=\"hljs-property\">ctrlKey\u003C/span> || e.\u003Cspan class=\"hljs-property\">metaKey\u003C/span>);\n                });\n            }\n            \n            lineNumbersList.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(lineNumber);\n        });\n        \n        lineNumbersContainer.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(lineNumbersList);\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> lineNumbersContainer;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">createCodeContent\u003C/span>(\u003Cspan class=\"hljs-params\">codeElement\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> codeContainer = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n        codeContainer.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'code-content-container'\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> codeContent = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'pre'\u003C/span>);\n        codeContent.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'code-content'\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> newCodeElement = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'code'\u003C/span>);\n        newCodeElement.\u003Cspan class=\"hljs-property\">className\u003C/span> = codeElement.\u003Cspan class=\"hljs-property\">className\u003C/span>;\n        newCodeElement.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = codeElement.\u003Cspan class=\"hljs-property\">textContent\u003C/span>;\n        \n        codeContent.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(newCodeElement);\n        codeContainer.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(codeContent);\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> codeContainer;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">createCopyButton\u003C/span>(\u003Cspan class=\"hljs-params\">codeElement\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> copyButton = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'button'\u003C/span>);\n        copyButton.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'copy-code-button'\u003C/span>;\n        copyButton.\u003Cspan class=\"hljs-property\">innerHTML\u003C/span> = \u003Cspan class=\"hljs-string\">`\n            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">\n                <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>\n                <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>\n            </svg>\n            <span>Copy</span>\n        `\u003C/span>;\n        \n        copyButton.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'click'\u003C/span>, \u003Cspan class=\"hljs-keyword\">async\u003C/span> () => {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> selectedText = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">getSelectedLinesText\u003C/span>() || codeElement.\u003Cspan class=\"hljs-property\">textContent\u003C/span>;\n            \n            \u003Cspan class=\"hljs-keyword\">try\u003C/span> {\n                \u003Cspan class=\"hljs-keyword\">await\u003C/span> navigator.\u003Cspan class=\"hljs-property\">clipboard\u003C/span>.\u003Cspan class=\"hljs-title function_\">writeText\u003C/span>(selectedText);\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">showCopyFeedback\u003C/span>(copyButton, \u003Cspan class=\"hljs-string\">'Copied!'\u003C/span>);\n            } \u003Cspan class=\"hljs-keyword\">catch\u003C/span> (err) {\n                \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">error\u003C/span>(\u003Cspan class=\"hljs-string\">'Failed to copy code:'\u003C/span>, err);\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">showCopyFeedback\u003C/span>(copyButton, \u003Cspan class=\"hljs-string\">'Error'\u003C/span>);\n            }\n        });\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> copyButton;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">getCodeLines\u003C/span>(\u003Cspan class=\"hljs-params\">codeElement\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> codeElement.\u003Cspan class=\"hljs-property\">textContent\u003C/span>.\u003Cspan class=\"hljs-title function_\">split\u003C/span>(\u003Cspan class=\"hljs-string\">'\\n'\u003C/span>).\u003Cspan class=\"hljs-title function_\">filter\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">line\u003C/span> =>\u003C/span> line !== \u003Cspan class=\"hljs-string\">''\u003C/span> || line === \u003Cspan class=\"hljs-string\">'\\n'\u003C/span>);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">getLanguage\u003C/span>(\u003Cspan class=\"hljs-params\">codeElement\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> className = codeElement.\u003Cspan class=\"hljs-property\">className\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> languageMatch = className.\u003Cspan class=\"hljs-title function_\">match\u003C/span>(\u003Cspan class=\"hljs-regexp\">/language-(\\w+)/\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> languageMatch ? languageMatch[\u003Cspan class=\"hljs-number\">1\u003C/span>] : \u003Cspan class=\"hljs-string\">'text'\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">setupLineSelection\u003C/span>(\u003Cspan class=\"hljs-params\">wrapper, lineNumbers, codeContent\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> codeLines = codeContent.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'.code-line'\u003C/span>);\n        \n        \u003Cspan class=\"hljs-comment\">// Add line selection to both line numbers and code lines\u003C/span>\n        [...lineNumbers.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'.line-number'\u003C/span>)].\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">lineNumber, index\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> codeLine = codeLines[index];\n            \n            [lineNumber, codeLine].\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">element\u003C/span> =>\u003C/span> {\n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (element) {\n                    element.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'click'\u003C/span>, \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">e\u003C/span>) =>\u003C/span> {\n                        \u003Cspan class=\"hljs-keyword\">const\u003C/span> lineNum = \u003Cspan class=\"hljs-built_in\">parseInt\u003C/span>(lineNumber.\u003Cspan class=\"hljs-title function_\">getAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'data-line'\u003C/span>));\n                        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">toggleLineSelection\u003C/span>(lineNum, e.\u003Cspan class=\"hljs-property\">ctrlKey\u003C/span> || e.\u003Cspan class=\"hljs-property\">metaKey\u003C/span>);\n                    });\n                }\n            });\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">toggleLineSelection\u003C/span>(\u003Cspan class=\"hljs-params\">lineNumber, multiSelect = \u003Cspan class=\"hljs-literal\">false\u003C/span>\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!multiSelect) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">selectedLines\u003C/span>.\u003Cspan class=\"hljs-title function_\">clear\u003C/span>();\n            \u003Cspan class=\"hljs-comment\">// Clear all previously selected lines\u003C/span>\n            \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'.line-number.selected, .code-line.selected'\u003C/span>)\n                .\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">el\u003C/span> =>\u003C/span> el.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">remove\u003C/span>(\u003Cspan class=\"hljs-string\">'selected'\u003C/span>));\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> lineElements = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">`[data-line="\u003Cspan class=\"hljs-subst\">${lineNumber}\u003C/span>"]`\u003C/span>);\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">selectedLines\u003C/span>.\u003Cspan class=\"hljs-title function_\">has\u003C/span>(lineNumber)) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">selectedLines\u003C/span>.\u003Cspan class=\"hljs-title function_\">delete\u003C/span>(lineNumber);\n            lineElements.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">el\u003C/span> =>\u003C/span> el.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">remove\u003C/span>(\u003Cspan class=\"hljs-string\">'selected'\u003C/span>));\n        } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">selectedLines\u003C/span>.\u003Cspan class=\"hljs-title function_\">add\u003C/span>(lineNumber);\n            lineElements.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">el\u003C/span> =>\u003C/span> el.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">add\u003C/span>(\u003Cspan class=\"hljs-string\">'selected'\u003C/span>));\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Update copy button state\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">updateCopyButtonState\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">getSelectedLinesText\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">selectedLines\u003C/span>.\u003Cspan class=\"hljs-property\">size\u003C/span> === \u003Cspan class=\"hljs-number\">0\u003C/span>) \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-literal\">null\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> sortedLines = \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">from\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">selectedLines\u003C/span>).\u003Cspan class=\"hljs-title function_\">sort\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">a, b\u003C/span>) =>\u003C/span> a - b);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> codeContent = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'.code-content code'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> lines = codeContent.\u003Cspan class=\"hljs-property\">textContent\u003C/span>.\u003Cspan class=\"hljs-title function_\">split\u003C/span>(\u003Cspan class=\"hljs-string\">'\\n'\u003C/span>);\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> sortedLines\n            .\u003Cspan class=\"hljs-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">lineNum\u003C/span> =>\u003C/span> lines[lineNum - \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">startLine\u003C/span>])\n            .\u003Cspan class=\"hljs-title function_\">join\u003C/span>(\u003Cspan class=\"hljs-string\">'\\n'\u003C/span>);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">updateCopyButtonState\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> copyButtons = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'.copy-code-button span'\u003C/span>);\n        copyButtons.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">span\u003C/span> =>\u003C/span> {\n            span.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">selectedLines\u003C/span>.\u003Cspan class=\"hljs-property\">size\u003C/span> > \u003Cspan class=\"hljs-number\">0\u003C/span> \n                ? \u003Cspan class=\"hljs-string\">`Copy \u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.selectedLines.size}\u003C/span> lines`\u003C/span> \n                : \u003Cspan class=\"hljs-string\">'Copy'\u003C/span>;\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">showCopyFeedback\u003C/span>(\u003Cspan class=\"hljs-params\">button, message\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> span = button.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'span'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> originalText = span.\u003Cspan class=\"hljs-property\">textContent\u003C/span>;\n        \n        span.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = message;\n        button.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">add\u003C/span>(\u003Cspan class=\"hljs-string\">'copied'\u003C/span>);\n        \n        \u003Cspan class=\"hljs-built_in\">setTimeout\u003C/span>(\u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n            span.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = originalText;\n            button.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">remove\u003C/span>(\u003Cspan class=\"hljs-string\">'copied'\u003C/span>);\n        }, \u003Cspan class=\"hljs-number\">2000\u003C/span>);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">setupIntersectionObserver\u003C/span>(\u003Cspan class=\"hljs-params\">wrapper\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> observer = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">IntersectionObserver\u003C/span>(\n            \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">entries\u003C/span>) =>\u003C/span> {\n                entries.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">entry\u003C/span> =>\u003C/span> {\n                    \u003Cspan class=\"hljs-keyword\">if\u003C/span> (entry.\u003Cspan class=\"hljs-property\">isIntersecting\u003C/span>) {\n                        wrapper.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">add\u003C/span>(\u003Cspan class=\"hljs-string\">'visible'\u003C/span>);\n                    }\n                });\n            },\n            { \u003Cspan class=\"hljs-attr\">threshold\u003C/span>: \u003Cspan class=\"hljs-number\">0.1\u003C/span> }\n        );\n        \n        observer.\u003Cspan class=\"hljs-title function_\">observe\u003C/span>(wrapper);\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">observers\u003C/span>.\u003Cspan class=\"hljs-title function_\">set\u003C/span>(wrapper, observer);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">setupGlobalEventHandlers\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Keyboard shortcuts\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'keydown'\u003C/span>, \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">e\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-comment\">// Ctrl/Cmd + A to select all lines in focused code block\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> ((e.\u003Cspan class=\"hljs-property\">ctrlKey\u003C/span> || e.\u003Cspan class=\"hljs-property\">metaKey\u003C/span>) && e.\u003Cspan class=\"hljs-property\">key\u003C/span> === \u003Cspan class=\"hljs-string\">'a'\u003C/span>) {\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> focusedCodeBlock = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-property\">activeElement\u003C/span>.\u003Cspan class=\"hljs-title function_\">closest\u003C/span>(\u003Cspan class=\"hljs-string\">'.enhanced-code-block'\u003C/span>);\n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (focusedCodeBlock) {\n                    e.\u003Cspan class=\"hljs-title function_\">preventDefault\u003C/span>();\n                    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">selectAllLines\u003C/span>(focusedCodeBlock);\n                }\n            }\n            \n            \u003Cspan class=\"hljs-comment\">// Escape to clear selection\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (e.\u003Cspan class=\"hljs-property\">key\u003C/span> === \u003Cspan class=\"hljs-string\">'Escape'\u003C/span>) {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">clearSelection\u003C/span>();\n            }\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">selectAllLines\u003C/span>(\u003Cspan class=\"hljs-params\">codeBlock\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> lineNumbers = codeBlock.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'.line-number'\u003C/span>);\n        lineNumbers.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">lineNumber\u003C/span> =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> lineNum = \u003Cspan class=\"hljs-built_in\">parseInt\u003C/span>(lineNumber.\u003Cspan class=\"hljs-title function_\">getAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'data-line'\u003C/span>));\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">selectedLines\u003C/span>.\u003Cspan class=\"hljs-title function_\">add\u003C/span>(lineNum);\n            lineNumber.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">add\u003C/span>(\u003Cspan class=\"hljs-string\">'selected'\u003C/span>);\n        });\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">updateCopyButtonState\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">clearSelection\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">selectedLines\u003C/span>.\u003Cspan class=\"hljs-title function_\">clear\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'.line-number.selected, .code-line.selected'\u003C/span>)\n            .\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">el\u003C/span> =>\u003C/span> el.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">remove\u003C/span>(\u003Cspan class=\"hljs-string\">'selected'\u003C/span>));\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">updateCopyButtonState\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">destroy\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Clean up observers and event listeners\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">observers\u003C/span>.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">observer\u003C/span> =>\u003C/span> observer.\u003Cspan class=\"hljs-title function_\">disconnect\u003C/span>());\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">observers\u003C/span>.\u003Cspan class=\"hljs-title function_\">clear\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">selectedLines\u003C/span>.\u003Cspan class=\"hljs-title function_\">clear\u003C/span>();\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">// Initialize enhanced code blocks\u003C/span>\n\u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'DOMContentLoaded'\u003C/span>, \u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n    \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">CodeLineNumbers\u003C/span>({\n        \u003Cspan class=\"hljs-attr\">startLine\u003C/span>: \u003Cspan class=\"hljs-number\">1\u003C/span>,\n        \u003Cspan class=\"hljs-attr\">highlightedLines\u003C/span>: [\u003Cspan class=\"hljs-number\">5\u003C/span>, \u003Cspan class=\"hljs-number\">8\u003C/span>, \u003Cspan class=\"hljs-number\">12\u003C/span>, \u003Cspan class=\"hljs-number\">15\u003C/span>],\n        \u003Cspan class=\"hljs-attr\">showCopyButton\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n        \u003Cspan class=\"hljs-attr\">enableLineSelection\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n        \u003Cspan class=\"hljs-attr\">syntaxHighlighting\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>\n    });\n});\n\n\u003Cspan class=\"hljs-comment\">// Export for module usage\u003C/span>\n\u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-keyword\">typeof\u003C/span> \u003Cspan class=\"hljs-variable language_\">module\u003C/span> !== \u003Cspan class=\"hljs-string\">'undefined'\u003C/span> && \u003Cspan class=\"hljs-variable language_\">module\u003C/span>.\u003Cspan class=\"hljs-property\">exports\u003C/span>) {\n    \u003Cspan class=\"hljs-variable language_\">module\u003C/span>.\u003Cspan class=\"hljs-property\">exports\u003C/span> = \u003Cspan class=\"hljs-title class_\">CodeLineNumbers\u003C/span>;\n}\n\u003C/code>\u003C/pre>\u003Ch2 id=\"hugo-shortcode-implementation\">Hugo Shortcode Implementation\u003C/h2>\n\u003Cp>Create reusable shortcodes for consistent line-numbered code blocks:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-html\">\u003Cspan class=\"hljs-comment\"><!-- layouts/shortcodes/code-with-lines.html -->\u003C/span>\n{{ $language := .Get "language" | default "text" }}\n{{ $title := .Get "title" | default "" }}\n{{ $startLine := .Get "start" | default 1 | int }}\n{{ $highlightLines := .Get "highlight" | default "" }}\n{{ $showCopy := .Get "copy" | default true }}\n\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"code-block-wrapper"\u003C/span> \u003Cspan class=\"hljs-attr\">data-language\u003C/span>=\u003Cspan class=\"hljs-string\">"{{ $language }}"\u003C/span>>\u003C/span>\n    {{ if $title }}\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"code-block-header"\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">h4\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"code-title"\u003C/span>>\u003C/span>{{ $title }}\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">h4\u003C/span>>\u003C/span>\n        {{ if $showCopy }}\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">button\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"copy-button"\u003C/span> \u003Cspan class=\"hljs-attr\">onclick\u003C/span>=\u003Cspan class=\"hljs-string\">"copyCodeBlock(this)"\u003C/span>>\u003C/span>\n            \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\u003C/span>>\u003C/span>Copy\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">span\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">button\u003C/span>>\u003C/span>\n        {{ end }}\n    \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n    {{ end }}\n    \n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"line-numbered-code"\u003C/span> \n         \u003Cspan class=\"hljs-attr\">data-start\u003C/span>=\u003Cspan class=\"hljs-string\">"{{ $startLine }}"\u003C/span>\n         \u003Cspan class=\"hljs-attr\">data-highlight\u003C/span>=\u003Cspan class=\"hljs-string\">"{{ $highlightLines }}"\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"line-numbers"\u003C/span> \u003Cspan class=\"hljs-attr\">aria-hidden\u003C/span>=\u003Cspan class=\"hljs-string\">"true"\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">pre\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"code-content"\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">code\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"language-{{ $language }}"\u003C/span>>\u003C/span>{{ .Inner | htmlEscape }}\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">code\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">pre\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">script\u003C/span>>\u003C/span>\u003Cspan class=\"language-javascript\">\n\u003Cspan class=\"hljs-comment\">// Initialize line numbers for this code block\u003C/span>\n(\u003Cspan class=\"hljs-keyword\">function\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> codeBlock = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-property\">currentScript\u003C/span>.\u003Cspan class=\"hljs-property\">previousElementSibling\u003C/span>;\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> lineNumberContainer = codeBlock.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'.line-numbers'\u003C/span>);\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> codeContent = codeBlock.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'code'\u003C/span>);\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> startLine = \u003Cspan class=\"hljs-built_in\">parseInt\u003C/span>(codeBlock.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'.line-numbered-code'\u003C/span>).\u003Cspan class=\"hljs-property\">dataset\u003C/span>.\u003Cspan class=\"hljs-property\">start\u003C/span>);\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> highlightLines = codeBlock.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'.line-numbered-code'\u003C/span>).\u003Cspan class=\"hljs-property\">dataset\u003C/span>.\u003Cspan class=\"hljs-property\">highlight\u003C/span>.\u003Cspan class=\"hljs-title function_\">split\u003C/span>(\u003Cspan class=\"hljs-string\">','\u003C/span>).\u003Cspan class=\"hljs-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">n\u003C/span> =>\u003C/span> \u003Cspan class=\"hljs-built_in\">parseInt\u003C/span>(n.\u003Cspan class=\"hljs-title function_\">trim\u003C/span>())).\u003Cspan class=\"hljs-title function_\">filter\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">n\u003C/span> =>\u003C/span> !\u003Cspan class=\"hljs-built_in\">isNaN\u003C/span>(n));\n    \n    \u003Cspan class=\"hljs-comment\">// Generate line numbers\u003C/span>\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> lines = codeContent.\u003Cspan class=\"hljs-property\">textContent\u003C/span>.\u003Cspan class=\"hljs-title function_\">split\u003C/span>(\u003Cspan class=\"hljs-string\">'\\n'\u003C/span>);\n    lines.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">line, index\u003C/span>) =>\u003C/span> {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> lineNum = startLine + index;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> lineElement = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n        lineElement.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'line-number'\u003C/span>;\n        lineElement.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = lineNum;\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (highlightLines.\u003Cspan class=\"hljs-title function_\">includes\u003C/span>(lineNum)) {\n            lineElement.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">add\u003C/span>(\u003Cspan class=\"hljs-string\">'highlighted'\u003C/span>);\n        }\n        \n        lineNumberContainer.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(lineElement);\n    });\n    \n    \u003Cspan class=\"hljs-comment\">// Syntax highlighting\u003C/span>\n    \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-property\">Prism\u003C/span>) {\n        \u003Cspan class=\"hljs-title class_\">Prism\u003C/span>.\u003Cspan class=\"hljs-title function_\">highlightElement\u003C/span>(codeContent);\n    }\n})();\n\n\u003Cspan class=\"hljs-keyword\">function\u003C/span> \u003Cspan class=\"hljs-title function_\">copyCodeBlock\u003C/span>(\u003Cspan class=\"hljs-params\">button\u003C/span>) {\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> codeBlock = button.\u003Cspan class=\"hljs-title function_\">closest\u003C/span>(\u003Cspan class=\"hljs-string\">'.code-block-wrapper'\u003C/span>);\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> codeContent = codeBlock.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'code'\u003C/span>);\n    \n    navigator.\u003Cspan class=\"hljs-property\">clipboard\u003C/span>.\u003Cspan class=\"hljs-title function_\">writeText\u003C/span>(codeContent.\u003Cspan class=\"hljs-property\">textContent\u003C/span>).\u003Cspan class=\"hljs-title function_\">then\u003C/span>(\u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> span = button.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'span'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> originalText = span.\u003Cspan class=\"hljs-property\">textContent\u003C/span>;\n        span.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = \u003Cspan class=\"hljs-string\">'Copied!'\u003C/span>;\n        \u003Cspan class=\"hljs-built_in\">setTimeout\u003C/span>(\u003Cspan class=\"hljs-function\">() =>\u003C/span> span.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = originalText, \u003Cspan class=\"hljs-number\">2000\u003C/span>);\n    }).\u003Cspan class=\"hljs-title function_\">catch\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">err\u003C/span> =>\u003C/span> {\n        \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">error\u003C/span>(\u003Cspan class=\"hljs-string\">'Failed to copy:'\u003C/span>, err);\n    });\n}\n\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">script\u003C/span>>\u003C/span>\n\u003C/code>\u003C/pre>\u003Cp>\u003Cstrong>Usage in Hugo content:\u003C/strong>\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">\u003Cspan class=\"hljs-section\">## Database Connection Example\u003C/span>\n\n{{< code-with-lines language="python" title="Database Manager" start="1" highlight="5,12,18-20" >}}\nimport psycopg2\nfrom contextlib import contextmanager\nimport logging\n\nclass DatabaseManager:\n\u003Cspan class=\"hljs-code\">    def __init__(self, connection_string):\n        self.connection_string = connection_string\n        self.logger = logging.getLogger(__name__)\n    \n    @contextmanager\n    def get_connection(self):\n        conn = None\n        try:\n            conn = psycopg2.connect(self.connection_string)\n            yield conn\n        except Exception as e:\n            if conn:\n                conn.rollback()\n            self.logger.error(f"Database error: {e}")\n            raise\n        finally:\n            if conn:\n                conn.close()\n{{< /code-with-lines >}}\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch2 id=\"jekyll-plugin-implementation\">Jekyll Plugin Implementation\u003C/h2>\n\u003Cp>Create a Jekyll plugin for automatic line numbering:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-ruby\">\u003Cspan class=\"hljs-comment\"># _plugins/line_numbers.rb\u003C/span>\n\u003Cspan class=\"hljs-keyword\">module\u003C/span> \u003Cspan class=\"hljs-title class_\">Jekyll\u003C/span>\n  \u003Cspan class=\"hljs-keyword\">class\u003C/span> \u003Cspan class=\"hljs-title class_\">LineNumbersTag\u003C/span> < \u003Cspan class=\"hljs-title class_ inherited__\">Liquid::Block\u003C/span>\n    \u003Cspan class=\"hljs-keyword\">def\u003C/span> \u003Cspan class=\"hljs-title function_\">initialize\u003C/span>(\u003Cspan class=\"hljs-params\">tag_name, markup, tokens\u003C/span>)\n      \u003Cspan class=\"hljs-variable language_\">super\u003C/span>\n      \u003Cspan class=\"hljs-variable\">@attributes\u003C/span> = parse_attributes(markup)\n    \u003Cspan class=\"hljs-keyword\">end\u003C/span>\n    \n    \u003Cspan class=\"hljs-keyword\">def\u003C/span> \u003Cspan class=\"hljs-title function_\">render\u003C/span>(\u003Cspan class=\"hljs-params\">context\u003C/span>)\n      site = context.registers[\u003Cspan class=\"hljs-symbol\">:site\u003C/span>]\n      converter = site.find_converter_instance(\u003Cspan class=\"hljs-title class_\">Jekyll\u003C/span>\u003Cspan class=\"hljs-symbol\">:\u003C/span>\u003Cspan class=\"hljs-symbol\">:Converters\u003C/span>\u003Cspan class=\"hljs-symbol\">:\u003C/span>\u003Cspan class=\"hljs-symbol\">:Markdown\u003C/span>)\n      \n      \u003Cspan class=\"hljs-comment\"># Get code content\u003C/span>\n      code_content = \u003Cspan class=\"hljs-variable language_\">super\u003C/span>.strip\n      \n      \u003Cspan class=\"hljs-comment\"># Parse attributes\u003C/span>\n      language = \u003Cspan class=\"hljs-variable\">@attributes\u003C/span>[\u003Cspan class=\"hljs-string\">'language'\u003C/span>] |\u003Cspan class=\"hljs-params\">\u003C/span>| \u003Cspan class=\"hljs-string\">'text'\u003C/span>\n      start_line = (\u003Cspan class=\"hljs-variable\">@attributes\u003C/span>[\u003Cspan class=\"hljs-string\">'start'\u003C/span>] |\u003Cspan class=\"hljs-params\">\u003C/span>| \u003Cspan class=\"hljs-string\">'1'\u003C/span>).to_i\n      title = \u003Cspan class=\"hljs-variable\">@attributes\u003C/span>[\u003Cspan class=\"hljs-string\">'title'\u003C/span>]\n      highlight_lines = parse_highlight_lines(\u003Cspan class=\"hljs-variable\">@attributes\u003C/span>[\u003Cspan class=\"hljs-string\">'highlight'\u003C/span>])\n      \n      \u003Cspan class=\"hljs-comment\"># Generate HTML\u003C/span>\n      generate_line_numbered_html(code_content, language, start_line, title, highlight_lines)\n    \u003Cspan class=\"hljs-keyword\">end\u003C/span>\n    \n    \u003Cspan class=\"hljs-keyword\">private\u003C/span>\n    \n    \u003Cspan class=\"hljs-keyword\">def\u003C/span> \u003Cspan class=\"hljs-title function_\">parse_attributes\u003C/span>(\u003Cspan class=\"hljs-params\">markup\u003C/span>)\n      attributes = {}\n      markup.scan(\u003Cspan class=\"hljs-regexp\">/(\\w+)=["']([^"']+)["']/\u003C/span>) \u003Cspan class=\"hljs-keyword\">do\u003C/span> |\u003Cspan class=\"hljs-params\">key, value\u003C/span>|\n        attributes[key] = value\n      \u003Cspan class=\"hljs-keyword\">end\u003C/span>\n      attributes\n    \u003Cspan class=\"hljs-keyword\">end\u003C/span>\n    \n    \u003Cspan class=\"hljs-keyword\">def\u003C/span> \u003Cspan class=\"hljs-title function_\">parse_highlight_lines\u003C/span>(\u003Cspan class=\"hljs-params\">highlight_string\u003C/span>)\n      \u003Cspan class=\"hljs-keyword\">return\u003C/span> [] \u003Cspan class=\"hljs-keyword\">unless\u003C/span> highlight_string\n      \n      lines = []\n      highlight_string.split(\u003Cspan class=\"hljs-string\">','\u003C/span>).each \u003Cspan class=\"hljs-keyword\">do\u003C/span> |\u003Cspan class=\"hljs-params\">part\u003C/span>|\n        part = part.strip\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> part.\u003Cspan class=\"hljs-keyword\">include\u003C/span>?(\u003Cspan class=\"hljs-string\">'-'\u003C/span>)\n          range_start, range_end = part.split(\u003Cspan class=\"hljs-string\">'-'\u003C/span>).map(&\u003Cspan class=\"hljs-symbol\">:to_i\u003C/span>)\n          lines.concat((range_start..range_end).to_a)\n        \u003Cspan class=\"hljs-keyword\">else\u003C/span>\n          lines << part.to_i\n        \u003Cspan class=\"hljs-keyword\">end\u003C/span>\n      \u003Cspan class=\"hljs-keyword\">end\u003C/span>\n      lines\n    \u003Cspan class=\"hljs-keyword\">end\u003C/span>\n    \n    \u003Cspan class=\"hljs-keyword\">def\u003C/span> \u003Cspan class=\"hljs-title function_\">generate_line_numbered_html\u003C/span>(\u003Cspan class=\"hljs-params\">code_content, language, start_line, title, highlight_lines\u003C/span>)\n      lines = code_content.split(\u003Cspan class=\"hljs-string\">"\\n"\u003C/span>)\n      \n      html = [\u003Cspan class=\"hljs-string\">'<div class="jekyll-line-numbered-code">'\u003C/span>]\n      \n      \u003Cspan class=\"hljs-comment\"># Add title if provided\u003C/span>\n      \u003Cspan class=\"hljs-keyword\">if\u003C/span> title\n        html << \u003Cspan class=\"hljs-string\">"<div class=\\"code-header\\">"\u003C/span>\n        html << \u003Cspan class=\"hljs-string\">"<h4 class=\\"code-title\\">\u003Cspan class=\"hljs-subst\">#{title}\u003C/span></h4>"\u003C/span>\n        html << \u003Cspan class=\"hljs-string\">"<button class=\\"copy-button\\" onclick=\\"copyJekyllCode(this)\\">Copy</button>"\u003C/span>\n        html << \u003Cspan class=\"hljs-string\">"</div>"\u003C/span>\n      \u003Cspan class=\"hljs-keyword\">end\u003C/span>\n      \n      html << \u003Cspan class=\"hljs-string\">'<div class="code-container">'\u003C/span>\n      html << \u003Cspan class=\"hljs-string\">'<div class="line-numbers">'\u003C/span>\n      \n      \u003Cspan class=\"hljs-comment\"># Generate line numbers\u003C/span>\n      lines.each_with_index \u003Cspan class=\"hljs-keyword\">do\u003C/span> |\u003Cspan class=\"hljs-params\">line, index\u003C/span>|\n        line_num = start_line + index\n        css_classes = [\u003Cspan class=\"hljs-string\">'line-number'\u003C/span>]\n        css_classes << \u003Cspan class=\"hljs-string\">'highlighted'\u003C/span> \u003Cspan class=\"hljs-keyword\">if\u003C/span> highlight_lines.\u003Cspan class=\"hljs-keyword\">include\u003C/span>?(line_num)\n        \n        html << \u003Cspan class=\"hljs-string\">"<div class=\\"\u003Cspan class=\"hljs-subst\">#{css_classes.join(\u003Cspan class=\"hljs-string\">' '\u003C/span>)}\u003C/span>\\" data-line=\\"\u003Cspan class=\"hljs-subst\">#{line_num}\u003C/span>\\">\u003Cspan class=\"hljs-subst\">#{line_num}\u003C/span></div>"\u003C/span>\n      \u003Cspan class=\"hljs-keyword\">end\u003C/span>\n      \n      html << \u003Cspan class=\"hljs-string\">'</div>'\u003C/span>\n      html << \u003Cspan class=\"hljs-string\">"<div class=\\"code-content\\">"\u003C/span>\n      html << \u003Cspan class=\"hljs-string\">"<pre><code class=\\"language-\u003Cspan class=\"hljs-subst\">#{language}\u003C/span>\\">\u003Cspan class=\"hljs-subst\">#{\u003Cspan class=\"hljs-title class_\">Jekyll\u003C/span>\u003Cspan class=\"hljs-symbol\">:\u003C/span>\u003Cspan class=\"hljs-symbol\">:Utils\u003C/span>.xml_escape(code_content)}\u003C/span></code></pre>"\u003C/span>\n      html << \u003Cspan class=\"hljs-string\">"</div>"\u003C/span>\n      html << \u003Cspan class=\"hljs-string\">'</div>'\u003C/span>\n      html << \u003Cspan class=\"hljs-string\">'</div>'\u003C/span>\n      \n      \u003Cspan class=\"hljs-comment\"># Add JavaScript for copy functionality\u003C/span>\n      html << generate_copy_script\n      \n      html.join(\u003Cspan class=\"hljs-string\">"\\n"\u003C/span>)\n    \u003Cspan class=\"hljs-keyword\">end\u003C/span>\n    \n    \u003Cspan class=\"hljs-keyword\">def\u003C/span> \u003Cspan class=\"hljs-title function_\">generate_copy_script\u003C/span>\n      \u003Cspan class=\"hljs-string\"><<~JAVASCRIPT\n      <script>\n      function copyJekyllCode(button) {\n          const codeBlock = button.closest('.jekyll-line-numbered-code');\n          const codeContent = codeBlock.querySelector('code');\n          \n          navigator.clipboard.writeText(codeContent.textContent).then(() => {\n              button.textContent = 'Copied!';\n              setTimeout(() => button.textContent = 'Copy', 2000);\n          }).catch(err => {\n              console.error('Copy failed:', err);\n              button.textContent = 'Error';\n              setTimeout(() => button.textContent = 'Copy', 2000);\n          });\n      }\n      </script>\n      JAVASCRIPT\u003C/span>\n    \u003Cspan class=\"hljs-keyword\">end\u003C/span>\n  \u003Cspan class=\"hljs-keyword\">end\u003C/span>\n\u003Cspan class=\"hljs-keyword\">end\u003C/span>\n\n\u003Cspan class=\"hljs-title class_\">Liquid\u003C/span>\u003Cspan class=\"hljs-symbol\">:\u003C/span>\u003Cspan class=\"hljs-symbol\">:Template\u003C/span>.register_tag(\u003Cspan class=\"hljs-string\">'line_numbers'\u003C/span>, \u003Cspan class=\"hljs-title class_\">Jekyll\u003C/span>\u003Cspan class=\"hljs-symbol\">:\u003C/span>\u003Cspan class=\"hljs-symbol\">:LineNumbersTag\u003C/span>)\n\u003C/code>\u003C/pre>\u003Cp>\u003Cstrong>Usage in Jekyll posts:\u003C/strong>\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">\u003Cspan class=\"hljs-section\">## Authentication System Implementation\u003C/span>\n\n{% line\u003Cspan class=\"hljs-emphasis\">_numbers language="typescript" title="User Authentication Service" start="1" highlight="8,15-18,25" %}\ninterface AuthenticationConfig {\n    tokenExpiry: number;\n    maxAttempts: number;\n    lockoutDuration: number;\n    secretKey: string;\n}\n\nclass AuthService {\n    private config: AuthenticationConfig;\n    private failedAttempts = new Map\u003Cspan class=\"language-xml\"><string, number>\u003C/span>();\n    private lockedAccounts = new Map\u003Cspan class=\"language-xml\"><string, Date>\u003C/span>();\n    \n    constructor(config: AuthenticationConfig) {\n        this.config = config;\n        this.validateConfiguration();\n    }\n    \n    async authenticate(email: string, password: string): Promise\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">AuthResult\u003C/span>>\u003C/span>\u003C/span> {\n        // Check account lock status\n        if (this.isAccountLocked(email)) {\n            throw new Error('Account temporarily locked');\n        }\n        \n        try {\n            // Validate credentials\n            const user = await this.validateUser(email, password);\n            if (!user) {\n                this.recordFailedAttempt(email);\n                throw new Error('Invalid credentials');\n            }\n            \n            // Generate token and return success\n            const token = this.generateToken(user);\n            this.clearFailedAttempts(email);\n            \n            return {\n                success: true,\n                token,\n                user: this.sanitizeUser(user)\n            };\n            \n        } catch (error) {\n            this.logger.error('Authentication failed:', error);\n            throw error;\n        }\n    }\n}\n{% endline_\u003C/span>numbers %}\n\u003C/code>\u003C/pre>\u003Ch2 id=\"accessibility-and-screen-reader-support\">Accessibility and Screen Reader Support\u003C/h2>\n\u003Ch3 id=\"aria-labels-and-semantic-markup\">ARIA Labels and Semantic Markup\u003C/h3>\n\u003Cp>Ensure line numbers are accessible to all users:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-html\">\u003Cspan class=\"hljs-comment\"><!-- Accessible line-numbered code block -->\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"accessible-code-block"\u003C/span> \n     \u003Cspan class=\"hljs-attr\">role\u003C/span>=\u003Cspan class=\"hljs-string\">"region"\u003C/span> \n     \u003Cspan class=\"hljs-attr\">aria-label\u003C/span>=\u003Cspan class=\"hljs-string\">"Code example with line numbers"\u003C/span>>\u003C/span>\n    \n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"code-header"\u003C/span> \u003Cspan class=\"hljs-attr\">role\u003C/span>=\u003Cspan class=\"hljs-string\">"banner"\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">h3\u003C/span> \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"code-title-1"\u003C/span>>\u003C/span>Python Data Validation Function\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">h3\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">button\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"copy-button"\u003C/span> \n                \u003Cspan class=\"hljs-attr\">aria-label\u003C/span>=\u003Cspan class=\"hljs-string\">"Copy code to clipboard"\u003C/span>\n                \u003Cspan class=\"hljs-attr\">aria-describedby\u003C/span>=\u003Cspan class=\"hljs-string\">"code-title-1"\u003C/span>>\u003C/span>\n            Copy\n        \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">button\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n    \n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"code-container"\u003C/span> \u003Cspan class=\"hljs-attr\">role\u003C/span>=\u003Cspan class=\"hljs-string\">"main"\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-comment\"><!-- Line numbers are decorative and hidden from screen readers -->\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"line-numbers"\u003C/span> \u003Cspan class=\"hljs-attr\">aria-hidden\u003C/span>=\u003Cspan class=\"hljs-string\">"true"\u003C/span> \u003Cspan class=\"hljs-attr\">role\u003C/span>=\u003Cspan class=\"hljs-string\">"presentation"\u003C/span>>\u003C/span>\n            \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"line-number"\u003C/span>>\u003C/span>1\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n            \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"line-number"\u003C/span>>\u003C/span>2\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n            \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"line-number"\u003C/span>>\u003C/span>3\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n            \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"line-number highlighted"\u003C/span> \u003Cspan class=\"hljs-attr\">aria-label\u003C/span>=\u003Cspan class=\"hljs-string\">"Line 4: Important line"\u003C/span>>\u003C/span>4\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n            \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"line-number"\u003C/span>>\u003C/span>5\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n        \n        \u003Cspan class=\"hljs-comment\"><!-- Code content with proper labeling -->\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">pre\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"code-content"\u003C/span> \n             \u003Cspan class=\"hljs-attr\">role\u003C/span>=\u003Cspan class=\"hljs-string\">"code"\u003C/span>\n             \u003Cspan class=\"hljs-attr\">aria-labelledby\u003C/span>=\u003Cspan class=\"hljs-string\">"code-title-1"\u003C/span>\n             \u003Cspan class=\"hljs-attr\">tabindex\u003C/span>=\u003Cspan class=\"hljs-string\">"0"\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">code\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"language-python"\u003C/span>>\u003C/span>def validate_email(email: str) -> bool:\n    """Validate email address format and domain"""\n    if not email or '@' not in email:\n        return False  # Basic format check\n    \n    username, domain = email.rsplit('@', 1)\n    return len(username) > 0 and '.' in domain\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">code\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">pre\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n    \n    \u003Cspan class=\"hljs-comment\"><!-- Screen reader instructions -->\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"sr-only"\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">p\u003C/span>>\u003C/span>This code block shows a Python function for email validation. \n           Use arrow keys to navigate through the code. \n           Line 4 contains the main validation logic.\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">p\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch3 id=\"css-for-screen-reader-support\">CSS for Screen Reader Support\u003C/h3>\n\u003Cpre>\u003Ccode class=\"hljs language-css\">\u003Cspan class=\"hljs-comment\">/* Screen reader and accessibility support */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.sr-only\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">position\u003C/span>: absolute;\n    \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">height\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: -\u003Cspan class=\"hljs-number\">1px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">overflow\u003C/span>: hidden;\n    \u003Cspan class=\"hljs-attribute\">clip\u003C/span>: \u003Cspan class=\"hljs-built_in\">rect\u003C/span>(\u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-number\">0\u003C/span>);\n    \u003Cspan class=\"hljs-attribute\">white-space\u003C/span>: nowrap;\n    \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Focus styles for keyboard navigation */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.accessible-code-block\u003C/span> \u003Cspan class=\"hljs-selector-class\">.code-content\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:focus\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">outline\u003C/span>: \u003Cspan class=\"hljs-number\">2px\u003C/span> solid \u003Cspan class=\"hljs-number\">#007acc\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">outline-offset\u003C/span>: \u003Cspan class=\"hljs-number\">2px\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.accessible-code-block\u003C/span> \u003Cspan class=\"hljs-selector-class\">.copy-button\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:focus\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">outline\u003C/span>: \u003Cspan class=\"hljs-number\">2px\u003C/span> solid \u003Cspan class=\"hljs-number\">#007acc\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">outline-offset\u003C/span>: \u003Cspan class=\"hljs-number\">2px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-number\">#005a9e\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* High contrast mode support */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> (\u003Cspan class=\"hljs-attribute\">prefers-contrast\u003C/span>: high) {\n    \u003Cspan class=\"hljs-selector-class\">.line-numbers\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">border-right\u003C/span>: \u003Cspan class=\"hljs-number\">2px\u003C/span> solid;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.line-number\u003C/span>\u003Cspan class=\"hljs-selector-class\">.highlighted\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-number\">#ffff00\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#000000\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: bold;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.code-content\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid;\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">/* Reduced motion support */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> (\u003Cspan class=\"hljs-attribute\">prefers-reduced-motion\u003C/span>: reduce) {\n    \u003Cspan class=\"hljs-selector-class\">.copy-button\u003C/span>,\n    \u003Cspan class=\"hljs-selector-class\">.line-number\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">transition\u003C/span>: none;\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">/* Font size preferences */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> (\u003Cspan class=\"hljs-attribute\">prefers-font-size\u003C/span>: large) {\n    \u003Cspan class=\"hljs-selector-class\">.accessible-code-block\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">1.2em\u003C/span>;\n    }\n}\n\u003C/code>\u003C/pre>\u003Ch2 id=\"performance-optimization-techniques\">Performance Optimization Techniques\u003C/h2>\n\u003Ch3 id=\"lazy-loading-for-large-code-blocks\">Lazy Loading for Large Code Blocks\u003C/h3>\n\u003Cp>Implement efficient rendering for extensive code examples:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-javascript\">\u003Cspan class=\"hljs-comment\">// Performance-optimized line number rendering\u003C/span>\n\u003Cspan class=\"hljs-keyword\">class\u003C/span> \u003Cspan class=\"hljs-title class_\">OptimizedLineNumbers\u003C/span> {\n    \u003Cspan class=\"hljs-title function_\">constructor\u003C/span>(\u003Cspan class=\"hljs-params\">options = {}\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span> = {\n            \u003Cspan class=\"hljs-attr\">virtualScrollThreshold\u003C/span>: options.\u003Cspan class=\"hljs-property\">virtualScrollThreshold\u003C/span> || \u003Cspan class=\"hljs-number\">100\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">renderBuffer\u003C/span>: options.\u003Cspan class=\"hljs-property\">renderBuffer\u003C/span> || \u003Cspan class=\"hljs-number\">10\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">debounceDelay\u003C/span>: options.\u003Cspan class=\"hljs-property\">debounceDelay\u003C/span> || \u003Cspan class=\"hljs-number\">16\u003C/span>,\n            ...options\n        };\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">intersectionObserver\u003C/span> = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">IntersectionObserver\u003C/span>(\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">handleIntersection\u003C/span>.\u003Cspan class=\"hljs-title function_\">bind\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>),\n            { \u003Cspan class=\"hljs-attr\">threshold\u003C/span>: \u003Cspan class=\"hljs-number\">0.1\u003C/span> }\n        );\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">resizeObserver\u003C/span> = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">ResizeObserver\u003C/span>(\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">debounce\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">handleResize\u003C/span>.\u003Cspan class=\"hljs-title function_\">bind\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>), \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">debounceDelay\u003C/span>)\n        );\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">init\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">init\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Process existing code blocks\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'pre code'\u003C/span>).\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">codeElement\u003C/span> =>\u003C/span> {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">processCodeBlock\u003C/span>(codeElement);\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// Watch for dynamically added code blocks\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">setupMutationObserver\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">processCodeBlock\u003C/span>(\u003Cspan class=\"hljs-params\">codeElement\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> lines = codeElement.\u003Cspan class=\"hljs-property\">textContent\u003C/span>.\u003Cspan class=\"hljs-title function_\">split\u003C/span>(\u003Cspan class=\"hljs-string\">'\\n'\u003C/span>);\n        \n        \u003Cspan class=\"hljs-comment\">// Use virtual scrolling for large code blocks\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (lines.\u003Cspan class=\"hljs-property\">length\u003C/span> > \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">virtualScrollThreshold\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">createVirtualScrollCodeBlock\u003C/span>(codeElement, lines);\n        } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">createStaticCodeBlock\u003C/span>(codeElement, lines);\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">createVirtualScrollCodeBlock\u003C/span>(\u003Cspan class=\"hljs-params\">codeElement, lines\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> wrapper = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n        wrapper.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'virtual-scroll-code-block'\u003C/span>;\n        wrapper.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">cssText\u003C/span> = \u003Cspan class=\"hljs-string\">`\n            height: 400px;\n            overflow: auto;\n            position: relative;\n            border: 1px solid #ddd;\n            border-radius: 4px;\n        `\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> viewport = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n        viewport.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'virtual-viewport'\u003C/span>;\n        viewport.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">cssText\u003C/span> = \u003Cspan class=\"hljs-string\">`\n            height: \u003Cspan class=\"hljs-subst\">${lines.length * \u003Cspan class=\"hljs-number\">20\u003C/span>}\u003C/span>px;\n            position: relative;\n        `\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> visibleArea = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n        visibleArea.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'visible-area'\u003C/span>;\n        visibleArea.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">cssText\u003C/span> = \u003Cspan class=\"hljs-string\">`\n            position: absolute;\n            top: 0;\n            left: 0;\n            right: 0;\n            display: flex;\n        `\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> lineNumbers = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n        lineNumbers.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'virtual-line-numbers'\u003C/span>;\n        lineNumbers.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">cssText\u003C/span> = \u003Cspan class=\"hljs-string\">`\n            width: 60px;\n            background: #f5f5f5;\n            border-right: 1px solid #ddd;\n            font-family: monospace;\n            font-size: 12px;\n            text-align: right;\n            padding: 0 8px;\n        `\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> codeContent = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'pre'\u003C/span>);\n        codeContent.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'virtual-code-content'\u003C/span>;\n        codeContent.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">cssText\u003C/span> = \u003Cspan class=\"hljs-string\">`\n            flex: 1;\n            margin: 0;\n            padding: 0 12px;\n            font-family: monospace;\n            font-size: 14px;\n            line-height: 20px;\n            background: white;\n            overflow: hidden;\n        `\u003C/span>;\n        \n        visibleArea.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(lineNumbers);\n        visibleArea.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(codeContent);\n        viewport.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(visibleArea);\n        wrapper.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(viewport);\n        \n        \u003Cspan class=\"hljs-comment\">// Virtual scrolling logic\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> startIndex = \u003Cspan class=\"hljs-number\">0\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> visibleLines = \u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">ceil\u003C/span>(\u003Cspan class=\"hljs-number\">400\u003C/span> / \u003Cspan class=\"hljs-number\">20\u003C/span>) + \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">renderBuffer\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> \u003Cspan class=\"hljs-title function_\">updateVisible\u003C/span> = (\u003Cspan class=\"hljs-params\">\u003C/span>) => {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> scrollTop = wrapper.\u003Cspan class=\"hljs-property\">scrollTop\u003C/span>;\n            startIndex = \u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">max\u003C/span>(\u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">floor\u003C/span>(scrollTop / \u003Cspan class=\"hljs-number\">20\u003C/span>) - \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">renderBuffer\u003C/span>);\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> endIndex = \u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">min\u003C/span>(lines.\u003Cspan class=\"hljs-property\">length\u003C/span>, startIndex + visibleLines);\n            \n            \u003Cspan class=\"hljs-comment\">// Update line numbers\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> visibleLineNumbers = [];\n            \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">let\u003C/span> i = startIndex; i < endIndex; i++) {\n                visibleLineNumbers.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(\u003Cspan class=\"hljs-string\">`<div style="height: 20px; line-height: 20px;">\u003Cspan class=\"hljs-subst\">${i + \u003Cspan class=\"hljs-number\">1\u003C/span>}\u003C/span></div>`\u003C/span>);\n            }\n            lineNumbers.\u003Cspan class=\"hljs-property\">innerHTML\u003C/span> = visibleLineNumbers.\u003Cspan class=\"hljs-title function_\">join\u003C/span>(\u003Cspan class=\"hljs-string\">''\u003C/span>);\n            \n            \u003Cspan class=\"hljs-comment\">// Update code content\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> visibleCode = lines.\u003Cspan class=\"hljs-title function_\">slice\u003C/span>(startIndex, endIndex);\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> codeHTML = visibleCode.\u003Cspan class=\"hljs-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">line, index\u003C/span>) =>\u003C/span> \n                \u003Cspan class=\"hljs-string\">`<div style="height: 20px; line-height: 20px;" data-line="\u003Cspan class=\"hljs-subst\">${startIndex + index + \u003Cspan class=\"hljs-number\">1\u003C/span>}\u003C/span>">\u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.escapeHtml(line)}\u003C/span></div>`\u003C/span>\n            ).\u003Cspan class=\"hljs-title function_\">join\u003C/span>(\u003Cspan class=\"hljs-string\">''\u003C/span>);\n            codeContent.\u003Cspan class=\"hljs-property\">innerHTML\u003C/span> = \u003Cspan class=\"hljs-string\">`<code>\u003Cspan class=\"hljs-subst\">${codeHTML}\u003C/span></code>`\u003C/span>;\n            \n            \u003Cspan class=\"hljs-comment\">// Position the visible area\u003C/span>\n            visibleArea.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">transform\u003C/span> = \u003Cspan class=\"hljs-string\">`translateY(\u003Cspan class=\"hljs-subst\">${startIndex * \u003Cspan class=\"hljs-number\">20\u003C/span>}\u003C/span>px)`\u003C/span>;\n        };\n        \n        \u003Cspan class=\"hljs-comment\">// Throttled scroll handler\u003C/span>\n        wrapper.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'scroll'\u003C/span>, \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">throttle\u003C/span>(updateVisible, \u003Cspan class=\"hljs-number\">16\u003C/span>));\n        \n        \u003Cspan class=\"hljs-comment\">// Initial render\u003C/span>\n        \u003Cspan class=\"hljs-title function_\">updateVisible\u003C/span>();\n        \n        \u003Cspan class=\"hljs-comment\">// Replace original code block\u003C/span>\n        codeElement.\u003Cspan class=\"hljs-title function_\">closest\u003C/span>(\u003Cspan class=\"hljs-string\">'pre'\u003C/span>).\u003Cspan class=\"hljs-property\">parentNode\u003C/span>.\u003Cspan class=\"hljs-title function_\">replaceChild\u003C/span>(wrapper, codeElement.\u003Cspan class=\"hljs-title function_\">closest\u003C/span>(\u003Cspan class=\"hljs-string\">'pre'\u003C/span>));\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">createStaticCodeBlock\u003C/span>(\u003Cspan class=\"hljs-params\">codeElement, lines\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Standard static line numbers for smaller code blocks\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> wrapper = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n        wrapper.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'static-line-numbered-code'\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> container = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n        container.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'line-numbered-container'\u003C/span>;\n        container.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">display\u003C/span> = \u003Cspan class=\"hljs-string\">'flex'\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> lineNumbers = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n        lineNumbers.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'static-line-numbers'\u003C/span>;\n        lineNumbers.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">cssText\u003C/span> = \u003Cspan class=\"hljs-string\">`\n            background: #f8f8f8;\n            border-right: 1px solid #ddd;\n            padding: 1rem 0.5rem;\n            text-align: right;\n            user-select: none;\n            font-family: monospace;\n            font-size: 12px;\n            line-height: 1.4;\n            color: #666;\n            min-width: 2.5rem;\n        `\u003C/span>;\n        \n        \u003Cspan class=\"hljs-comment\">// Generate line numbers efficiently\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> lineNumberHTML = lines.\u003Cspan class=\"hljs-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">_, index\u003C/span>) =>\u003C/span> \n            \u003Cspan class=\"hljs-string\">`<div class="line-num">\u003Cspan class=\"hljs-subst\">${index + \u003Cspan class=\"hljs-number\">1\u003C/span>}\u003C/span></div>`\u003C/span>\n        ).\u003Cspan class=\"hljs-title function_\">join\u003C/span>(\u003Cspan class=\"hljs-string\">''\u003C/span>);\n        lineNumbers.\u003Cspan class=\"hljs-property\">innerHTML\u003C/span> = lineNumberHTML;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> codeContainer = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n        codeContainer.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'static-code-content'\u003C/span>;\n        codeContainer.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">cssText\u003C/span> = \u003Cspan class=\"hljs-string\">`\n            flex: 1;\n            overflow-x: auto;\n        `\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> pre = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'pre'\u003C/span>);\n        pre.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">cssText\u003C/span> = \u003Cspan class=\"hljs-string\">`\n            margin: 0;\n            padding: 1rem;\n            background: white;\n            font-family: monospace;\n            font-size: 14px;\n            line-height: 1.4;\n        `\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> code = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'code'\u003C/span>);\n        code.\u003Cspan class=\"hljs-property\">className\u003C/span> = codeElement.\u003Cspan class=\"hljs-property\">className\u003C/span>;\n        code.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = codeElement.\u003Cspan class=\"hljs-property\">textContent\u003C/span>;\n        \n        pre.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(code);\n        codeContainer.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(pre);\n        container.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(lineNumbers);\n        container.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(codeContainer);\n        wrapper.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(container);\n        \n        \u003Cspan class=\"hljs-comment\">// Replace original\u003C/span>\n        codeElement.\u003Cspan class=\"hljs-title function_\">closest\u003C/span>(\u003Cspan class=\"hljs-string\">'pre'\u003C/span>).\u003Cspan class=\"hljs-property\">parentNode\u003C/span>.\u003Cspan class=\"hljs-title function_\">replaceChild\u003C/span>(wrapper, codeElement.\u003Cspan class=\"hljs-title function_\">closest\u003C/span>(\u003Cspan class=\"hljs-string\">'pre'\u003C/span>));\n        \n        \u003Cspan class=\"hljs-comment\">// Apply syntax highlighting if available\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-property\">Prism\u003C/span> && code.\u003Cspan class=\"hljs-property\">className\u003C/span>.\u003Cspan class=\"hljs-title function_\">includes\u003C/span>(\u003Cspan class=\"hljs-string\">'language-'\u003C/span>)) {\n            \u003Cspan class=\"hljs-title class_\">Prism\u003C/span>.\u003Cspan class=\"hljs-title function_\">highlightElement\u003C/span>(code);\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">handleIntersection\u003C/span>(\u003Cspan class=\"hljs-params\">entries\u003C/span>) {\n        entries.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">entry\u003C/span> =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (entry.\u003Cspan class=\"hljs-property\">isIntersecting\u003C/span>) {\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> codeBlock = entry.\u003Cspan class=\"hljs-property\">target\u003C/span>;\n                \u003Cspan class=\"hljs-comment\">// Lazy load syntax highlighting or other features\u003C/span>\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">enhanceVisibleCodeBlock\u003C/span>(codeBlock);\n            }\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">enhanceVisibleCodeBlock\u003C/span>(\u003Cspan class=\"hljs-params\">codeBlock\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Add syntax highlighting, copy buttons, etc. only when visible\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> codeElement = codeBlock.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'code'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (codeElement && \u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-property\">Prism\u003C/span> && !codeElement.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">contains\u003C/span>(\u003Cspan class=\"hljs-string\">'highlighted'\u003C/span>)) {\n            \u003Cspan class=\"hljs-title class_\">Prism\u003C/span>.\u003Cspan class=\"hljs-title function_\">highlightElement\u003C/span>(codeElement);\n            codeElement.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">add\u003C/span>(\u003Cspan class=\"hljs-string\">'highlighted'\u003C/span>);\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">setupMutationObserver\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> observer = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">MutationObserver\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">mutations\u003C/span> =>\u003C/span> {\n            mutations.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">mutation\u003C/span> =>\u003C/span> {\n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (mutation.\u003Cspan class=\"hljs-property\">type\u003C/span> === \u003Cspan class=\"hljs-string\">'childList'\u003C/span>) {\n                    mutation.\u003Cspan class=\"hljs-property\">addedNodes\u003C/span>.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">node\u003C/span> =>\u003C/span> {\n                        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (node.\u003Cspan class=\"hljs-property\">nodeType\u003C/span> === \u003Cspan class=\"hljs-title class_\">Node\u003C/span>.\u003Cspan class=\"hljs-property\">ELEMENT_NODE\u003C/span>) {\n                            \u003Cspan class=\"hljs-keyword\">const\u003C/span> codeElements = node.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'pre code'\u003C/span>);\n                            codeElements.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">codeElement\u003C/span> =>\u003C/span> {\n                                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">processCodeBlock\u003C/span>(codeElement);\n                            });\n                        }\n                    });\n                }\n            });\n        });\n        \n        observer.\u003Cspan class=\"hljs-title function_\">observe\u003C/span>(\u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-property\">body\u003C/span>, {\n            \u003Cspan class=\"hljs-attr\">childList\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">subtree\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>\n        });\n    }\n    \n    \u003Cspan class=\"hljs-comment\">// Utility functions\u003C/span>\n    \u003Cspan class=\"hljs-title function_\">debounce\u003C/span>(\u003Cspan class=\"hljs-params\">func, delay\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> timeoutId;\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">...args\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-built_in\">clearTimeout\u003C/span>(timeoutId);\n            timeoutId = \u003Cspan class=\"hljs-built_in\">setTimeout\u003C/span>(\u003Cspan class=\"hljs-function\">() =>\u003C/span> func.\u003Cspan class=\"hljs-title function_\">apply\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>, args), delay);\n        };\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">throttle\u003C/span>(\u003Cspan class=\"hljs-params\">func, delay\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> lastCall = \u003Cspan class=\"hljs-number\">0\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">...args\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> now = \u003Cspan class=\"hljs-title class_\">Date\u003C/span>.\u003Cspan class=\"hljs-title function_\">now\u003C/span>();\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (now - lastCall >= delay) {\n                func.\u003Cspan class=\"hljs-title function_\">apply\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>, args);\n                lastCall = now;\n            }\n        };\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">escapeHtml\u003C/span>(\u003Cspan class=\"hljs-params\">text\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> div = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n        div.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = text;\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> div.\u003Cspan class=\"hljs-property\">innerHTML\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">handleResize\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Recalculate virtual scroll parameters on resize\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">updateVirtualScrollDimensions\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">updateVirtualScrollDimensions\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> virtualBlocks = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'.virtual-scroll-code-block'\u003C/span>);\n        virtualBlocks.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">block\u003C/span> =>\u003C/span> {\n            \u003Cspan class=\"hljs-comment\">// Recalculate visible area and update rendering\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> event = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Event\u003C/span>(\u003Cspan class=\"hljs-string\">'scroll'\u003C/span>);\n            block.\u003Cspan class=\"hljs-title function_\">dispatchEvent\u003C/span>(event);\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">destroy\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Cleanup observers\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">intersectionObserver\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">intersectionObserver\u003C/span>.\u003Cspan class=\"hljs-title function_\">disconnect\u003C/span>();\n        }\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">resizeObserver\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">resizeObserver\u003C/span>.\u003Cspan class=\"hljs-title function_\">disconnect\u003C/span>();\n        }\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">// Initialize optimized line numbers\u003C/span>\n\u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'DOMContentLoaded'\u003C/span>, \u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n    \u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-property\">optimizedLineNumbers\u003C/span> = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">OptimizedLineNumbers\u003C/span>({\n        \u003Cspan class=\"hljs-attr\">virtualScrollThreshold\u003C/span>: \u003Cspan class=\"hljs-number\">50\u003C/span>,\n        \u003Cspan class=\"hljs-attr\">renderBuffer\u003C/span>: \u003Cspan class=\"hljs-number\">5\u003C/span>,\n        \u003Cspan class=\"hljs-attr\">debounceDelay\u003C/span>: \u003Cspan class=\"hljs-number\">16\u003C/span>\n    });\n});\n\u003C/code>\u003C/pre>\u003Ch2 id=\"integration-with-documentation-workflows\">Integration with Documentation Workflows\u003C/h2>\n\u003Cp>Line numbers in code blocks work seamlessly with other advanced Markdown features to create comprehensive technical documentation. When combined with \u003Ca href=\"/blog/markdown-syntax-highlighting-complete-guide\">syntax highlighting\u003C/a>, line numbers enable precise code discussions while maintaining beautiful visual presentation of different programming languages.\u003C/p>\n\u003Cp>For complex documentation requiring both detailed code examples and structured explanations, line numbers integrate effectively with \u003Ca href=\"/blog/markdown-admonitions-callouts-complete-guide\">admonitions and callouts\u003C/a> to create comprehensive tutorials with clear visual organization and specific line references.\u003C/p>\n\u003Cp>When creating interactive documentation that includes both code examples and user tasks, line numbering complements \u003Ca href=\"/blog/markdown-task-lists-and-checkboxes-complete-guide\">task lists and checkboxes\u003C/a> by enabling readers to reference specific implementation steps while tracking their progress through development workflows.\u003C/p>\n\u003Ch2 id=\"troubleshooting-common-issues\">Troubleshooting Common Issues\u003C/h2>\n\u003Ch3 id=\"line-number-alignment-problems\">Line Number Alignment Problems\u003C/h3>\n\u003Cp>\u003Cstrong>Problem\u003C/strong>: Line numbers don't align properly with code content\u003C/p>\n\u003Cp>\u003Cstrong>Solutions\u003C/strong>:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-css\">\u003Cspan class=\"hljs-comment\">/* Fix alignment issues */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.line-numbers\u003C/span>, \u003Cspan class=\"hljs-selector-class\">.code-content\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">font-family\u003C/span>: \u003Cspan class=\"hljs-string\">'Monaco'\u003C/span>, \u003Cspan class=\"hljs-string\">'Menlo'\u003C/span>, \u003Cspan class=\"hljs-string\">'Consolas'\u003C/span>, monospace;\n    \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">14px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-number\">1.5\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-feature-settings\u003C/span>: normal;\n    \u003Cspan class=\"hljs-attribute\">font-variant-ligatures\u003C/span>: none;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Ensure consistent spacing */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.line-numbers\u003C/span> \u003Cspan class=\"hljs-selector-class\">.line-number\u003C/span>,\n\u003Cspan class=\"hljs-selector-class\">.code-content\u003C/span> \u003Cspan class=\"hljs-selector-class\">.code-line\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">height\u003C/span>: \u003Cspan class=\"hljs-number\">1.5em\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">box-sizing\u003C/span>: border-box;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Fix sub-pixel rendering issues */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.line-numbered-code\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">transform\u003C/span>: \u003Cspan class=\"hljs-built_in\">translateZ\u003C/span>(\u003Cspan class=\"hljs-number\">0\u003C/span>); \u003Cspan class=\"hljs-comment\">/* Force hardware acceleration */\u003C/span>\n}\n\u003C/code>\u003C/pre>\u003Ch3 id=\"performance-issues-with-large-files\">Performance Issues with Large Files\u003C/h3>\n\u003Cp>\u003Cstrong>Problem\u003C/strong>: Browser becomes sluggish with very long code files\u003C/p>\n\u003Cp>\u003Cstrong>Solutions\u003C/strong>:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-javascript\">\u003Cspan class=\"hljs-comment\">// Implement efficient rendering strategies\u003C/span>\n\u003Cspan class=\"hljs-keyword\">const\u003C/span> \u003Cspan class=\"hljs-variable constant_\">PERFORMANCE_THRESHOLDS\u003C/span> = {\n    \u003Cspan class=\"hljs-attr\">SMALL\u003C/span>: \u003Cspan class=\"hljs-number\">100\u003C/span>,    \u003Cspan class=\"hljs-comment\">// Lines - full rendering\u003C/span>\n    \u003Cspan class=\"hljs-attr\">MEDIUM\u003C/span>: \u003Cspan class=\"hljs-number\">500\u003C/span>,   \u003Cspan class=\"hljs-comment\">// Lines - chunked rendering  \u003C/span>\n    \u003Cspan class=\"hljs-attr\">LARGE\u003C/span>: \u003Cspan class=\"hljs-number\">1000\u003C/span>    \u003Cspan class=\"hljs-comment\">// Lines - virtual scrolling\u003C/span>\n};\n\n\u003Cspan class=\"hljs-keyword\">function\u003C/span> \u003Cspan class=\"hljs-title function_\">optimizeCodeBlock\u003C/span>(\u003Cspan class=\"hljs-params\">codeElement\u003C/span>) {\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> lineCount = codeElement.\u003Cspan class=\"hljs-property\">textContent\u003C/span>.\u003Cspan class=\"hljs-title function_\">split\u003C/span>(\u003Cspan class=\"hljs-string\">'\\n'\u003C/span>).\u003Cspan class=\"hljs-property\">length\u003C/span>;\n    \n    \u003Cspan class=\"hljs-keyword\">if\u003C/span> (lineCount < \u003Cspan class=\"hljs-variable constant_\">PERFORMANCE_THRESHOLDS\u003C/span>.\u003Cspan class=\"hljs-property\">SMALL\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Full static rendering\u003C/span>\n        \u003Cspan class=\"hljs-title function_\">renderStaticLineNumbers\u003C/span>(codeElement);\n    } \u003Cspan class=\"hljs-keyword\">else\u003C/span> \u003Cspan class=\"hljs-keyword\">if\u003C/span> (lineCount < \u003Cspan class=\"hljs-variable constant_\">PERFORMANCE_THRESHOLDS\u003C/span>.\u003Cspan class=\"hljs-property\">MEDIUM\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Chunked rendering with intersection observer\u003C/span>\n        \u003Cspan class=\"hljs-title function_\">renderChunkedLineNumbers\u003C/span>(codeElement);\n    } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n        \u003Cspan class=\"hljs-comment\">// Virtual scrolling for maximum performance\u003C/span>\n        \u003Cspan class=\"hljs-title function_\">renderVirtualScrollLineNumbers\u003C/span>(codeElement);\n    }\n}\n\u003C/code>\u003C/pre>\u003Ch3 id=\"cross-browser-compatibility\">Cross-Browser Compatibility\u003C/h3>\n\u003Cp>\u003Cstrong>Problem\u003C/strong>: Line numbers display differently across browsers\u003C/p>\n\u003Cp>\u003Cstrong>Solutions\u003C/strong>:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-css\">\u003Cspan class=\"hljs-comment\">/* Cross-browser consistent line numbers */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.universal-line-numbers\u003C/span> {\n    \u003Cspan class=\"hljs-comment\">/* Reset browser defaults */\u003C/span>\n    \u003Cspan class=\"hljs-attribute\">box-sizing\u003C/span>: border-box;\n    -webkit-\u003Cspan class=\"hljs-attribute\">font-feature-settings\u003C/span>: \u003Cspan class=\"hljs-string\">"liga"\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-feature-settings\u003C/span>: \u003Cspan class=\"hljs-string\">"liga"\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    \n    \u003Cspan class=\"hljs-comment\">/* Consistent fonts across platforms */\u003C/span>\n    \u003Cspan class=\"hljs-attribute\">font-family\u003C/span>: \n        \u003Cspan class=\"hljs-string\">'SFMono-Regular'\u003C/span>,\n        \u003Cspan class=\"hljs-string\">'Monaco'\u003C/span>,\n        \u003Cspan class=\"hljs-string\">'Inconsolata'\u003C/span>,\n        \u003Cspan class=\"hljs-string\">'Roboto Mono'\u003C/span>,\n        \u003Cspan class=\"hljs-string\">'Source Code Pro'\u003C/span>,\n        \u003Cspan class=\"hljs-string\">'Menlo'\u003C/span>,\n        \u003Cspan class=\"hljs-string\">'Consolas'\u003C/span>,\n        \u003Cspan class=\"hljs-string\">'DejaVu Sans Mono'\u003C/span>,\n        monospace;\n    \n    \u003Cspan class=\"hljs-comment\">/* Disable text selection and interactions */\u003C/span>\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n    user-select: none;\n    \n    \u003Cspan class=\"hljs-comment\">/* Consistent text rendering */\u003C/span>\n    -webkit-\u003Cspan class=\"hljs-attribute\">font-smoothing\u003C/span>: antialiased;\n    -moz-osx-\u003Cspan class=\"hljs-attribute\">font-smoothing\u003C/span>: grayscale;\n    \u003Cspan class=\"hljs-attribute\">text-rendering\u003C/span>: optimizeLegibility;\n}\n\n\u003Cspan class=\"hljs-comment\">/* IE11 fallbacks */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> screen \u003Cspan class=\"hljs-keyword\">and\u003C/span> (\u003Cspan class=\"hljs-attribute\">-ms-high-contrast\u003C/span>: active), \n       screen \u003Cspan class=\"hljs-keyword\">and\u003C/span> (\u003Cspan class=\"hljs-attribute\">-ms-high-contrast\u003C/span>: none) {\n    \u003Cspan class=\"hljs-selector-class\">.universal-line-numbers\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">font-family\u003C/span>: \u003Cspan class=\"hljs-string\">'Consolas'\u003C/span>, monospace;\n    }\n}\n\u003C/code>\u003C/pre>\u003Ch2 id=\"seo-and-content-structure-benefits\">SEO and Content Structure Benefits\u003C/h2>\n\u003Ch3 id=\"enhanced-code-documentation-seo\">Enhanced Code Documentation SEO\u003C/h3>\n\u003Cp>Line numbers significantly improve technical content discoverability:\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>Precise Referencing\u003C/strong>: Enable specific line citations that improve content authority\u003C/li>\n\u003Cli>\u003Cstrong>Enhanced Navigation\u003C/strong>: Help search engines understand code structure and importance\u003C/li>\n\u003Cli>\u003Cstrong>Professional Presentation\u003C/strong>: Demonstrate attention to detail that builds content credibility\u003C/li>\n\u003Cli>\u003Cstrong>User Engagement\u003C/strong>: Longer time-on-page as users can easily navigate complex code examples\u003C/li>\n\u003C/ul>\n\u003Ch3 id=\"structured-data-for-code-examples\">Structured Data for Code Examples\u003C/h3>\n\u003Cpre>\u003Ccode class=\"hljs language-html\">\u003Cspan class=\"hljs-comment\"><!-- Enhanced markup for code blocks with line numbers -->\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">itemscope\u003C/span> \u003Cspan class=\"hljs-attr\">itemtype\u003C/span>=\u003Cspan class=\"hljs-string\">"https://schema.org/SoftwareSourceCode"\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"code-header"\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">h3\u003C/span> \u003Cspan class=\"hljs-attr\">itemprop\u003C/span>=\u003Cspan class=\"hljs-string\">"name"\u003C/span>>\u003C/span>User Authentication Implementation\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">h3\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">meta\u003C/span> \u003Cspan class=\"hljs-attr\">itemprop\u003C/span>=\u003Cspan class=\"hljs-string\">"programmingLanguage"\u003C/span> \u003Cspan class=\"hljs-attr\">content\u003C/span>=\u003Cspan class=\"hljs-string\">"TypeScript"\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">meta\u003C/span> \u003Cspan class=\"hljs-attr\">itemprop\u003C/span>=\u003Cspan class=\"hljs-string\">"codeRepository"\u003C/span> \u003Cspan class=\"hljs-attr\">content\u003C/span>=\u003Cspan class=\"hljs-string\">"https://github.com/example/auth-system"\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n    \n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"line-numbered-code"\u003C/span> \u003Cspan class=\"hljs-attr\">itemprop\u003C/span>=\u003Cspan class=\"hljs-string\">"text"\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"line-numbers"\u003C/span> \u003Cspan class=\"hljs-attr\">role\u003C/span>=\u003Cspan class=\"hljs-string\">"presentation"\u003C/span> \u003Cspan class=\"hljs-attr\">aria-hidden\u003C/span>=\u003Cspan class=\"hljs-string\">"true"\u003C/span>>\u003C/span>\n            \u003Cspan class=\"hljs-comment\"><!-- Line numbers -->\u003C/span>\n        \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">pre\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">code\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"language-typescript"\u003C/span>>\u003C/span>\n            \u003Cspan class=\"hljs-comment\"><!-- Code content with proper indentation -->\u003C/span>\n        \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">code\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">pre\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n    \n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">itemprop\u003C/span>=\u003Cspan class=\"hljs-string\">"description"\u003C/span>>\u003C/span>\n        Complete authentication system with error handling and token management.\n        Key implementation details on lines 15-28 and 35-42.\n    \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch2 id=\"conclusion\">Conclusion\u003C/h2>\n\u003Cp>Markdown line numbers transform code documentation from simple text blocks into professional, navigable technical resources that enhance both reader comprehension and collaborative development workflows. By mastering platform-specific implementations, CSS styling techniques, and JavaScript enhancements, you can create code documentation that not only presents information clearly but actively improves the developer experience.\u003C/p>\n\u003Cp>The key to successful line number implementation lies in choosing appropriate techniques for your content complexity, ensuring accessibility across all users and devices, and optimizing performance for varying code block sizes. Whether you're creating API documentation, tutorial content, or technical specifications, the techniques covered in this guide provide the foundation for professional code presentation that serves developers effectively.\u003C/p>\n\u003Cp>Remember to test line number implementations across different platforms and devices, consider performance implications for large code examples, and always prioritize accessibility in your styling choices. With proper implementation, line numbers become powerful tools for creating precise, professional technical documentation that enhances code comprehension and facilitates effective technical communication.\u003C/p>\n",[15,19,22,25,28,31,34,37,40,43,46,49],{"id":16,"text":17,"level":18},"why-use-line-numbers-in-code-blocks","Why Use Line Numbers in Code Blocks?",2,{"id":20,"text":21,"level":18},"platform-specific-line-number-implementations","Platform-Specific Line Number Implementations",{"id":23,"text":24,"level":18},"css-based-line-number-solutions","CSS-Based Line Number Solutions",{"id":26,"text":27,"level":18},"javascript-enhanced-line-numbers","JavaScript-Enhanced Line Numbers",{"id":29,"text":30,"level":18},"hugo-shortcode-implementation","Hugo Shortcode Implementation",{"id":32,"text":33,"level":18},"jekyll-plugin-implementation","Jekyll Plugin Implementation",{"id":35,"text":36,"level":18},"accessibility-and-screen-reader-support","Accessibility and Screen Reader Support",{"id":38,"text":39,"level":18},"performance-optimization-techniques","Performance Optimization Techniques",{"id":41,"text":42,"level":18},"integration-with-documentation-workflows","Integration with Documentation Workflows",{"id":44,"text":45,"level":18},"troubleshooting-common-issues","Troubleshooting Common Issues",{"id":47,"text":48,"level":18},"seo-and-content-structure-benefits","SEO and Content Structure Benefits",{"id":50,"text":51,"level":18},"conclusion","Conclusion",[],[54,62,70],{"slug":55,"title":56,"description":57,"excerpt":58,"date":59,"category":9,"author":10,"keywords":60,"readingMinutes":61},"how-to-add-line-numbers-to-code-blocks-in-markdown","How to Add Line Numbers to Code Blocks in Markdown: Complete Guide","Learn how to display line numbers in Markdown code blocks using GitHub, Jekyll, Hugo, and other platforms. Includes syntax highlighting and customization options.","Line numbers in code blocks significantly improve code readability and make it easier to reference specific lines in documentation, tutorials, and code reviews. While standard Markdown doesn't…","2025-08-13","markdown line numbers, code block line numbers, markdown syntax highlighting, numbered code blocks, markdown programming examples",6,{"slug":63,"title":64,"description":65,"excerpt":66,"date":67,"category":9,"author":10,"keywords":68,"readingMinutes":69},"markdown-nested-code-blocks-and-escaping-guide","Markdown Nested Code Blocks and Escaping: Complete Guide for Complex Documentation","Master advanced Markdown code block techniques including nested blocks, proper escaping, and handling complex code examples in documentation. Learn best practices for technical writing.","When creating technical documentation with Markdown, one of the most challenging aspects is properly displaying complex code examples, especially when you need to show how to write Markdown code…","2025-10-15","markdown nested code blocks, markdown code escaping, nested backticks markdown, markdown documentation, code block syntax, markdown technical writing, complex code examples",4,{"slug":71,"title":72,"description":73,"excerpt":74,"date":75,"category":9,"author":10,"keywords":76,"readingMinutes":77},"markdown-code-escaping-and-nested-blocks-complete-guide","Markdown Code Escaping and Nested Blocks: Complete Guide for Complex Code Documentation","Master advanced Markdown code escaping techniques for documenting nested code blocks, Liquid templates, and complex syntax patterns. Learn proper escaping strategies, avoid rendering conflicts, and create comprehensive technical documentation.","Advanced Markdown code escaping and nested block techniques enable sophisticated technical documentation that accurately represents complex code structures, template systems, and multi-layered…","2025-09-28","markdown code escaping, nested code blocks, liquid template escaping, markdown raw tags, code documentation, syntax escaping, nested markdown, code block troubleshooting",13,1792184941384]