[{"data":1,"prerenderedAt":63},["Reactive",2],{"blog-post-markdown-html-integration-mixed-content-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":37,"related":38},"markdown-html-integration-mixed-content-complete-guide","Markdown HTML Integration and Mixed Content: Complete Guide to Seamless HTML-Markdown Workflows and Advanced Content Creation","Master HTML integration in Markdown documents. Learn to combine HTML and Markdown syntax, create custom components, handle complex layouts, and build sophisticated content systems that leverage both markup languages effectively.","Markdown HTML integration and mixed content systems enable sophisticated document creation through seamless combination of Markdown's simplicity with HTML's power and flexibility. By implementing…","2026-01-01","Tutorial","Matthew Rathbone","markdown html integration, mixed content markdown, html in markdown, custom html components, markdown html workflow, advanced markdown formatting, html markdown combination, custom content blocks",26,"\u003Cp>Markdown HTML integration and mixed content systems enable sophisticated document creation through seamless combination of Markdown's simplicity with HTML's power and flexibility. By implementing strategic HTML integration patterns, developing custom component systems, and creating robust mixed-content workflows, technical writers and developers can build comprehensive documentation platforms that leverage the best aspects of both markup languages while maintaining readability, accessibility, and maintainability across complex content architectures.\u003C/p>\n\u003Ch2 id=\"why-master-html-integration-in-markdown\">Why Master HTML Integration in Markdown?\u003C/h2>\n\u003Cp>Advanced HTML-Markdown integration provides essential capabilities for modern content creation:\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>Enhanced Layout Control\u003C/strong>: Create complex layouts and responsive designs beyond Markdown's limitations\u003C/li>\n\u003Cli>\u003Cstrong>Custom Component Systems\u003C/strong>: Build reusable HTML components integrated seamlessly with Markdown content\u003C/li>\n\u003Cli>\u003Cstrong>Interactive Content Creation\u003C/strong>: Embed dynamic elements, forms, and JavaScript-powered interactions\u003C/li>\n\u003Cli>\u003Cstrong>Accessibility Enhancement\u003C/strong>: Implement proper semantic HTML and ARIA attributes for inclusive design\u003C/li>\n\u003Cli>\u003Cstrong>Platform Consistency\u003C/strong>: Ensure consistent rendering across different Markdown processors and output formats\u003C/li>\n\u003C/ul>\n\u003Ch2 id=\"foundation-html-integration-principles\">Foundation HTML Integration Principles\u003C/h2>\n\u003Ch3 id=\"basic-html-in-markdown-patterns\">Basic HTML in Markdown Patterns\u003C/h3>\n\u003Cp>Understanding how HTML and Markdown interact in various processors:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">\u003Cspan class=\"hljs-section\"># Basic HTML Integration Examples\u003C/span>\n\n\u003Cspan class=\"hljs-section\">## Inline HTML Elements\u003C/span>\n\nStandard Markdown text with \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span>\u003C/span>inline HTML emphasis\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span>\u003C/span> and \n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">em\u003C/span>>\u003C/span>\u003C/span>styled elements\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">em\u003C/span>>\u003C/span>\u003C/span> integrated naturally within paragraphs.\n\nYou can use \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">code\u003C/span>>\u003C/span>\u003C/span>inline code elements\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">code\u003C/span>>\u003C/span>\u003C/span> alongside \u003Cspan class=\"hljs-code\">`markdown code`\u003C/span> \nfor different styling effects and semantic meaning.\n\nCustom styling with \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"highlight"\u003C/span>>\u003C/span>\u003C/span>CSS classes\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">span\u003C/span>>\u003C/span>\u003C/span> and \n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">mark\u003C/span>>\u003C/span>\u003C/span>semantic HTML elements\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">mark\u003C/span>>\u003C/span>\u003C/span> for enhanced content presentation.\n\n\u003Cspan class=\"hljs-section\">## Block-Level HTML Integration\u003C/span>\n\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"info-box"\u003C/span>>\u003C/span>\u003C/span>\n\u003Cspan class=\"hljs-code\">    <h3>Information Block</h3>\n    <p>This is a complete HTML block integrated within Markdown content. \n    Standard Markdown formatting like **bold text** and *italic text* \n    still works within HTML blocks in many processors.</p>\n    \n    <ul>\n        <li>HTML lists within blocks</li>\n        <li>Mixed content capabilities</li>\n        <li>Semantic structure preservation</li>\n    </ul>\n</div>\n\u003C/span>\nRegular Markdown content continues seamlessly after HTML blocks, \nmaintaining document flow and readability.\n\n\u003Cspan class=\"hljs-section\">## Complex Layout Integration\u003C/span>\n\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">section\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"two-column-layout"\u003C/span>>\u003C/span>\u003C/span>\n\u003Cspan class=\"hljs-code\">    <div class="column">\n        <h4>Left Column Content</h4>\n        \n        Standard **Markdown formatting** continues to work within \n        HTML containers, providing flexible content creation options.\n        \n        - Markdown lists\n        - Within HTML containers\n        - Seamless integration\n    </div>\n    \n    <div class="column">\n        <h4>Right Column Content</h4>\n        \n        ```javascript\n        // Code blocks also work within HTML containers\n        function integration() {\n            return "HTML + Markdown";\n        }\n        ```\n        \n        > Blockquotes and other Markdown elements\n        > maintain their formatting within HTML structures.\n    </div>\n</section>\n\u003C/span>\n\u003Cspan class=\"hljs-section\">## Custom Component Integration\u003C/span>\n\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">article\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"tutorial-step"\u003C/span> \u003Cspan class=\"hljs-attr\">data-step\u003C/span>=\u003Cspan class=\"hljs-string\">"1"\u003C/span>>\u003C/span>\u003C/span>\n\u003Cspan class=\"hljs-code\">    <header class="step-header">\n        <h3>Step 1: Setup Process</h3>\n        <span class="step-badge">Essential</span>\n    </header>\n    \n    <div class="step-content">\n        Begin by configuring your **Markdown processor** to handle mixed content:\n        \n        1. Enable HTML support in processor settings\n        2. Configure HTML whitelist for security\n        3. Test **mixed content rendering** thoroughly\n        \n        <div class="code-example">\n            ```bash\n            # Example configuration command\n            markdown-processor --enable-html --secure-mode\n            ```\n        </div>\n        \n        <div class="step-notes">\n            **Important**: Always validate HTML security when accepting \n            user-generated content with mixed HTML-Markdown integration.\n        </div>\n    </div>\n</article>\n\u003C/span>\n\u003Cspan class=\"hljs-section\">## Table Enhancement with HTML\u003C/span>\n\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">table\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"enhanced-table"\u003C/span> \u003Cspan class=\"hljs-attr\">role\u003C/span>=\u003Cspan class=\"hljs-string\">"grid"\u003C/span>>\u003C/span>\u003C/span>\n\u003Cspan class=\"hljs-code\">    <thead>\n        <tr>\n            <th scope="col">Feature</th>\n            <th scope="col">Markdown Only</th>\n            <th scope="col">HTML Enhanced</th>\n            <th scope="col">Benefits</th>\n        </tr>\n    </thead>\n    <tbody>\n        <tr>\n            <td><strong>Basic Tables</strong></td>\n            <td>✅ Simple syntax</td>\n            <td>✅ Enhanced styling</td>\n            <td>\n                <ul class="benefit-list">\n                    <li>Responsive design</li>\n                    <li>Custom styling</li>\n                </ul>\n            </td>\n        </tr>\n        <tr>\n            <td><strong>Complex Layouts</strong></td>\n            <td>❌ Limited</td>\n            <td>✅ Full control</td>\n            <td>\n                Advanced table features:\n                - Cell spanning\n                - **Custom headers**\n                - Interactive elements\n            </td>\n        </tr>\n    </tbody>\n</table>\n\u003C/span>\n\u003Cspan class=\"hljs-section\">## Form Integration\u003C/span>\n\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">form\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"markdown-form"\u003C/span> \u003Cspan class=\"hljs-attr\">action\u003C/span>=\u003Cspan class=\"hljs-string\">"#"\u003C/span> \u003Cspan class=\"hljs-attr\">method\u003C/span>=\u003Cspan class=\"hljs-string\">"post"\u003C/span>>\u003C/span>\u003C/span>\n\u003Cspan class=\"hljs-code\">    <fieldset>\n        <legend>Contact Information Form</legend>\n        \n        <div class="form-group">\n            <label for="name">Name:</label>\n            <input type="text" id="name" name="name" required>\n            <small>*Enter your full name as it should appear in documentation.*</small>\n        </div>\n        \n        <div class="form-group">\n            <label for="email">Email:</label>\n            <input type="email" id="email" name="email" required>\n        </div>\n        \n        <div class="form-group">\n            <label for="content-type">Content Type:</label>\n            <select id="content-type" name="content-type">\n                <option value="tutorial">Tutorial Content</option>\n                <option value="reference">Reference Documentation</option>\n                <option value="example">Code Examples</option>\n            </select>\n        </div>\n        \n        <div class="form-group">\n            <label for="description">Description:</label>\n            <textarea id="description" name="description" rows="4">\nWrite your content description using **Markdown formatting** \nif supported by your form processor.\n            </textarea>\n        </div>\n        \n        <button type="submit" class="submit-button">Submit Content</button>\n    </fieldset>\n</form>\n\u003C/span>\nIntegration continues with normal Markdown content flow...\n\u003C/code>\u003C/pre>\u003Ch3 id=\"html-security-and-sanitization\">HTML Security and Sanitization\u003C/h3>\n\u003Cp>Critical considerations for safe HTML integration:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-javascript\">\u003Cspan class=\"hljs-comment\">// markdown-html-sanitizer.js - Comprehensive HTML sanitization for Markdown\u003C/span>\n\u003Cspan class=\"hljs-keyword\">class\u003C/span> \u003Cspan class=\"hljs-title class_\">MarkdownHTMLSanitizer\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\">allowedTags\u003C/span>: [\n                \u003Cspan class=\"hljs-string\">'div'\u003C/span>, \u003Cspan class=\"hljs-string\">'span'\u003C/span>, \u003Cspan class=\"hljs-string\">'p'\u003C/span>, \u003Cspan class=\"hljs-string\">'h1'\u003C/span>, \u003Cspan class=\"hljs-string\">'h2'\u003C/span>, \u003Cspan class=\"hljs-string\">'h3'\u003C/span>, \u003Cspan class=\"hljs-string\">'h4'\u003C/span>, \u003Cspan class=\"hljs-string\">'h5'\u003C/span>, \u003Cspan class=\"hljs-string\">'h6'\u003C/span>,\n                \u003Cspan class=\"hljs-string\">'strong'\u003C/span>, \u003Cspan class=\"hljs-string\">'em'\u003C/span>, \u003Cspan class=\"hljs-string\">'code'\u003C/span>, \u003Cspan class=\"hljs-string\">'pre'\u003C/span>, \u003Cspan class=\"hljs-string\">'blockquote'\u003C/span>,\n                \u003Cspan class=\"hljs-string\">'ul'\u003C/span>, \u003Cspan class=\"hljs-string\">'ol'\u003C/span>, \u003Cspan class=\"hljs-string\">'li'\u003C/span>, \u003Cspan class=\"hljs-string\">'table'\u003C/span>, \u003Cspan class=\"hljs-string\">'thead'\u003C/span>, \u003Cspan class=\"hljs-string\">'tbody'\u003C/span>, \u003Cspan class=\"hljs-string\">'tr'\u003C/span>, \u003Cspan class=\"hljs-string\">'td'\u003C/span>, \u003Cspan class=\"hljs-string\">'th'\u003C/span>,\n                \u003Cspan class=\"hljs-string\">'a'\u003C/span>, \u003Cspan class=\"hljs-string\">'img'\u003C/span>, \u003Cspan class=\"hljs-string\">'br'\u003C/span>, \u003Cspan class=\"hljs-string\">'hr'\u003C/span>, \u003Cspan class=\"hljs-string\">'section'\u003C/span>, \u003Cspan class=\"hljs-string\">'article'\u003C/span>, \u003Cspan class=\"hljs-string\">'header'\u003C/span>, \u003Cspan class=\"hljs-string\">'footer'\u003C/span>,\n                \u003Cspan class=\"hljs-string\">'nav'\u003C/span>, \u003Cspan class=\"hljs-string\">'aside'\u003C/span>, \u003Cspan class=\"hljs-string\">'main'\u003C/span>, \u003Cspan class=\"hljs-string\">'figure'\u003C/span>, \u003Cspan class=\"hljs-string\">'figcaption'\u003C/span>, \u003Cspan class=\"hljs-string\">'details'\u003C/span>, \u003Cspan class=\"hljs-string\">'summary'\u003C/span>\n            ],\n            \u003Cspan class=\"hljs-attr\">allowedAttributes\u003C/span>: {\n                \u003Cspan class=\"hljs-string\">'div'\u003C/span>: [\u003Cspan class=\"hljs-string\">'class'\u003C/span>, \u003Cspan class=\"hljs-string\">'id'\u003C/span>, \u003Cspan class=\"hljs-string\">'role'\u003C/span>, \u003Cspan class=\"hljs-string\">'data-*'\u003C/span>],\n                \u003Cspan class=\"hljs-string\">'span'\u003C/span>: [\u003Cspan class=\"hljs-string\">'class'\u003C/span>, \u003Cspan class=\"hljs-string\">'id'\u003C/span>],\n                \u003Cspan class=\"hljs-string\">'a'\u003C/span>: [\u003Cspan class=\"hljs-string\">'href'\u003C/span>, \u003Cspan class=\"hljs-string\">'title'\u003C/span>, \u003Cspan class=\"hljs-string\">'target'\u003C/span>, \u003Cspan class=\"hljs-string\">'rel'\u003C/span>],\n                \u003Cspan class=\"hljs-string\">'img'\u003C/span>: [\u003Cspan class=\"hljs-string\">'src'\u003C/span>, \u003Cspan class=\"hljs-string\">'alt'\u003C/span>, \u003Cspan class=\"hljs-string\">'title'\u003C/span>, \u003Cspan class=\"hljs-string\">'width'\u003C/span>, \u003Cspan class=\"hljs-string\">'height'\u003C/span>, \u003Cspan class=\"hljs-string\">'loading'\u003C/span>],\n                \u003Cspan class=\"hljs-string\">'table'\u003C/span>: [\u003Cspan class=\"hljs-string\">'class'\u003C/span>, \u003Cspan class=\"hljs-string\">'role'\u003C/span>],\n                \u003Cspan class=\"hljs-string\">'th'\u003C/span>: [\u003Cspan class=\"hljs-string\">'scope'\u003C/span>, \u003Cspan class=\"hljs-string\">'colspan'\u003C/span>, \u003Cspan class=\"hljs-string\">'rowspan'\u003C/span>],\n                \u003Cspan class=\"hljs-string\">'td'\u003C/span>: [\u003Cspan class=\"hljs-string\">'colspan'\u003C/span>, \u003Cspan class=\"hljs-string\">'rowspan'\u003C/span>],\n                \u003Cspan class=\"hljs-string\">'*'\u003C/span>: [\u003Cspan class=\"hljs-string\">'class'\u003C/span>, \u003Cspan class=\"hljs-string\">'id'\u003C/span>, \u003Cspan class=\"hljs-string\">'aria-*'\u003C/span>, \u003Cspan class=\"hljs-string\">'data-*'\u003C/span>]\n            },\n            \u003Cspan class=\"hljs-attr\">allowedProtocols\u003C/span>: [\u003Cspan class=\"hljs-string\">'http'\u003C/span>, \u003Cspan class=\"hljs-string\">'https'\u003C/span>, \u003Cspan class=\"hljs-string\">'mailto'\u003C/span>, \u003Cspan class=\"hljs-string\">'tel'\u003C/span>],\n            \u003Cspan class=\"hljs-attr\">blockScripts\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">blockStyles\u003C/span>: \u003Cspan class=\"hljs-literal\">false\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">preserveMarkdown\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">validateNesting\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n            ...options\n        };\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">dangerousTags\u003C/span> = [\u003Cspan class=\"hljs-string\">'script'\u003C/span>, \u003Cspan class=\"hljs-string\">'iframe'\u003C/span>, \u003Cspan class=\"hljs-string\">'object'\u003C/span>, \u003Cspan class=\"hljs-string\">'embed'\u003C/span>, \u003Cspan class=\"hljs-string\">'form'\u003C/span>, \u003Cspan class=\"hljs-string\">'input'\u003C/span>, \u003Cspan class=\"hljs-string\">'button'\u003C/span>];\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">selfClosingTags\u003C/span> = [\u003Cspan class=\"hljs-string\">'br'\u003C/span>, \u003Cspan class=\"hljs-string\">'hr'\u003C/span>, \u003Cspan class=\"hljs-string\">'img'\u003C/span>, \u003Cspan class=\"hljs-string\">'input'\u003C/span>, \u003Cspan class=\"hljs-string\">'area'\u003C/span>, \u003Cspan class=\"hljs-string\">'base'\u003C/span>, \u003Cspan class=\"hljs-string\">'col'\u003C/span>, \u003Cspan class=\"hljs-string\">'embed'\u003C/span>, \u003Cspan class=\"hljs-string\">'link'\u003C/span>, \u003Cspan class=\"hljs-string\">'meta'\u003C/span>, \u003Cspan class=\"hljs-string\">'param'\u003C/span>, \u003Cspan class=\"hljs-string\">'source'\u003C/span>, \u003Cspan class=\"hljs-string\">'track'\u003C/span>, \u003Cspan class=\"hljs-string\">'wbr'\u003C/span>];\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">sanitizeDocument\u003C/span>(\u003Cspan class=\"hljs-params\">content\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Step 1: Extract and protect Markdown code blocks\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> codeBlocks = [];\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> protectedContent = content.\u003Cspan class=\"hljs-title function_\">replace\u003C/span>(\u003Cspan class=\"hljs-regexp\">/```[\\s\\S]*?```|`[^`]+`/g\u003C/span>, \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">match, offset\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> placeholder = \u003Cspan class=\"hljs-string\">`__CODEBLOCK_\u003Cspan class=\"hljs-subst\">${codeBlocks.length}\u003C/span>__`\u003C/span>;\n            codeBlocks.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(match);\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> placeholder;\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// Step 2: Extract and validate HTML blocks\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> htmlBlocks = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">extractHTMLBlocks\u003C/span>(protectedContent);\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> sanitizedContent = protectedContent;\n        \n        \u003Cspan class=\"hljs-comment\">// Step 3: Sanitize each HTML block\u003C/span>\n        htmlBlocks.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">block, index\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> sanitized = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">sanitizeHTMLBlock\u003C/span>(block.\u003Cspan class=\"hljs-property\">content\u003C/span>);\n            sanitizedContent = sanitizedContent.\u003Cspan class=\"hljs-title function_\">replace\u003C/span>(block.\u003Cspan class=\"hljs-property\">placeholder\u003C/span>, sanitized);\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// Step 4: Restore code blocks\u003C/span>\n        codeBlocks.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">code, index\u003C/span>) =>\u003C/span> {\n            sanitizedContent = sanitizedContent.\u003Cspan class=\"hljs-title function_\">replace\u003C/span>(\u003Cspan class=\"hljs-string\">`__CODEBLOCK_\u003Cspan class=\"hljs-subst\">${index}\u003C/span>__`\u003C/span>, code);\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// Step 5: Final validation and cleanup\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">finalValidation\u003C/span>(sanitizedContent);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">extractHTMLBlocks\u003C/span>(\u003Cspan class=\"hljs-params\">content\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> htmlBlocks = [];\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> htmlRegex = \u003Cspan class=\"hljs-regexp\">/<(\\w+)(?:\\s[^>]*)?>([\\s\\S]*?)<\\/\\1>/gi\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> match;\n        \n        \u003Cspan class=\"hljs-keyword\">while\u003C/span> ((match = htmlRegex.\u003Cspan class=\"hljs-title function_\">exec\u003C/span>(content)) !== \u003Cspan class=\"hljs-literal\">null\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> tag = match[\u003Cspan class=\"hljs-number\">1\u003C/span>].\u003Cspan class=\"hljs-title function_\">toLowerCase\u003C/span>();\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> fullMatch = match[\u003Cspan class=\"hljs-number\">0\u003C/span>];\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> innerContent = match[\u003Cspan class=\"hljs-number\">2\u003C/span>];\n            \n            \u003Cspan class=\"hljs-comment\">// Validate tag is allowed\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\">allowedTags\u003C/span>.\u003Cspan class=\"hljs-title function_\">includes\u003C/span>(tag)) {\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> placeholder = \u003Cspan class=\"hljs-string\">`__HTMLBLOCK_\u003Cspan class=\"hljs-subst\">${htmlBlocks.length}\u003C/span>__`\u003C/span>;\n                htmlBlocks.\u003Cspan class=\"hljs-title function_\">push\u003C/span>({\n                    \u003Cspan class=\"hljs-attr\">placeholder\u003C/span>: placeholder,\n                    \u003Cspan class=\"hljs-attr\">content\u003C/span>: fullMatch,\n                    \u003Cspan class=\"hljs-attr\">tag\u003C/span>: tag,\n                    \u003Cspan class=\"hljs-attr\">innerContent\u003C/span>: innerContent\n                });\n                \n                content = content.\u003Cspan class=\"hljs-title function_\">replace\u003C/span>(fullMatch, placeholder);\n            }\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> htmlBlocks;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">sanitizeHTMLBlock\u003C/span>(\u003Cspan class=\"hljs-params\">htmlContent\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Parse HTML and validate structure\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> doc = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">DOMParser\u003C/span>().\u003Cspan class=\"hljs-title function_\">parseFromString\u003C/span>(\u003Cspan class=\"hljs-string\">`<div>\u003Cspan class=\"hljs-subst\">${htmlContent}\u003C/span></div>`\u003C/span>, \u003Cspan class=\"hljs-string\">'text/html'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> container = doc.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!container) {\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.escapeHTML(htmlContent);\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Recursively sanitize all elements\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">sanitizeElement\u003C/span>(container);\n        \n        \u003Cspan class=\"hljs-comment\">// Return inner HTML (excluding the wrapper div)\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> container.\u003Cspan class=\"hljs-property\">innerHTML\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">sanitizeElement\u003C/span>(\u003Cspan class=\"hljs-params\">element\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> tagName = element.\u003Cspan class=\"hljs-property\">tagName\u003C/span>.\u003Cspan class=\"hljs-title function_\">toLowerCase\u003C/span>();\n        \n        \u003Cspan class=\"hljs-comment\">// Remove dangerous tags entirely\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">dangerousTags\u003C/span>.\u003Cspan class=\"hljs-title function_\">includes\u003C/span>(tagName)) {\n            element.\u003Cspan class=\"hljs-title function_\">remove\u003C/span>();\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Remove disallowed tags but keep content\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\">allowedTags\u003C/span>.\u003Cspan class=\"hljs-title function_\">includes\u003C/span>(tagName)) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> parent = element.\u003Cspan class=\"hljs-property\">parentNode\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">while\u003C/span> (element.\u003Cspan class=\"hljs-property\">firstChild\u003C/span>) {\n                parent.\u003Cspan class=\"hljs-title function_\">insertBefore\u003C/span>(element.\u003Cspan class=\"hljs-property\">firstChild\u003C/span>, element);\n            }\n            element.\u003Cspan class=\"hljs-title function_\">remove\u003C/span>();\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Sanitize attributes\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">sanitizeAttributes\u003C/span>(element);\n        \n        \u003Cspan class=\"hljs-comment\">// Recursively sanitize child elements\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> children = \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">from\u003C/span>(element.\u003Cspan class=\"hljs-property\">children\u003C/span>);\n        children.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">child\u003C/span> =>\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">sanitizeElement\u003C/span>(child));\n        \n        \u003Cspan class=\"hljs-comment\">// Validate nesting 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\">validateNesting\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">validateNesting\u003C/span>(element);\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">sanitizeAttributes\u003C/span>(\u003Cspan class=\"hljs-params\">element\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> tagName = element.\u003Cspan class=\"hljs-property\">tagName\u003C/span>.\u003Cspan class=\"hljs-title function_\">toLowerCase\u003C/span>();\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> allowedAttrs = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">allowedAttributes\u003C/span>[tagName] || \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">allowedAttributes\u003C/span>[\u003Cspan class=\"hljs-string\">'*'\u003C/span>] || [];\n        \n        \u003Cspan class=\"hljs-comment\">// Get all attributes\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> attributes = \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">from\u003C/span>(element.\u003Cspan class=\"hljs-property\">attributes\u003C/span>);\n        \n        attributes.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">attr\u003C/span> =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> attrName = attr.\u003Cspan class=\"hljs-property\">name\u003C/span>.\u003Cspan class=\"hljs-title function_\">toLowerCase\u003C/span>();\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> attrValue = attr.\u003Cspan class=\"hljs-property\">value\u003C/span>;\n            \n            \u003Cspan class=\"hljs-keyword\">let\u003C/span> isAllowed = \u003Cspan class=\"hljs-literal\">false\u003C/span>;\n            \n            \u003Cspan class=\"hljs-comment\">// Check if attribute is explicitly allowed\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">const\u003C/span> allowed \u003Cspan class=\"hljs-keyword\">of\u003C/span> allowedAttrs) {\n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (allowed === attrName) {\n                    isAllowed = \u003Cspan class=\"hljs-literal\">true\u003C/span>;\n                    \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n                } \u003Cspan class=\"hljs-keyword\">else\u003C/span> \u003Cspan class=\"hljs-keyword\">if\u003C/span> (allowed.\u003Cspan class=\"hljs-title function_\">includes\u003C/span>(\u003Cspan class=\"hljs-string\">'*'\u003C/span>)) {\n                    \u003Cspan class=\"hljs-comment\">// Handle wildcard attributes like 'data-*' or 'aria-*'\u003C/span>\n                    \u003Cspan class=\"hljs-keyword\">const\u003C/span> pattern = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">RegExp\u003C/span>(\u003Cspan class=\"hljs-string\">'^'\u003C/span> + allowed.\u003Cspan class=\"hljs-title function_\">replace\u003C/span>(\u003Cspan class=\"hljs-string\">'*'\u003C/span>, \u003Cspan class=\"hljs-string\">'.*'\u003C/span>) + \u003Cspan class=\"hljs-string\">'$'\u003C/span>);\n                    \u003Cspan class=\"hljs-keyword\">if\u003C/span> (pattern.\u003Cspan class=\"hljs-title function_\">test\u003C/span>(attrName)) {\n                        isAllowed = \u003Cspan class=\"hljs-literal\">true\u003C/span>;\n                        \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n                    }\n                }\n            }\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!isAllowed) {\n                element.\u003Cspan class=\"hljs-title function_\">removeAttribute\u003C/span>(attrName);\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n            }\n            \n            \u003Cspan class=\"hljs-comment\">// Sanitize attribute values\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> sanitizedValue = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">sanitizeAttributeValue\u003C/span>(attrName, attrValue);\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (sanitizedValue !== attrValue) {\n                element.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(attrName, sanitizedValue);\n            }\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">sanitizeAttributeValue\u003C/span>(\u003Cspan class=\"hljs-params\">attrName, value\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Handle URL attributes\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> ([\u003Cspan class=\"hljs-string\">'href'\u003C/span>, \u003Cspan class=\"hljs-string\">'src'\u003C/span>, \u003Cspan class=\"hljs-string\">'action'\u003C/span>].\u003Cspan class=\"hljs-title function_\">includes\u003C/span>(attrName)) {\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">sanitizeURL\u003C/span>(value);\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Handle class attributes\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (attrName === \u003Cspan class=\"hljs-string\">'class'\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">sanitizeClassName\u003C/span>(value);\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Handle ID attributes\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (attrName === \u003Cspan class=\"hljs-string\">'id'\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">sanitizeID\u003C/span>(value);\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Handle data attributes\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (attrName.\u003Cspan class=\"hljs-title function_\">startsWith\u003C/span>(\u003Cspan class=\"hljs-string\">'data-'\u003C/span>)) {\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">sanitizeDataAttribute\u003C/span>(value);\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Handle ARIA attributes\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (attrName.\u003Cspan class=\"hljs-title function_\">startsWith\u003C/span>(\u003Cspan class=\"hljs-string\">'aria-'\u003C/span>)) {\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">sanitizeAriaAttribute\u003C/span>(value);\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Default: escape potentially dangerous characters\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> value.\u003Cspan class=\"hljs-title function_\">replace\u003C/span>(\u003Cspan class=\"hljs-regexp\">/[<>"']/g\u003C/span>, \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">char\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> entities = { \u003Cspan class=\"hljs-string\">'<'\u003C/span>: \u003Cspan class=\"hljs-string\">'<'\u003C/span>, \u003Cspan class=\"hljs-string\">'>'\u003C/span>: \u003Cspan class=\"hljs-string\">'>'\u003C/span>, \u003Cspan class=\"hljs-string\">'"'\u003C/span>: \u003Cspan class=\"hljs-string\">'"'\u003C/span>, \u003Cspan class=\"hljs-string\">"'"\u003C/span>: \u003Cspan class=\"hljs-string\">'''\u003C/span> };\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> entities[char] || char;\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">sanitizeURL\u003C/span>(\u003Cspan class=\"hljs-params\">url\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">try\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> parsedURL = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title function_\">URL\u003C/span>(url, \u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-property\">location\u003C/span>.\u003Cspan class=\"hljs-property\">href\u003C/span>);\n            \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\">allowedProtocols\u003C/span>.\u003Cspan class=\"hljs-title function_\">includes\u003C/span>(parsedURL.\u003Cspan class=\"hljs-property\">protocol\u003C/span>.\u003Cspan class=\"hljs-title function_\">slice\u003C/span>(\u003Cspan class=\"hljs-number\">0\u003C/span>, -\u003Cspan class=\"hljs-number\">1\u003C/span>))) {\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> parsedURL.\u003Cspan class=\"hljs-property\">href\u003C/span>;\n            } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">'#'\u003C/span>; \u003Cspan class=\"hljs-comment\">// Return safe fallback\u003C/span>\n            }\n        } \u003Cspan class=\"hljs-keyword\">catch\u003C/span> (e) {\n            \u003Cspan class=\"hljs-comment\">// If URL parsing fails, check for relative URLs or anchors\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (url.\u003Cspan class=\"hljs-title function_\">startsWith\u003C/span>(\u003Cspan class=\"hljs-string\">'#'\u003C/span>) || url.\u003Cspan class=\"hljs-title function_\">startsWith\u003C/span>(\u003Cspan class=\"hljs-string\">'/'\u003C/span>) || !url.\u003Cspan class=\"hljs-title function_\">includes\u003C/span>(\u003Cspan class=\"hljs-string\">':'\u003C/span>)) {\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> url; \u003Cspan class=\"hljs-comment\">// Allow relative URLs and anchors\u003C/span>\n            }\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">'#'\u003C/span>; \u003Cspan class=\"hljs-comment\">// Return safe fallback\u003C/span>\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">sanitizeClassName\u003C/span>(\u003Cspan class=\"hljs-params\">className\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Allow alphanumeric, hyphens, underscores, and spaces\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> className.\u003Cspan class=\"hljs-title function_\">replace\u003C/span>(\u003Cspan class=\"hljs-regexp\">/[^a-zA-Z0-9\\-_\\s]/g\u003C/span>, \u003Cspan class=\"hljs-string\">''\u003C/span>).\u003Cspan class=\"hljs-title function_\">trim\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">sanitizeID\u003C/span>(\u003Cspan class=\"hljs-params\">id\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Allow alphanumeric, hyphens, and underscores only\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> id.\u003Cspan class=\"hljs-title function_\">replace\u003C/span>(\u003Cspan class=\"hljs-regexp\">/[^a-zA-Z0-9\\-_]/g\u003C/span>, \u003Cspan class=\"hljs-string\">''\u003C/span>);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">sanitizeDataAttribute\u003C/span>(\u003Cspan class=\"hljs-params\">value\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Basic data attribute sanitization\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> value.\u003Cspan class=\"hljs-title function_\">replace\u003C/span>(\u003Cspan class=\"hljs-regexp\">/[<>"']/g\u003C/span>, \u003Cspan class=\"hljs-string\">''\u003C/span>).\u003Cspan class=\"hljs-title function_\">trim\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">sanitizeAriaAttribute\u003C/span>(\u003Cspan class=\"hljs-params\">value\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// ARIA attributes can contain specific values\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> value.\u003Cspan class=\"hljs-title function_\">replace\u003C/span>(\u003Cspan class=\"hljs-regexp\">/[<>"]/g\u003C/span>, \u003Cspan class=\"hljs-string\">''\u003C/span>).\u003Cspan class=\"hljs-title function_\">trim\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">validateNesting\u003C/span>(\u003Cspan class=\"hljs-params\">element\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> tagName = element.\u003Cspan class=\"hljs-property\">tagName\u003C/span>.\u003Cspan class=\"hljs-title function_\">toLowerCase\u003C/span>();\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> parent = element.\u003Cspan class=\"hljs-property\">parentElement\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!parent) \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> parentTag = parent.\u003Cspan class=\"hljs-property\">tagName\u003C/span>.\u003Cspan class=\"hljs-title function_\">toLowerCase\u003C/span>();\n        \n        \u003Cspan class=\"hljs-comment\">// Define invalid nesting combinations\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> invalidNesting = {\n            \u003Cspan class=\"hljs-string\">'p'\u003C/span>: [\u003Cspan class=\"hljs-string\">'div'\u003C/span>, \u003Cspan class=\"hljs-string\">'section'\u003C/span>, \u003Cspan class=\"hljs-string\">'article'\u003C/span>, \u003Cspan class=\"hljs-string\">'h1'\u003C/span>, \u003Cspan class=\"hljs-string\">'h2'\u003C/span>, \u003Cspan class=\"hljs-string\">'h3'\u003C/span>, \u003Cspan class=\"hljs-string\">'h4'\u003C/span>, \u003Cspan class=\"hljs-string\">'h5'\u003C/span>, \u003Cspan class=\"hljs-string\">'h6'\u003C/span>],\n            \u003Cspan class=\"hljs-string\">'h1'\u003C/span>: [\u003Cspan class=\"hljs-string\">'h1'\u003C/span>, \u003Cspan class=\"hljs-string\">'h2'\u003C/span>, \u003Cspan class=\"hljs-string\">'h3'\u003C/span>, \u003Cspan class=\"hljs-string\">'h4'\u003C/span>, \u003Cspan class=\"hljs-string\">'h5'\u003C/span>, \u003Cspan class=\"hljs-string\">'h6'\u003C/span>],\n            \u003Cspan class=\"hljs-string\">'h2'\u003C/span>: [\u003Cspan class=\"hljs-string\">'h1'\u003C/span>, \u003Cspan class=\"hljs-string\">'h2'\u003C/span>, \u003Cspan class=\"hljs-string\">'h3'\u003C/span>, \u003Cspan class=\"hljs-string\">'h4'\u003C/span>, \u003Cspan class=\"hljs-string\">'h5'\u003C/span>, \u003Cspan class=\"hljs-string\">'h6'\u003C/span>],\n            \u003Cspan class=\"hljs-string\">'a'\u003C/span>: [\u003Cspan class=\"hljs-string\">'a'\u003C/span>, \u003Cspan class=\"hljs-string\">'button'\u003C/span>, \u003Cspan class=\"hljs-string\">'input'\u003C/span>]\n        };\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (invalidNesting[parentTag] && invalidNesting[parentTag].\u003Cspan class=\"hljs-title function_\">includes\u003C/span>(tagName)) {\n            \u003Cspan class=\"hljs-comment\">// Move element outside of invalid parent\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> grandparent = parent.\u003Cspan class=\"hljs-property\">parentNode\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (grandparent) {\n                grandparent.\u003Cspan class=\"hljs-title function_\">insertBefore\u003C/span>(element, parent.\u003Cspan class=\"hljs-property\">nextSibling\u003C/span>);\n            }\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">finalValidation\u003C/span>(\u003Cspan class=\"hljs-params\">content\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Final cleanup and validation\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> content\n            .\u003Cspan class=\"hljs-title function_\">replace\u003C/span>(\u003Cspan class=\"hljs-regexp\">/__HTMLBLOCK_\\d+__/g\u003C/span>, \u003Cspan class=\"hljs-string\">''\u003C/span>) \u003Cspan class=\"hljs-comment\">// Remove any unreplaced placeholders\u003C/span>\n            .\u003Cspan class=\"hljs-title function_\">replace\u003C/span>(\u003Cspan class=\"hljs-regexp\">/\\n\\s*\\n\\s*\\n/g\u003C/span>, \u003Cspan class=\"hljs-string\">'\\n\\n'\u003C/span>) \u003Cspan class=\"hljs-comment\">// Normalize excessive whitespace\u003C/span>\n            .\u003Cspan class=\"hljs-title function_\">trim\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">escapeHTML\u003C/span>(\u003Cspan class=\"hljs-params\">html\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> = html;\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> div.\u003Cspan class=\"hljs-property\">innerHTML\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-comment\">// Public API methods\u003C/span>\n    \u003Cspan class=\"hljs-title function_\">sanitize\u003C/span>(\u003Cspan class=\"hljs-params\">content\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">sanitizeDocument\u003C/span>(content);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">validateHTMLSafety\u003C/span>(\u003Cspan class=\"hljs-params\">content\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> dangerousPatterns = [\n            \u003Cspan class=\"hljs-regexp\">/<script[\\s\\S]*?<\\/script>/gi\u003C/span>,\n            \u003Cspan class=\"hljs-regexp\">/javascript:/gi\u003C/span>,\n            \u003Cspan class=\"hljs-regexp\">/vbscript:/gi\u003C/span>,\n            \u003Cspan class=\"hljs-regexp\">/on\\w+\\s*=/gi\u003C/span>,\n            \u003Cspan class=\"hljs-regexp\">/<iframe[\\s\\S]*?<\\/iframe>/gi\u003C/span>,\n            \u003Cspan class=\"hljs-regexp\">/<object[\\s\\S]*?<\\/object>/gi\u003C/span>,\n            \u003Cspan class=\"hljs-regexp\">/<embed[\\s\\S]*?>/gi\u003C/span>\n        ];\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> issues = [];\n        \n        dangerousPatterns.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">pattern, index\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> matches = content.\u003Cspan class=\"hljs-title function_\">match\u003C/span>(pattern);\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (matches) {\n                issues.\u003Cspan class=\"hljs-title function_\">push\u003C/span>({\n                    \u003Cspan class=\"hljs-attr\">type\u003C/span>: \u003Cspan class=\"hljs-string\">'security'\u003C/span>,\n                    \u003Cspan class=\"hljs-attr\">pattern\u003C/span>: pattern.\u003Cspan class=\"hljs-title function_\">toString\u003C/span>(),\n                    \u003Cspan class=\"hljs-attr\">matches\u003C/span>: matches,\n                    \u003Cspan class=\"hljs-attr\">severity\u003C/span>: \u003Cspan class=\"hljs-string\">'high'\u003C/span>\n                });\n            }\n        });\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> {\n            \u003Cspan class=\"hljs-attr\">isSafe\u003C/span>: issues.\u003Cspan class=\"hljs-property\">length\u003C/span> === \u003Cspan class=\"hljs-number\">0\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">issues\u003C/span>: issues,\n            \u003Cspan class=\"hljs-attr\">recommendation\u003C/span>: issues.\u003Cspan class=\"hljs-property\">length\u003C/span> > \u003Cspan class=\"hljs-number\">0\u003C/span> ? \u003Cspan class=\"hljs-string\">'Content contains potentially dangerous HTML and should be sanitized before use.'\u003C/span> : \u003Cspan class=\"hljs-string\">'Content appears safe for use.'\u003C/span>\n        };\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">// Usage examples\u003C/span>\n\u003Cspan class=\"hljs-keyword\">const\u003C/span> sanitizer = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">MarkdownHTMLSanitizer\u003C/span>({\n    \u003Cspan class=\"hljs-attr\">allowedTags\u003C/span>: [\u003Cspan class=\"hljs-string\">'div'\u003C/span>, \u003Cspan class=\"hljs-string\">'p'\u003C/span>, \u003Cspan class=\"hljs-string\">'h1'\u003C/span>, \u003Cspan class=\"hljs-string\">'h2'\u003C/span>, \u003Cspan class=\"hljs-string\">'h3'\u003C/span>, \u003Cspan class=\"hljs-string\">'strong'\u003C/span>, \u003Cspan class=\"hljs-string\">'em'\u003C/span>, \u003Cspan class=\"hljs-string\">'code'\u003C/span>, \u003Cspan class=\"hljs-string\">'a'\u003C/span>, \u003Cspan class=\"hljs-string\">'img'\u003C/span>],\n    \u003Cspan class=\"hljs-attr\">blockScripts\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n    \u003Cspan class=\"hljs-attr\">validateNesting\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>\n});\n\n\u003Cspan class=\"hljs-comment\">// Sanitize mixed HTML-Markdown content\u003C/span>\n\u003Cspan class=\"hljs-keyword\">const\u003C/span> mixedContent = \u003Cspan class=\"hljs-string\">`\n# My Document\n\n<div class="content-block">\n    This is **mixed content** with <strong>HTML tags</strong>.\n    \n    <script>alert('dangerous');</script>\n    \n    ## Subheading\n    \n    <p>Regular paragraph with <a href="https://example.com">safe link</a>.</p>\n</div>\n\nNormal Markdown continues here...\n`\u003C/span>;\n\n\u003Cspan class=\"hljs-keyword\">const\u003C/span> sanitizedContent = sanitizer.\u003Cspan class=\"hljs-title function_\">sanitize\u003C/span>(mixedContent);\n\u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">log\u003C/span>(sanitizedContent);\n\n\u003Cspan class=\"hljs-comment\">// Validate content safety\u003C/span>\n\u003Cspan class=\"hljs-keyword\">const\u003C/span> safetyReport = sanitizer.\u003Cspan class=\"hljs-title function_\">validateHTMLSafety\u003C/span>(mixedContent);\n\u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">log\u003C/span>(safetyReport);\n\u003C/code>\u003C/pre>\u003Ch2 id=\"advanced-component-systems\">Advanced Component Systems\u003C/h2>\n\u003Ch3 id=\"custom-html-component-framework\">Custom HTML Component Framework\u003C/h3>\n\u003Cp>Building reusable components that integrate seamlessly with Markdown:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-javascript\">\u003Cspan class=\"hljs-comment\">// markdown-component-system.js - Advanced HTML component framework for Markdown\u003C/span>\n\u003Cspan class=\"hljs-keyword\">class\u003C/span> \u003Cspan class=\"hljs-title class_\">MarkdownComponentSystem\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\">componentPrefix\u003C/span>: \u003Cspan class=\"hljs-string\">'md-'\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">enableNesting\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">allowMarkdownInComponents\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">validateComponents\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">debugMode\u003C/span>: \u003Cspan class=\"hljs-literal\">false\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">customComponents\u003C/span>: {},\n            ...options\n        };\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">components\u003C/span> = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Map\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">processors\u003C/span> = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Map\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">renderingContext\u003C/span> = {\n            \u003Cspan class=\"hljs-attr\">depth\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">maxDepth\u003C/span>: \u003Cspan class=\"hljs-number\">10\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">variables\u003C/span>: \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Map\u003C/span>()\n        };\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">initializeDefaultComponents\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">initializeDefaultComponents\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Register built-in components\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">registerComponent\u003C/span>(\u003Cspan class=\"hljs-string\">'callout'\u003C/span>, \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">createCalloutComponent\u003C/span>());\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">registerComponent\u003C/span>(\u003Cspan class=\"hljs-string\">'tabs'\u003C/span>, \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">createTabsComponent\u003C/span>());\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">registerComponent\u003C/span>(\u003Cspan class=\"hljs-string\">'code-example'\u003C/span>, \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">createCodeExampleComponent\u003C/span>());\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">registerComponent\u003C/span>(\u003Cspan class=\"hljs-string\">'image-gallery'\u003C/span>, \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">createImageGalleryComponent\u003C/span>());\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">registerComponent\u003C/span>(\u003Cspan class=\"hljs-string\">'table-wrapper'\u003C/span>, \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">createTableWrapperComponent\u003C/span>());\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">registerComponent\u003C/span>(\u003Cspan class=\"hljs-string\">'info-card'\u003C/span>, \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">createInfoCardComponent\u003C/span>());\n        \n        \u003Cspan class=\"hljs-comment\">// Register custom components if provided\u003C/span>\n        \u003Cspan class=\"hljs-title class_\">Object\u003C/span>.\u003Cspan class=\"hljs-title function_\">entries\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">customComponents\u003C/span>).\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">[name, component]\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">registerComponent\u003C/span>(name, component);\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">registerComponent\u003C/span>(\u003Cspan class=\"hljs-params\">name, component\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-keyword\">typeof\u003C/span> component !== \u003Cspan class=\"hljs-string\">'object'\u003C/span> || !component.\u003Cspan class=\"hljs-property\">render\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">throw\u003C/span> \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Error\u003C/span>(\u003Cspan class=\"hljs-string\">`Component \u003Cspan class=\"hljs-subst\">${name}\u003C/span> must have a render method`\u003C/span>);\n        }\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">components\u003C/span>.\u003Cspan class=\"hljs-title function_\">set\u003C/span>(name, {\n            \u003Cspan class=\"hljs-attr\">name\u003C/span>: name,\n            \u003Cspan class=\"hljs-attr\">render\u003C/span>: component.\u003Cspan class=\"hljs-property\">render\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">validate\u003C/span>: component.\u003Cspan class=\"hljs-property\">validate\u003C/span> || (\u003Cspan class=\"hljs-function\">() =>\u003C/span> \u003Cspan class=\"hljs-literal\">true\u003C/span>),\n            \u003Cspan class=\"hljs-attr\">attributes\u003C/span>: component.\u003Cspan class=\"hljs-property\">attributes\u003C/span> || [],\n            \u003Cspan class=\"hljs-attr\">allowChildren\u003C/span>: component.\u003Cspan class=\"hljs-property\">allowChildren\u003C/span> !== \u003Cspan class=\"hljs-literal\">false\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">selfClosing\u003C/span>: component.\u003Cspan class=\"hljs-property\">selfClosing\u003C/span> || \u003Cspan class=\"hljs-literal\">false\u003C/span>\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">processDocument\u003C/span>(\u003Cspan class=\"hljs-params\">content\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">renderingContext\u003C/span>.\u003Cspan class=\"hljs-property\">depth\u003C/span> = \u003Cspan class=\"hljs-number\">0\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">renderingContext\u003C/span>.\u003Cspan class=\"hljs-property\">variables\u003C/span>.\u003Cspan class=\"hljs-title function_\">clear\u003C/span>();\n        \n        \u003Cspan class=\"hljs-comment\">// Step 1: Extract and protect Markdown code blocks\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> { \u003Cspan class=\"hljs-attr\">content\u003C/span>: protectedContent, codeBlocks } = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">protectCodeBlocks\u003C/span>(content);\n        \n        \u003Cspan class=\"hljs-comment\">// Step 2: Process component syntax\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> processedContent = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">processComponents\u003C/span>(protectedContent);\n        \n        \u003Cspan class=\"hljs-comment\">// Step 3: Restore code blocks\u003C/span>\n        processedContent = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">restoreCodeBlocks\u003C/span>(processedContent, codeBlocks);\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> processedContent;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">protectCodeBlocks\u003C/span>(\u003Cspan class=\"hljs-params\">content\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> codeBlocks = [];\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> protectedContent = content.\u003Cspan class=\"hljs-title function_\">replace\u003C/span>(\u003Cspan class=\"hljs-regexp\">/```[\\s\\S]*?```|`[^`]+`/g\u003C/span>, \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">match\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> placeholder = \u003Cspan class=\"hljs-string\">`__PROTECTED_CODE_\u003Cspan class=\"hljs-subst\">${codeBlocks.length}\u003C/span>__`\u003C/span>;\n            codeBlocks.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(match);\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> placeholder;\n        });\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> { \u003Cspan class=\"hljs-attr\">content\u003C/span>: protectedContent, codeBlocks };\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">restoreCodeBlocks\u003C/span>(\u003Cspan class=\"hljs-params\">content, codeBlocks\u003C/span>) {\n        codeBlocks.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">code, index\u003C/span>) =>\u003C/span> {\n            content = content.\u003Cspan class=\"hljs-title function_\">replace\u003C/span>(\u003Cspan class=\"hljs-string\">`__PROTECTED_CODE_\u003Cspan class=\"hljs-subst\">${index}\u003C/span>__`\u003C/span>, code);\n        });\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> content;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">processComponents\u003C/span>(\u003Cspan class=\"hljs-params\">content\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Enhanced component syntax: <md-component-name attr="value">content</md-component-name>\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> componentRegex = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">RegExp\u003C/span>(\u003Cspan class=\"hljs-string\">`<\u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.options.componentPrefix}\u003C/span>([^\\\\s>]+)([^>]*)>([\\\\s\\\\S]*?)<\\\\/\u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.options.componentPrefix}\u003C/span>\\\\1>`\u003C/span>, \u003Cspan class=\"hljs-string\">'gi'\u003C/span>);\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> content.\u003Cspan class=\"hljs-title function_\">replace\u003C/span>(componentRegex, \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">match, componentName, attributes, innerContent\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">try\u003C/span> {\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">renderComponent\u003C/span>(componentName, attributes, innerContent);\n            } \u003Cspan class=\"hljs-keyword\">catch\u003C/span> (error) {\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\">debugMode\u003C/span>) {\n                    \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">error\u003C/span>(\u003Cspan class=\"hljs-string\">`Error rendering component \u003Cspan class=\"hljs-subst\">${componentName}\u003C/span>:`\u003C/span>, error);\n                }\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">renderErrorComponent\u003C/span>(componentName, error.\u003Cspan class=\"hljs-property\">message\u003C/span>);\n            }\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">renderComponent\u003C/span>(\u003Cspan class=\"hljs-params\">componentName, attributeString, innerContent\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> component = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">components\u003C/span>.\u003Cspan class=\"hljs-title function_\">get\u003C/span>(componentName);\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!component) {\n            \u003Cspan class=\"hljs-keyword\">throw\u003C/span> \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Error\u003C/span>(\u003Cspan class=\"hljs-string\">`Unknown component: \u003Cspan class=\"hljs-subst\">${componentName}\u003C/span>`\u003C/span>);\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Check rendering depth to prevent infinite recursion\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">renderingContext\u003C/span>.\u003Cspan class=\"hljs-property\">depth\u003C/span> >= \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">renderingContext\u003C/span>.\u003Cspan class=\"hljs-property\">maxDepth\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">throw\u003C/span> \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Error\u003C/span>(\u003Cspan class=\"hljs-string\">`Maximum component nesting depth exceeded for \u003Cspan class=\"hljs-subst\">${componentName}\u003C/span>`\u003C/span>);\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Parse attributes\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> attributes = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">parseAttributes\u003C/span>(attributeString);\n        \n        \u003Cspan class=\"hljs-comment\">// Validate component usage\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\">validateComponents\u003C/span> && !component.\u003Cspan class=\"hljs-title function_\">validate\u003C/span>(attributes, innerContent)) {\n            \u003Cspan class=\"hljs-keyword\">throw\u003C/span> \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Error\u003C/span>(\u003Cspan class=\"hljs-string\">`Invalid component usage for \u003Cspan class=\"hljs-subst\">${componentName}\u003C/span>`\u003C/span>);\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Process nested content if allowed\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> processedContent = innerContent;\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (component.\u003Cspan class=\"hljs-property\">allowChildren\u003C/span> && \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">enableNesting\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">renderingContext\u003C/span>.\u003Cspan class=\"hljs-property\">depth\u003C/span>++;\n            \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\">allowMarkdownInComponents\u003C/span>) {\n                \u003Cspan class=\"hljs-comment\">// Process nested components first, then let Markdown processor handle the rest\u003C/span>\n                processedContent = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">processComponents\u003C/span>(innerContent);\n            }\n            \n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">renderingContext\u003C/span>.\u003Cspan class=\"hljs-property\">depth\u003C/span>--;\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Render the component\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> renderContext = {\n            attributes,\n            \u003Cspan class=\"hljs-attr\">content\u003C/span>: processedContent,\n            \u003Cspan class=\"hljs-attr\">variables\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">renderingContext\u003C/span>.\u003Cspan class=\"hljs-property\">variables\u003C/span>,\n            componentName\n        };\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> component.\u003Cspan class=\"hljs-title function_\">render\u003C/span>(renderContext);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">parseAttributes\u003C/span>(\u003Cspan class=\"hljs-params\">attributeString\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> attributes = {};\n        \n        \u003Cspan class=\"hljs-comment\">// Enhanced attribute parsing with support for various formats\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> attrRegex = \u003Cspan class=\"hljs-regexp\">/(\\w+)(?:=(?:["']([^"']*)["']|([^\\s]+)))?/g\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> match;\n        \n        \u003Cspan class=\"hljs-keyword\">while\u003C/span> ((match = attrRegex.\u003Cspan class=\"hljs-title function_\">exec\u003C/span>(attributeString)) !== \u003Cspan class=\"hljs-literal\">null\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> name = match[\u003Cspan class=\"hljs-number\">1\u003C/span>];\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> value = match[\u003Cspan class=\"hljs-number\">2\u003C/span>] || match[\u003Cspan class=\"hljs-number\">3\u003C/span>] || \u003Cspan class=\"hljs-literal\">true\u003C/span>;\n            attributes[name] = value;\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> attributes;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">createCalloutComponent\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> {\n            \u003Cspan class=\"hljs-attr\">attributes\u003C/span>: [\u003Cspan class=\"hljs-string\">'type'\u003C/span>, \u003Cspan class=\"hljs-string\">'title'\u003C/span>, \u003Cspan class=\"hljs-string\">'icon'\u003C/span>, \u003Cspan class=\"hljs-string\">'collapsible'\u003C/span>],\n            \u003Cspan class=\"hljs-attr\">render\u003C/span>: \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">{ attributes, content }\u003C/span>) =>\u003C/span> {\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> type = attributes.\u003Cspan class=\"hljs-property\">type\u003C/span> || \u003Cspan class=\"hljs-string\">'info'\u003C/span>;\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> title = attributes.\u003Cspan class=\"hljs-property\">title\u003C/span> || \u003Cspan class=\"hljs-string\">''\u003C/span>;\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> icon = attributes.\u003Cspan class=\"hljs-property\">icon\u003C/span> || \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">getDefaultIcon\u003C/span>(type);\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> collapsible = attributes.\u003Cspan class=\"hljs-property\">collapsible\u003C/span> === \u003Cspan class=\"hljs-string\">'true'\u003C/span>;\n                \n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> titleHtml = title ? \u003Cspan class=\"hljs-string\">`<div class="callout-title">\u003Cspan class=\"hljs-subst\">${icon}\u003C/span> \u003Cspan class=\"hljs-subst\">${title}\u003C/span></div>`\u003C/span> : \u003Cspan class=\"hljs-string\">''\u003C/span>;\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> contentClass = collapsible ? \u003Cspan class=\"hljs-string\">'callout-content collapsible'\u003C/span> : \u003Cspan class=\"hljs-string\">'callout-content'\u003C/span>;\n                \n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">`\n<div class="callout callout-\u003Cspan class=\"hljs-subst\">${type}\u003C/span>" role="alert">\n    \u003Cspan class=\"hljs-subst\">${titleHtml}\u003C/span>\n    <div class="\u003Cspan class=\"hljs-subst\">${contentClass}\u003C/span>">\n        \u003Cspan class=\"hljs-subst\">${content}\u003C/span>\n    </div>\n</div>`\u003C/span>;\n            },\n            \u003Cspan class=\"hljs-attr\">validate\u003C/span>: \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">attributes\u003C/span>) =>\u003C/span> {\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> validTypes = [\u003Cspan class=\"hljs-string\">'info'\u003C/span>, \u003Cspan class=\"hljs-string\">'warning'\u003C/span>, \u003Cspan class=\"hljs-string\">'error'\u003C/span>, \u003Cspan class=\"hljs-string\">'success'\u003C/span>, \u003Cspan class=\"hljs-string\">'note'\u003C/span>];\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> !attributes.\u003Cspan class=\"hljs-property\">type\u003C/span> || validTypes.\u003Cspan class=\"hljs-title function_\">includes\u003C/span>(attributes.\u003Cspan class=\"hljs-property\">type\u003C/span>);\n            }\n        };\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">createTabsComponent\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> {\n            \u003Cspan class=\"hljs-attr\">attributes\u003C/span>: [\u003Cspan class=\"hljs-string\">'default-tab'\u003C/span>],\n            \u003Cspan class=\"hljs-attr\">render\u003C/span>: \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">{ attributes, content }\u003C/span>) =>\u003C/span> {\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> defaultTab = attributes[\u003Cspan class=\"hljs-string\">'default-tab'\u003C/span>] || \u003Cspan class=\"hljs-number\">0\u003C/span>;\n                \n                \u003Cspan class=\"hljs-comment\">// Parse tab content (simplified - would need more robust parsing)\u003C/span>\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> tabs = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">parseTabContent\u003C/span>(content);\n                \n                \u003Cspan class=\"hljs-keyword\">let\u003C/span> tabsHtml = \u003Cspan class=\"hljs-string\">'<div class="tabs-component">'\u003C/span>;\n                \n                \u003Cspan class=\"hljs-comment\">// Tab headers\u003C/span>\n                tabsHtml += \u003Cspan class=\"hljs-string\">'<div class="tab-headers" role="tablist">'\u003C/span>;\n                tabs.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">tab, index\u003C/span>) =>\u003C/span> {\n                    \u003Cspan class=\"hljs-keyword\">const\u003C/span> isActive = index == defaultTab ? \u003Cspan class=\"hljs-string\">'active'\u003C/span> : \u003Cspan class=\"hljs-string\">''\u003C/span>;\n                    tabsHtml += \u003Cspan class=\"hljs-string\">`<button class="tab-header \u003Cspan class=\"hljs-subst\">${isActive}\u003C/span>" \n                                        role="tab" \n                                        aria-selected="\u003Cspan class=\"hljs-subst\">${index == defaultTab}\u003C/span>"\n                                        data-tab="\u003Cspan class=\"hljs-subst\">${index}\u003C/span>">\n                                    \u003Cspan class=\"hljs-subst\">${tab.title}\u003C/span>\n                                </button>`\u003C/span>;\n                });\n                tabsHtml += \u003Cspan class=\"hljs-string\">'</div>'\u003C/span>;\n                \n                \u003Cspan class=\"hljs-comment\">// Tab content\u003C/span>\n                tabsHtml += \u003Cspan class=\"hljs-string\">'<div class="tab-contents">'\u003C/span>;\n                tabs.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">tab, index\u003C/span>) =>\u003C/span> {\n                    \u003Cspan class=\"hljs-keyword\">const\u003C/span> isActive = index == defaultTab ? \u003Cspan class=\"hljs-string\">'active'\u003C/span> : \u003Cspan class=\"hljs-string\">''\u003C/span>;\n                    tabsHtml += \u003Cspan class=\"hljs-string\">`<div class="tab-content \u003Cspan class=\"hljs-subst\">${isActive}\u003C/span>" \n                                      role="tabpanel" \n                                      data-tab="\u003Cspan class=\"hljs-subst\">${index}\u003C/span>">\n                                    \u003Cspan class=\"hljs-subst\">${tab.content}\u003C/span>\n                                 </div>`\u003C/span>;\n                });\n                tabsHtml += \u003Cspan class=\"hljs-string\">'</div>'\u003C/span>;\n                \n                tabsHtml += \u003Cspan class=\"hljs-string\">'</div>'\u003C/span>;\n                \n                \u003Cspan class=\"hljs-comment\">// Add JavaScript for tab functionality\u003C/span>\n                tabsHtml += \u003Cspan class=\"hljs-string\">`\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n    const tabComponent = document.querySelector('.tabs-component:last-of-type');\n    const headers = tabComponent.querySelectorAll('.tab-header');\n    const contents = tabComponent.querySelectorAll('.tab-content');\n    \n    headers.forEach(header => {\n        header.addEventListener('click', () => {\n            const tabIndex = header.dataset.tab;\n            \n            // Update headers\n            headers.forEach(h => {\n                h.classList.remove('active');\n                h.setAttribute('aria-selected', 'false');\n            });\n            header.classList.add('active');\n            header.setAttribute('aria-selected', 'true');\n            \n            // Update content\n            contents.forEach(c => c.classList.remove('active'));\n            const targetContent = tabComponent.querySelector(\\`[data-tab="\\${tabIndex}"]\\`);\n            if (targetContent) {\n                targetContent.classList.add('active');\n            }\n        });\n    });\n});\n</script>`\u003C/span>;\n                \n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> tabsHtml;\n            }\n        };\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">createCodeExampleComponent\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> {\n            \u003Cspan class=\"hljs-attr\">attributes\u003C/span>: [\u003Cspan class=\"hljs-string\">'language'\u003C/span>, \u003Cspan class=\"hljs-string\">'title'\u003C/span>, \u003Cspan class=\"hljs-string\">'filename'\u003C/span>, \u003Cspan class=\"hljs-string\">'highlight-lines'\u003C/span>, \u003Cspan class=\"hljs-string\">'copy-button'\u003C/span>],\n            \u003Cspan class=\"hljs-attr\">render\u003C/span>: \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">{ attributes, content }\u003C/span>) =>\u003C/span> {\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> language = attributes.\u003Cspan class=\"hljs-property\">language\u003C/span> || \u003Cspan class=\"hljs-string\">'text'\u003C/span>;\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> title = attributes.\u003Cspan class=\"hljs-property\">title\u003C/span> || \u003Cspan class=\"hljs-string\">''\u003C/span>;\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> filename = attributes.\u003Cspan class=\"hljs-property\">filename\u003C/span> || \u003Cspan class=\"hljs-string\">''\u003C/span>;\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> highlightLines = attributes[\u003Cspan class=\"hljs-string\">'highlight-lines'\u003C/span>] || \u003Cspan class=\"hljs-string\">''\u003C/span>;\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> copyButton = attributes[\u003Cspan class=\"hljs-string\">'copy-button'\u003C/span>] !== \u003Cspan class=\"hljs-string\">'false'\u003C/span>;\n                \n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> headerContent = title || filename;\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> header = headerContent ? \n                    \u003Cspan class=\"hljs-string\">`<div class="code-header">\n                        <span class="code-title">\u003Cspan class=\"hljs-subst\">${headerContent}\u003C/span></span>\n                        \u003Cspan class=\"hljs-subst\">${copyButton ? \u003Cspan class=\"hljs-string\">'<button class="copy-button" title="Copy code">📋</button>'\u003C/span> : \u003Cspan class=\"hljs-string\">''\u003C/span>}\u003C/span>\n                     </div>`\u003C/span> : \u003Cspan class=\"hljs-string\">''\u003C/span>;\n                \n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">`\n<div class="code-example" data-language="\u003Cspan class=\"hljs-subst\">${language}\u003C/span>">\n    \u003Cspan class=\"hljs-subst\">${header}\u003C/span>\n    <pre class="code-block"><code class="language-\u003Cspan class=\"hljs-subst\">${language}\u003C/span>">\u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.escapeHTML(content.trim())}\u003C/span></code></pre>\n</div>`\u003C/span>;\n            }\n        };\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">createImageGalleryComponent\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> {\n            \u003Cspan class=\"hljs-attr\">attributes\u003C/span>: [\u003Cspan class=\"hljs-string\">'layout'\u003C/span>, \u003Cspan class=\"hljs-string\">'columns'\u003C/span>, \u003Cspan class=\"hljs-string\">'lightbox'\u003C/span>],\n            \u003Cspan class=\"hljs-attr\">render\u003C/span>: \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">{ attributes, content }\u003C/span>) =>\u003C/span> {\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> layout = attributes.\u003Cspan class=\"hljs-property\">layout\u003C/span> || \u003Cspan class=\"hljs-string\">'grid'\u003C/span>;\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> columns = attributes.\u003Cspan class=\"hljs-property\">columns\u003C/span> || \u003Cspan class=\"hljs-string\">'3'\u003C/span>;\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> lightbox = attributes.\u003Cspan class=\"hljs-property\">lightbox\u003C/span> === \u003Cspan class=\"hljs-string\">'true'\u003C/span>;\n                \n                \u003Cspan class=\"hljs-comment\">// Parse image content\u003C/span>\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> images = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">parseImageContent\u003C/span>(content);\n                \n                \u003Cspan class=\"hljs-keyword\">let\u003C/span> galleryHtml = \u003Cspan class=\"hljs-string\">`<div class="image-gallery layout-\u003Cspan class=\"hljs-subst\">${layout}\u003C/span>" style="--columns: \u003Cspan class=\"hljs-subst\">${columns}\u003C/span>">`\u003C/span>;\n                \n                images.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">image, index\u003C/span>) =>\u003C/span> {\n                    \u003Cspan class=\"hljs-keyword\">const\u003C/span> lightboxAttr = lightbox ? \u003Cspan class=\"hljs-string\">`data-lightbox="gallery" data-index="\u003Cspan class=\"hljs-subst\">${index}\u003C/span>"`\u003C/span> : \u003Cspan class=\"hljs-string\">''\u003C/span>;\n                    galleryHtml += \u003Cspan class=\"hljs-string\">`\n<figure class="gallery-item">\n    <img src="\u003Cspan class=\"hljs-subst\">${image.src}\u003C/span>" \n         alt="\u003Cspan class=\"hljs-subst\">${image.alt || \u003Cspan class=\"hljs-string\">''\u003C/span>}\u003C/span>" \n         title="\u003Cspan class=\"hljs-subst\">${image.title || \u003Cspan class=\"hljs-string\">''\u003C/span>}\u003C/span>"\n         loading="lazy"\n         \u003Cspan class=\"hljs-subst\">${lightboxAttr}\u003C/span>>\n    \u003Cspan class=\"hljs-subst\">${image.caption ? \u003Cspan class=\"hljs-string\">`<figcaption>\u003Cspan class=\"hljs-subst\">${image.caption}\u003C/span></figcaption>`\u003C/span> : \u003Cspan class=\"hljs-string\">''\u003C/span>}\u003C/span>\n</figure>`\u003C/span>;\n                });\n                \n                galleryHtml += \u003Cspan class=\"hljs-string\">'</div>'\u003C/span>;\n                \n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (lightbox) {\n                    galleryHtml += \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">generateLightboxScript\u003C/span>();\n                }\n                \n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> galleryHtml;\n            }\n        };\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">createTableWrapperComponent\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> {\n            \u003Cspan class=\"hljs-attr\">attributes\u003C/span>: [\u003Cspan class=\"hljs-string\">'responsive'\u003C/span>, \u003Cspan class=\"hljs-string\">'sortable'\u003C/span>, \u003Cspan class=\"hljs-string\">'filterable'\u003C/span>, \u003Cspan class=\"hljs-string\">'pagination'\u003C/span>],\n            \u003Cspan class=\"hljs-attr\">render\u003C/span>: \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">{ attributes, content }\u003C/span>) =>\u003C/span> {\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> responsive = attributes.\u003Cspan class=\"hljs-property\">responsive\u003C/span> !== \u003Cspan class=\"hljs-string\">'false'\u003C/span>;\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> sortable = attributes.\u003Cspan class=\"hljs-property\">sortable\u003C/span> === \u003Cspan class=\"hljs-string\">'true'\u003C/span>;\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> filterable = attributes.\u003Cspan class=\"hljs-property\">filterable\u003C/span> === \u003Cspan class=\"hljs-string\">'true'\u003C/span>;\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> pagination = attributes.\u003Cspan class=\"hljs-property\">pagination\u003C/span> === \u003Cspan class=\"hljs-string\">'true'\u003C/span>;\n                \n                \u003Cspan class=\"hljs-keyword\">let\u003C/span> wrapperClass = \u003Cspan class=\"hljs-string\">'table-wrapper'\u003C/span>;\n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (responsive) wrapperClass += \u003Cspan class=\"hljs-string\">' responsive'\u003C/span>;\n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (sortable) wrapperClass += \u003Cspan class=\"hljs-string\">' sortable'\u003C/span>;\n                \n                \u003Cspan class=\"hljs-keyword\">let\u003C/span> tableHtml = \u003Cspan class=\"hljs-string\">`<div class="\u003Cspan class=\"hljs-subst\">${wrapperClass}\u003C/span>">`\u003C/span>;\n                \n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (filterable) {\n                    tableHtml += \u003Cspan class=\"hljs-string\">`\n<div class="table-controls">\n    <input type="text" \n           class="table-filter" \n           placeholder="Filter table contents..."\n           aria-label="Filter table">\n</div>`\u003C/span>;\n                }\n                \n                tableHtml += content;\n                \n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (pagination) {\n                    tableHtml += \u003Cspan class=\"hljs-string\">`\n<div class="table-pagination">\n    <button class="pagination-prev" disabled>Previous</button>\n    <span class="pagination-info">Page 1 of 1</span>\n    <button class="pagination-next" disabled>Next</button>\n</div>`\u003C/span>;\n                }\n                \n                tableHtml += \u003Cspan class=\"hljs-string\">'</div>'\u003C/span>;\n                \n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (sortable || filterable || pagination) {\n                    tableHtml += \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">generateTableEnhancementScript\u003C/span>({\n                        sortable,\n                        filterable,\n                        pagination\n                    });\n                }\n                \n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> tableHtml;\n            }\n        };\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">createInfoCardComponent\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> {\n            \u003Cspan class=\"hljs-attr\">attributes\u003C/span>: [\u003Cspan class=\"hljs-string\">'variant'\u003C/span>, \u003Cspan class=\"hljs-string\">'icon'\u003C/span>, \u003Cspan class=\"hljs-string\">'link'\u003C/span>, \u003Cspan class=\"hljs-string\">'target'\u003C/span>],\n            \u003Cspan class=\"hljs-attr\">render\u003C/span>: \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">{ attributes, content }\u003C/span>) =>\u003C/span> {\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> variant = attributes.\u003Cspan class=\"hljs-property\">variant\u003C/span> || \u003Cspan class=\"hljs-string\">'default'\u003C/span>;\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> icon = attributes.\u003Cspan class=\"hljs-property\">icon\u003C/span> || \u003Cspan class=\"hljs-string\">''\u003C/span>;\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> link = attributes.\u003Cspan class=\"hljs-property\">link\u003C/span> || \u003Cspan class=\"hljs-string\">''\u003C/span>;\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> target = attributes.\u003Cspan class=\"hljs-property\">target\u003C/span> || \u003Cspan class=\"hljs-string\">'_self'\u003C/span>;\n                \n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> iconHtml = icon ? \u003Cspan class=\"hljs-string\">`<div class="card-icon">\u003Cspan class=\"hljs-subst\">${icon}\u003C/span></div>`\u003C/span> : \u003Cspan class=\"hljs-string\">''\u003C/span>;\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> cardContent = \u003Cspan class=\"hljs-string\">`\u003Cspan class=\"hljs-subst\">${iconHtml}\u003C/span><div class="card-content">\u003Cspan class=\"hljs-subst\">${content}\u003C/span></div>`\u003C/span>;\n                \n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (link) {\n                    \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">`\n<a href="\u003Cspan class=\"hljs-subst\">${link}\u003C/span>" \n   target="\u003Cspan class=\"hljs-subst\">${target}\u003C/span>" \n   class="info-card variant-\u003Cspan class=\"hljs-subst\">${variant}\u003C/span> card-link">\n    \u003Cspan class=\"hljs-subst\">${cardContent}\u003C/span>\n</a>`\u003C/span>;\n                } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n                    \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">`\n<div class="info-card variant-\u003Cspan class=\"hljs-subst\">${variant}\u003C/span>">\n    \u003Cspan class=\"hljs-subst\">${cardContent}\u003C/span>\n</div>`\u003C/span>;\n                }\n            }\n        };\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">parseTabContent\u003C/span>(\u003Cspan class=\"hljs-params\">content\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Simplified tab parsing - would need more robust implementation\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> tabs = [];\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> lines = content.\u003Cspan class=\"hljs-title function_\">split\u003C/span>(\u003Cspan class=\"hljs-string\">'\\n'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> currentTab = \u003Cspan class=\"hljs-literal\">null\u003C/span>;\n        \n        lines.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">line\u003C/span> =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> tabMatch = line.\u003Cspan class=\"hljs-title function_\">match\u003C/span>(\u003Cspan class=\"hljs-regexp\">/^##\\s+(.+)/\u003C/span>);\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (tabMatch) {\n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (currentTab) {\n                    tabs.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(currentTab);\n                }\n                currentTab = {\n                    \u003Cspan class=\"hljs-attr\">title\u003C/span>: tabMatch[\u003Cspan class=\"hljs-number\">1\u003C/span>],\n                    \u003Cspan class=\"hljs-attr\">content\u003C/span>: \u003Cspan class=\"hljs-string\">''\u003C/span>\n                };\n            } \u003Cspan class=\"hljs-keyword\">else\u003C/span> \u003Cspan class=\"hljs-keyword\">if\u003C/span> (currentTab) {\n                currentTab.\u003Cspan class=\"hljs-property\">content\u003C/span> += line + \u003Cspan class=\"hljs-string\">'\\n'\u003C/span>;\n            }\n        });\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (currentTab) {\n            tabs.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(currentTab);\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> tabs;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">parseImageContent\u003C/span>(\u003Cspan class=\"hljs-params\">content\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> images = [];\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> imageRegex = \u003Cspan class=\"hljs-regexp\">/!\\[([^\\]]*)\\]\\(([^)]+)\\)(?:\\s*"([^"]*)")?/g\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> match;\n        \n        \u003Cspan class=\"hljs-keyword\">while\u003C/span> ((match = imageRegex.\u003Cspan class=\"hljs-title function_\">exec\u003C/span>(content)) !== \u003Cspan class=\"hljs-literal\">null\u003C/span>) {\n            images.\u003Cspan class=\"hljs-title function_\">push\u003C/span>({\n                \u003Cspan class=\"hljs-attr\">alt\u003C/span>: match[\u003Cspan class=\"hljs-number\">1\u003C/span>] || \u003Cspan class=\"hljs-string\">''\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">src\u003C/span>: match[\u003Cspan class=\"hljs-number\">2\u003C/span>],\n                \u003Cspan class=\"hljs-attr\">caption\u003C/span>: match[\u003Cspan class=\"hljs-number\">3\u003C/span>] || match[\u003Cspan class=\"hljs-number\">1\u003C/span>] || \u003Cspan class=\"hljs-string\">''\u003C/span>\n            });\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> images;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">getDefaultIcon\u003C/span>(\u003Cspan class=\"hljs-params\">type\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> icons = {\n            \u003Cspan class=\"hljs-attr\">info\u003C/span>: \u003Cspan class=\"hljs-string\">'ℹ️'\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">warning\u003C/span>: \u003Cspan class=\"hljs-string\">'⚠️'\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">error\u003C/span>: \u003Cspan class=\"hljs-string\">'❌'\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">success\u003C/span>: \u003Cspan class=\"hljs-string\">'✅'\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">note\u003C/span>: \u003Cspan class=\"hljs-string\">'📝'\u003C/span>\n        };\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> icons[type] || \u003Cspan class=\"hljs-string\">'📄'\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">generateLightboxScript\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">`\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n    const galleryImages = document.querySelectorAll('[data-lightbox="gallery"]');\n    \n    galleryImages.forEach(img => {\n        img.addEventListener('click', function() {\n            // Simple lightbox implementation\n            const lightbox = document.createElement('div');\n            lightbox.className = 'lightbox';\n            lightbox.innerHTML = \\`\n                <div class="lightbox-content">\n                    <span class="lightbox-close">×</span>\n                    <img src="\\${img.src}" alt="\\${img.alt}">\n                    <div class="lightbox-caption">\\${img.title || img.alt}</div>\n                </div>\n            \\`;\n            \n            document.body.appendChild(lightbox);\n            \n            lightbox.addEventListener('click', function(e) {\n                if (e.target === lightbox || e.target.className === 'lightbox-close') {\n                    lightbox.remove();\n                }\n            });\n        });\n    });\n});\n</script>`\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">generateTableEnhancementScript\u003C/span>(\u003Cspan class=\"hljs-params\">features\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">`\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n    const tableWrapper = document.querySelector('.table-wrapper:last-of-type');\n    const table = tableWrapper.querySelector('table');\n    \n    \u003Cspan class=\"hljs-subst\">${features.sortable ? \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.generateSortableScript() : \u003Cspan class=\"hljs-string\">''\u003C/span>}\u003C/span>\n    \u003Cspan class=\"hljs-subst\">${features.filterable ? \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.generateFilterableScript() : \u003Cspan class=\"hljs-string\">''\u003C/span>}\u003C/span>\n    \u003Cspan class=\"hljs-subst\">${features.pagination ? \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.generatePaginationScript() : \u003Cspan class=\"hljs-string\">''\u003C/span>}\u003C/span>\n});\n</script>`\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">generateSortableScript\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">`\n    // Add sorting functionality\n    const headers = table.querySelectorAll('th');\n    headers.forEach((header, index) => {\n        header.style.cursor = 'pointer';\n        header.addEventListener('click', () => sortTable(index));\n    });\n    \n    function sortTable(columnIndex) {\n        const tbody = table.querySelector('tbody');\n        const rows = Array.from(tbody.rows);\n        const isNumeric = rows.every(row => !isNaN(row.cells[columnIndex].textContent));\n        \n        rows.sort((a, b) => {\n            const aVal = a.cells[columnIndex].textContent.trim();\n            const bVal = b.cells[columnIndex].textContent.trim();\n            \n            if (isNumeric) {\n                return parseFloat(aVal) - parseFloat(bVal);\n            } else {\n                return aVal.localeCompare(bVal);\n            }\n        });\n        \n        rows.forEach(row => tbody.appendChild(row));\n    }`\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">generateFilterableScript\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">`\n    // Add filtering functionality\n    const filterInput = tableWrapper.querySelector('.table-filter');\n    filterInput.addEventListener('input', function() {\n        const filterValue = this.value.toLowerCase();\n        const rows = table.querySelectorAll('tbody tr');\n        \n        rows.forEach(row => {\n            const text = row.textContent.toLowerCase();\n            row.style.display = text.includes(filterValue) ? '' : 'none';\n        });\n    });`\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">generatePaginationScript\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">`\n    // Add pagination functionality\n    const rowsPerPage = 10;\n    let currentPage = 1;\n    const rows = Array.from(table.querySelectorAll('tbody tr'));\n    const totalPages = Math.ceil(rows.length / rowsPerPage);\n    \n    function showPage(page) {\n        const start = (page - 1) * rowsPerPage;\n        const end = start + rowsPerPage;\n        \n        rows.forEach((row, index) => {\n            row.style.display = (index >= start && index < end) ? '' : 'none';\n        });\n        \n        document.querySelector('.pagination-info').textContent = \n            \\`Page \\${page} of \\${totalPages}\\`;\n        \n        document.querySelector('.pagination-prev').disabled = page === 1;\n        document.querySelector('.pagination-next').disabled = page === totalPages;\n    }\n    \n    document.querySelector('.pagination-prev').addEventListener('click', () => {\n        if (currentPage > 1) {\n            currentPage--;\n            showPage(currentPage);\n        }\n    });\n    \n    document.querySelector('.pagination-next').addEventListener('click', () => {\n        if (currentPage < totalPages) {\n            currentPage++;\n            showPage(currentPage);\n        }\n    });\n    \n    showPage(1);`\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">renderErrorComponent\u003C/span>(\u003Cspan class=\"hljs-params\">componentName, errorMessage\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">`\n<div class="component-error" role="alert">\n    <strong>Component Error:</strong> Failed to render "\u003Cspan class=\"hljs-subst\">${componentName}\u003C/span>" component.\n    \u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.options.debugMode ? \u003Cspan class=\"hljs-string\">`<br><em>Error: \u003Cspan class=\"hljs-subst\">${errorMessage}\u003C/span></em>`\u003C/span> : \u003Cspan class=\"hljs-string\">''\u003C/span>}\u003C/span>\n</div>`\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">escapeHTML\u003C/span>(\u003Cspan class=\"hljs-params\">html\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> = html;\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> div.\u003Cspan class=\"hljs-property\">innerHTML\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-comment\">// Public API\u003C/span>\n    \u003Cspan class=\"hljs-title function_\">process\u003C/span>(\u003Cspan class=\"hljs-params\">content\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">processDocument\u003C/span>(content);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">addComponent\u003C/span>(\u003Cspan class=\"hljs-params\">name, component\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">registerComponent\u003C/span>(name, component);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">removeComponent\u003C/span>(\u003Cspan class=\"hljs-params\">name\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">components\u003C/span>.\u003Cspan class=\"hljs-title function_\">delete\u003C/span>(name);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">listComponents\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \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\">components\u003C/span>.\u003Cspan class=\"hljs-title function_\">keys\u003C/span>());\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">setVariable\u003C/span>(\u003Cspan class=\"hljs-params\">name, value\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">renderingContext\u003C/span>.\u003Cspan class=\"hljs-property\">variables\u003C/span>.\u003Cspan class=\"hljs-title function_\">set\u003C/span>(name, value);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">getVariable\u003C/span>(\u003Cspan class=\"hljs-params\">name\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">renderingContext\u003C/span>.\u003Cspan class=\"hljs-property\">variables\u003C/span>.\u003Cspan class=\"hljs-title function_\">get\u003C/span>(name);\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">// Usage example\u003C/span>\n\u003Cspan class=\"hljs-keyword\">const\u003C/span> componentSystem = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">MarkdownComponentSystem\u003C/span>({\n    \u003Cspan class=\"hljs-attr\">componentPrefix\u003C/span>: \u003Cspan class=\"hljs-string\">'md-'\u003C/span>,\n    \u003Cspan class=\"hljs-attr\">enableNesting\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n    \u003Cspan class=\"hljs-attr\">allowMarkdownInComponents\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n    \u003Cspan class=\"hljs-attr\">debugMode\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>\n});\n\n\u003Cspan class=\"hljs-comment\">// Example document with custom components\u003C/span>\n\u003Cspan class=\"hljs-keyword\">const\u003C/span> documentContent = \u003Cspan class=\"hljs-string\">`\n# Advanced Content Example\n\n<md-callout type="info" title="Getting Started">\nThis is an **informational callout** with Markdown formatting support.\n\n- Feature 1\n- Feature 2\n- Feature 3\n</md-callout>\n\n<md-tabs default-tab="0">\n## JavaScript Example\n\n\\`\\`\\`javascript\nfunction example() {\n    console.log("Tab content with code");\n}\n\\`\\`\\`\n\n## Python Example\n\n\\`\\`\\`python\ndef example():\n    print("Python code example")\n\\`\\`\\`\n</md-tabs>\n\n<md-code-example language="html" title="Component Usage" copy-button="true">\n<md-callout type="success">\n    Nested components work seamlessly!\n</md-callout>\n</md-code-example>\n\nRegular **Markdown content** continues normally between components.\n`\u003C/span>;\n\n\u003Cspan class=\"hljs-keyword\">const\u003C/span> processedContent = componentSystem.\u003Cspan class=\"hljs-title function_\">process\u003C/span>(documentContent);\n\u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">log\u003C/span>(processedContent);\n\u003C/code>\u003C/pre>\u003Ch2 id=\"responsive-design-integration\">Responsive Design Integration\u003C/h2>\n\u003Ch3 id=\"css-framework-for-html-markdown-integration\">CSS Framework for HTML-Markdown Integration\u003C/h3>\n\u003Cp>Comprehensive styling system for mixed content:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-css\">\u003Cspan class=\"hljs-comment\">/* markdown-html-integration.css - Complete styling for mixed HTML-Markdown content */\u003C/span>\n\n\u003Cspan class=\"hljs-comment\">/* Base responsive grid system for HTML components */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.markdown-content\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">max-width\u003C/span>: \u003Cspan class=\"hljs-number\">1200px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span> auto;\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">1rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-number\">1.6\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-family\u003C/span>: -apple-system, BlinkMacSystemFont, \u003Cspan class=\"hljs-string\">'Segoe UI'\u003C/span>, Roboto, sans-serif;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Component container base styles */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.component-wrapper\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\">position\u003C/span>: relative;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Two-column responsive layout */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.two-column-layout\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">display\u003C/span>: grid;\n    \u003Cspan class=\"hljs-attribute\">grid-template-columns\u003C/span>: \u003Cspan class=\"hljs-number\">1\u003C/span>fr \u003Cspan class=\"hljs-number\">1\u003C/span>fr;\n    \u003Cspan class=\"hljs-attribute\">gap\u003C/span>: \u003Cspan class=\"hljs-number\">2rem\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}\n\n\u003Cspan class=\"hljs-selector-class\">.column\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">1rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">8px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#f8f9fa\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border-left\u003C/span>: \u003Cspan class=\"hljs-number\">4px\u003C/span> solid \u003Cspan class=\"hljs-number\">#007bff\u003C/span>;\n}\n\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\">.two-column-layout\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">grid-template-columns\u003C/span>: \u003Cspan class=\"hljs-number\">1\u003C/span>fr;\n        \u003Cspan class=\"hljs-attribute\">gap\u003C/span>: \u003Cspan class=\"hljs-number\">1rem\u003C/span>;\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">/* Enhanced table styling */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.enhanced-table\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">100%\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border-collapse\u003C/span>: collapse;\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\">background\u003C/span>: white;\n    \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">8px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">overflow\u003C/span>: hidden;\n    \u003Cspan class=\"hljs-attribute\">box-shadow\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">2px\u003C/span> \u003Cspan class=\"hljs-number\">8px\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\">.enhanced-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span>,\n\u003Cspan class=\"hljs-selector-class\">.enhanced-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">1rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: left;\n    \u003Cspan class=\"hljs-attribute\">border-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-number\">#e9ecef\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.enhanced-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#495057\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: white;\n    \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">600\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">position\u003C/span>: sticky;\n    \u003Cspan class=\"hljs-attribute\">top\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">z-index\u003C/span>: \u003Cspan class=\"hljs-number\">10\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.enhanced-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">tbody\u003C/span> \u003Cspan class=\"hljs-selector-tag\">tr\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:hover\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#f8f9fa\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.enhanced-table\u003C/span> \u003Cspan class=\"hljs-selector-class\">.benefit-list\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">padding-left\u003C/span>: \u003Cspan class=\"hljs-number\">1rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">list-style\u003C/span>: none;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.enhanced-table\u003C/span> \u003Cspan class=\"hljs-selector-class\">.benefit-list\u003C/span> \u003Cspan class=\"hljs-selector-tag\">li\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">0.25rem\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">position\u003C/span>: relative;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.enhanced-table\u003C/span> \u003Cspan class=\"hljs-selector-class\">.benefit-list\u003C/span> \u003Cspan class=\"hljs-selector-tag\">li\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">::before\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">content\u003C/span>: \u003Cspan class=\"hljs-string\">'✓'\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#28a745\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: bold;\n    \u003Cspan class=\"hljs-attribute\">position\u003C/span>: absolute;\n    \u003Cspan class=\"hljs-attribute\">left\u003C/span>: -\u003Cspan class=\"hljs-number\">1rem\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Responsive table wrapper */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.table-wrapper\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">overflow-x\u003C/span>: auto;\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\">border\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-number\">#dee2e6\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">8px\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.table-wrapper\u003C/span>\u003Cspan class=\"hljs-selector-class\">.responsive\u003C/span> \u003Cspan class=\"hljs-selector-tag\">table\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">min-width\u003C/span>: \u003Cspan class=\"hljs-number\">600px\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Table controls styling */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.table-controls\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">1rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#f8f9fa\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-number\">#dee2e6\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">display\u003C/span>: flex;\n    \u003Cspan class=\"hljs-attribute\">justify-content\u003C/span>: space-between;\n    \u003Cspan class=\"hljs-attribute\">align-items\u003C/span>: center;\n    \u003Cspan class=\"hljs-attribute\">flex-wrap\u003C/span>: wrap;\n    \u003Cspan class=\"hljs-attribute\">gap\u003C/span>: \u003Cspan class=\"hljs-number\">1rem\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.table-filter\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">flex\u003C/span>: \u003Cspan class=\"hljs-number\">1\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">min-width\u003C/span>: \u003Cspan class=\"hljs-number\">200px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">0.5rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-number\">#ced4da\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.9rem\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.table-pagination\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">1rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#f8f9fa\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border-top\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-number\">#dee2e6\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">display\u003C/span>: flex;\n    \u003Cspan class=\"hljs-attribute\">justify-content\u003C/span>: center;\n    \u003Cspan class=\"hljs-attribute\">align-items\u003C/span>: center;\n    \u003Cspan class=\"hljs-attribute\">gap\u003C/span>: \u003Cspan class=\"hljs-number\">1rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">flex-wrap\u003C/span>: wrap;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.pagination-prev\u003C/span>,\n\u003Cspan class=\"hljs-selector-class\">.pagination-next\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">0.5rem\u003C/span> \u003Cspan class=\"hljs-number\">1rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#007bff\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\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">4px\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\">.pagination-prev\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:disabled\u003C/span>,\n\u003Cspan class=\"hljs-selector-class\">.pagination-next\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:disabled\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#6c757d\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">cursor\u003C/span>: not-allowed;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.pagination-prev\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:hover\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:not\u003C/span>(\u003Cspan class=\"hljs-selector-pseudo\">:disabled\u003C/span>),\n\u003Cspan class=\"hljs-selector-class\">.pagination-next\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:hover\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:not\u003C/span>(\u003Cspan class=\"hljs-selector-pseudo\">:disabled\u003C/span>) {\n    \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#0056b3\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.pagination-info\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">0.9rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#6c757d\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">min-width\u003C/span>: \u003Cspan class=\"hljs-number\">100px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: center;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Form integration styling */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.markdown-form\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">background\u003C/span>: white;\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">2rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">8px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-number\">#dee2e6\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\">2px\u003C/span> \u003Cspan class=\"hljs-number\">4px\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.05\u003C/span>);\n}\n\n\u003Cspan class=\"hljs-selector-class\">.markdown-form\u003C/span> \u003Cspan class=\"hljs-selector-tag\">fieldset\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">border\u003C/span>: none;\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\">0\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.markdown-form\u003C/span> \u003Cspan class=\"hljs-selector-tag\">legend\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">1.25rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">600\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#495057\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">margin-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">1.5rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">padding-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">0.5rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">2px\u003C/span> solid \u003Cspan class=\"hljs-number\">#e9ecef\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">100%\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.form-group\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">margin-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">1.5rem\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.form-group\u003C/span> \u003Cspan class=\"hljs-selector-tag\">label\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">display\u003C/span>: block;\n    \u003Cspan class=\"hljs-attribute\">margin-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">0.5rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">600\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#495057\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.form-group\u003C/span> \u003Cspan class=\"hljs-selector-tag\">input\u003C/span>,\n\u003Cspan class=\"hljs-selector-class\">.form-group\u003C/span> select,\n\u003Cspan class=\"hljs-selector-class\">.form-group\u003C/span> \u003Cspan class=\"hljs-selector-tag\">textarea\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">width\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>;\n    \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-number\">#ced4da\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\">1rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">transition\u003C/span>: border-color \u003Cspan class=\"hljs-number\">0.2s\u003C/span>, box-shadow \u003Cspan class=\"hljs-number\">0.2s\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.form-group\u003C/span> \u003Cspan class=\"hljs-selector-tag\">input\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:focus\u003C/span>,\n\u003Cspan class=\"hljs-selector-class\">.form-group\u003C/span> select\u003Cspan class=\"hljs-selector-pseudo\">:focus\u003C/span>,\n\u003Cspan class=\"hljs-selector-class\">.form-group\u003C/span> \u003Cspan class=\"hljs-selector-tag\">textarea\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:focus\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">border-color\u003C/span>: \u003Cspan class=\"hljs-number\">#007bff\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">box-shadow\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.2rem\u003C/span> \u003Cspan class=\"hljs-built_in\">rgba\u003C/span>(\u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-number\">123\u003C/span>, \u003Cspan class=\"hljs-number\">255\u003C/span>, \u003Cspan class=\"hljs-number\">0.25\u003C/span>);\n    \u003Cspan class=\"hljs-attribute\">outline\u003C/span>: none;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.form-group\u003C/span> small {\n    \u003Cspan class=\"hljs-attribute\">display\u003C/span>: block;\n    \u003Cspan class=\"hljs-attribute\">margin-top\u003C/span>: \u003Cspan class=\"hljs-number\">0.5rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#6c757d\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">0.875rem\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.submit-button\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#28a745\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: white;\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">0.75rem\u003C/span> \u003Cspan class=\"hljs-number\">1.5rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border\u003C/span>: none;\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\">1rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">600\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\">.submit-button\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:hover\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#218838\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Custom component styling */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.callout\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">1.5rem\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\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">8px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border-left\u003C/span>: \u003Cspan class=\"hljs-number\">4px\u003C/span> solid;\n    \u003Cspan class=\"hljs-attribute\">position\u003C/span>: relative;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.callout-info\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#e7f3ff\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border-color\u003C/span>: \u003Cspan class=\"hljs-number\">#007bff\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.callout-warning\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#fff3cd\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border-color\u003C/span>: \u003Cspan class=\"hljs-number\">#ffc107\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.callout-error\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#f8d7da\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border-color\u003C/span>: \u003Cspan class=\"hljs-number\">#dc3545\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.callout-success\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#d4edda\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border-color\u003C/span>: \u003Cspan class=\"hljs-number\">#28a745\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.callout-note\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#f8f9fa\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border-color\u003C/span>: \u003Cspan class=\"hljs-number\">#6c757d\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.callout-title\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">600\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">margin-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">1rem\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\">gap\u003C/span>: \u003Cspan class=\"hljs-number\">0.5rem\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.callout-content\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\">.callout-content\u003C/span>\u003Cspan class=\"hljs-selector-class\">.collapsible\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">max-height\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">overflow\u003C/span>: hidden;\n    \u003Cspan class=\"hljs-attribute\">transition\u003C/span>: max-height \u003Cspan class=\"hljs-number\">0.3s\u003C/span> ease;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Tabs component styling */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.tabs-component\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\">border\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-number\">#dee2e6\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">8px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">overflow\u003C/span>: hidden;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.tab-headers\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">display\u003C/span>: flex;\n    \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#f8f9fa\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-number\">#dee2e6\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">flex-wrap\u003C/span>: wrap;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.tab-header\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">flex\u003C/span>: \u003Cspan class=\"hljs-number\">1\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">min-width\u003C/span>: \u003Cspan class=\"hljs-number\">120px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">1rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">background\u003C/span>: none;\n    \u003Cspan class=\"hljs-attribute\">border\u003C/span>: none;\n    \u003Cspan class=\"hljs-attribute\">cursor\u003C/span>: pointer;\n    \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">0.9rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">500\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#6c757d\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">transition\u003C/span>: all \u003Cspan class=\"hljs-number\">0.2s\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">3px\u003C/span> solid transparent;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.tab-header\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:hover\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#e9ecef\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.tab-header\u003C/span>\u003Cspan class=\"hljs-selector-class\">.active\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">background\u003C/span>: white;\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#007bff\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border-bottom-color\u003C/span>: \u003Cspan class=\"hljs-number\">#007bff\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.tab-contents\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">background\u003C/span>: white;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.tab-content\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">display\u003C/span>: none;\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">2rem\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.tab-content\u003C/span>\u003Cspan class=\"hljs-selector-class\">.active\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">display\u003C/span>: block;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Code example component styling */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.code-example\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\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">8px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">overflow\u003C/span>: hidden;\n    \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-number\">#e1e8ed\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.code-header\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#f8f9fa\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\">#e1e8ed\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">display\u003C/span>: flex;\n    \u003Cspan class=\"hljs-attribute\">justify-content\u003C/span>: space-between;\n    \u003Cspan class=\"hljs-attribute\">align-items\u003C/span>: center;\n    \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">0.9rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">600\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#495057\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.code-title\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">flex\u003C/span>: \u003Cspan class=\"hljs-number\">1\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.copy-button\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">background\u003C/span>: none;\n    \u003Cspan class=\"hljs-attribute\">border\u003C/span>: none;\n    \u003Cspan class=\"hljs-attribute\">cursor\u003C/span>: pointer;\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">0.25rem\u003C/span> \u003Cspan class=\"hljs-number\">0.5rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">4px\u003C/span>;\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\">#e9ecef\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.code-block\u003C/span> {\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>;\n    \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#f8f9fa\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-family\u003C/span>: \u003Cspan class=\"hljs-string\">'Fira Code'\u003C/span>, \u003Cspan class=\"hljs-string\">'Monaco'\u003C/span>, \u003Cspan class=\"hljs-string\">'Menlo'\u003C/span>, monospace;\n    \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">0.9rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-number\">1.5\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">overflow-x\u003C/span>: auto;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Image gallery styling */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.image-gallery\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}\n\n\u003Cspan class=\"hljs-selector-class\">.image-gallery\u003C/span>\u003Cspan class=\"hljs-selector-class\">.layout-grid\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">display\u003C/span>: grid;\n    \u003Cspan class=\"hljs-attribute\">grid-template-columns\u003C/span>: \u003Cspan class=\"hljs-built_in\">repeat\u003C/span>(\u003Cspan class=\"hljs-built_in\">var\u003C/span>(--columns, \u003Cspan class=\"hljs-number\">3\u003C/span>), \u003Cspan class=\"hljs-number\">1\u003C/span>fr);\n    \u003Cspan class=\"hljs-attribute\">gap\u003C/span>: \u003Cspan class=\"hljs-number\">1rem\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.gallery-item\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">background\u003C/span>: white;\n    \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">8px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">overflow\u003C/span>: hidden;\n    \u003Cspan class=\"hljs-attribute\">box-shadow\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">2px\u003C/span> \u003Cspan class=\"hljs-number\">8px\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    \u003Cspan class=\"hljs-attribute\">transition\u003C/span>: transform \u003Cspan class=\"hljs-number\">0.2s\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.gallery-item\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:hover\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">transform\u003C/span>: \u003Cspan class=\"hljs-built_in\">translateY\u003C/span>(-\u003Cspan class=\"hljs-number\">2px\u003C/span>);\n    \u003Cspan class=\"hljs-attribute\">box-shadow\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">4px\u003C/span> \u003Cspan class=\"hljs-number\">12px\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.15\u003C/span>);\n}\n\n\u003Cspan class=\"hljs-selector-class\">.gallery-item\u003C/span> \u003Cspan class=\"hljs-selector-tag\">img\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">100%\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">height\u003C/span>: \u003Cspan class=\"hljs-number\">200px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">object-fit\u003C/span>: cover;\n    \u003Cspan class=\"hljs-attribute\">cursor\u003C/span>: pointer;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.gallery-item\u003C/span> \u003Cspan class=\"hljs-selector-tag\">figcaption\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">1rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">0.9rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#495057\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Info card styling */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.info-card\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">display\u003C/span>: block;\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">1.5rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">1rem\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">background\u003C/span>: white;\n    \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-number\">#dee2e6\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">8px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">box-shadow\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">2px\u003C/span> \u003Cspan class=\"hljs-number\">4px\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.05\u003C/span>);\n    \u003Cspan class=\"hljs-attribute\">transition\u003C/span>: all \u003Cspan class=\"hljs-number\">0.2s\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.info-card\u003C/span>\u003Cspan class=\"hljs-selector-class\">.card-link\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">text-decoration\u003C/span>: none;\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: inherit;\n    \u003Cspan class=\"hljs-attribute\">cursor\u003C/span>: pointer;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.info-card\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:hover\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">transform\u003C/span>: \u003Cspan class=\"hljs-built_in\">translateY\u003C/span>(-\u003Cspan class=\"hljs-number\">2px\u003C/span>);\n    \u003Cspan class=\"hljs-attribute\">box-shadow\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">4px\u003C/span> \u003Cspan class=\"hljs-number\">12px\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\">.info-card\u003C/span>\u003Cspan class=\"hljs-selector-class\">.variant-primary\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">border-color\u003C/span>: \u003Cspan class=\"hljs-number\">#007bff\u003C/span>;\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\">#e7f3ff\u003C/span> \u003Cspan class=\"hljs-number\">0%\u003C/span>, \u003Cspan class=\"hljs-number\">#ffffff\u003C/span> \u003Cspan class=\"hljs-number\">100%\u003C/span>);\n}\n\n\u003Cspan class=\"hljs-selector-class\">.info-card\u003C/span>\u003Cspan class=\"hljs-selector-class\">.variant-success\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">border-color\u003C/span>: \u003Cspan class=\"hljs-number\">#28a745\u003C/span>;\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\">#d4edda\u003C/span> \u003Cspan class=\"hljs-number\">0%\u003C/span>, \u003Cspan class=\"hljs-number\">#ffffff\u003C/span> \u003Cspan class=\"hljs-number\">100%\u003C/span>);\n}\n\n\u003Cspan class=\"hljs-selector-class\">.info-card\u003C/span>\u003Cspan class=\"hljs-selector-class\">.variant-warning\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">border-color\u003C/span>: \u003Cspan class=\"hljs-number\">#ffc107\u003C/span>;\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\">#fff3cd\u003C/span> \u003Cspan class=\"hljs-number\">0%\u003C/span>, \u003Cspan class=\"hljs-number\">#ffffff\u003C/span> \u003Cspan class=\"hljs-number\">100%\u003C/span>);\n}\n\n\u003Cspan class=\"hljs-selector-class\">.card-icon\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">2rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">margin-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">1rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: center;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.card-content\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">flex\u003C/span>: \u003Cspan class=\"hljs-number\">1\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Lightbox styling */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.lightbox\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">position\u003C/span>: fixed;\n    \u003Cspan class=\"hljs-attribute\">top\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">left\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">right\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\">background\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.9\u003C/span>);\n    \u003Cspan class=\"hljs-attribute\">display\u003C/span>: flex;\n    \u003Cspan class=\"hljs-attribute\">justify-content\u003C/span>: center;\n    \u003Cspan class=\"hljs-attribute\">align-items\u003C/span>: center;\n    \u003Cspan class=\"hljs-attribute\">z-index\u003C/span>: \u003Cspan class=\"hljs-number\">1000\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">opacity\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">animation\u003C/span>: fadeIn \u003Cspan class=\"hljs-number\">0.3s\u003C/span> forwards;\n}\n\n\u003Cspan class=\"hljs-keyword\">@keyframes\u003C/span> fadeIn {\n    \u003Cspan class=\"hljs-selector-tag\">to\u003C/span> { \u003Cspan class=\"hljs-attribute\">opacity\u003C/span>: \u003Cspan class=\"hljs-number\">1\u003C/span>; }\n}\n\n\u003Cspan class=\"hljs-selector-class\">.lightbox-content\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">position\u003C/span>: relative;\n    \u003Cspan class=\"hljs-attribute\">max-width\u003C/span>: \u003Cspan class=\"hljs-number\">90%\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">max-height\u003C/span>: \u003Cspan class=\"hljs-number\">90%\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.lightbox-content\u003C/span> \u003Cspan class=\"hljs-selector-tag\">img\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">max-width\u003C/span>: \u003Cspan class=\"hljs-number\">100%\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">max-height\u003C/span>: \u003Cspan class=\"hljs-number\">100%\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">object-fit\u003C/span>: contain;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.lightbox-close\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">position\u003C/span>: absolute;\n    \u003Cspan class=\"hljs-attribute\">top\u003C/span>: -\u003Cspan class=\"hljs-number\">40px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">right\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: white;\n    \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">2rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">cursor\u003C/span>: pointer;\n    \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-number\">1\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.lightbox-caption\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">position\u003C/span>: absolute;\n    \u003Cspan class=\"hljs-attribute\">bottom\u003C/span>: -\u003Cspan class=\"hljs-number\">40px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">left\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">right\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: white;\n    \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: center;\n    \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">0.9rem\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Component error styling */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.component-error\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#f8d7da\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#721c24\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">1rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">1rem\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-number\">#f5c6cb\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.9rem\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Mobile 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\">.markdown-content\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">0.5rem\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.image-gallery\u003C/span>\u003Cspan class=\"hljs-selector-class\">.layout-grid\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">grid-template-columns\u003C/span>: \u003Cspan class=\"hljs-number\">1\u003C/span>fr;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.tab-headers\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">flex-direction\u003C/span>: column;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.tab-header\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">flex\u003C/span>: none;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.table-controls\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">flex-direction\u003C/span>: column;\n        \u003Cspan class=\"hljs-attribute\">align-items\u003C/span>: stretch;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.table-filter\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">min-width\u003C/span>: auto;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.callout\u003C/span>,\n    \u003Cspan class=\"hljs-selector-class\">.info-card\u003C/span>,\n    \u003Cspan class=\"hljs-selector-class\">.code-example\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">margin-left\u003C/span>: -\u003Cspan class=\"hljs-number\">0.5rem\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">margin-right\u003C/span>: -\u003Cspan class=\"hljs-number\">0.5rem\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">/* Print styles for mixed content */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> print {\n    \u003Cspan class=\"hljs-selector-class\">.lightbox\u003C/span>,\n    \u003Cspan class=\"hljs-selector-class\">.copy-button\u003C/span>,\n    \u003Cspan class=\"hljs-selector-class\">.tab-headers\u003C/span>,\n    \u003Cspan class=\"hljs-selector-class\">.table-controls\u003C/span>,\n    \u003Cspan class=\"hljs-selector-class\">.table-pagination\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">display\u003C/span>: none \u003Cspan class=\"hljs-meta\">!important\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.tab-content\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">display\u003C/span>: block \u003Cspan class=\"hljs-meta\">!important\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">page-break-inside\u003C/span>: avoid;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.callout\u003C/span>,\n    \u003Cspan class=\"hljs-selector-class\">.info-card\u003C/span>,\n    \u003Cspan class=\"hljs-selector-class\">.code-example\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">page-break-inside\u003C/span>: avoid;\n        \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-number\">#000\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">background\u003C/span>: white \u003Cspan class=\"hljs-meta\">!important\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.enhanced-table\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">0.8rem\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.image-gallery\u003C/span>\u003Cspan class=\"hljs-selector-class\">.layout-grid\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">grid-template-columns\u003C/span>: \u003Cspan class=\"hljs-built_in\">repeat\u003C/span>(\u003Cspan class=\"hljs-number\">2\u003C/span>, \u003Cspan class=\"hljs-number\">1\u003C/span>fr);\n    }\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\">.callout\u003C/span>,\n    \u003Cspan class=\"hljs-selector-class\">.info-card\u003C/span>,\n    \u003Cspan class=\"hljs-selector-class\">.enhanced-table\u003C/span>,\n    \u003Cspan class=\"hljs-selector-class\">.code-example\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">2px\u003C/span> solid;\n        \u003Cspan class=\"hljs-attribute\">background\u003C/span>: white;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.tab-header\u003C/span>\u003Cspan class=\"hljs-selector-class\">.active\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">background\u003C/span>: highlight;\n        \u003Cspan class=\"hljs-attribute\">color\u003C/span>: highlighttext;\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\">.gallery-item\u003C/span>,\n    \u003Cspan class=\"hljs-selector-class\">.info-card\u003C/span>,\n    \u003Cspan class=\"hljs-selector-class\">.callout-content\u003C/span>,\n    \u003Cspan class=\"hljs-selector-class\">.lightbox\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">transition\u003C/span>: none;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.lightbox\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">animation\u003C/span>: none;\n        \u003Cspan class=\"hljs-attribute\">opacity\u003C/span>: \u003Cspan class=\"hljs-number\">1\u003C/span>;\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">/* Focus management for keyboard navigation */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.tab-header\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:focus\u003C/span>,\n\u003Cspan class=\"hljs-selector-class\">.copy-button\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:focus\u003C/span>,\n\u003Cspan class=\"hljs-selector-class\">.gallery-item\u003C/span> \u003Cspan class=\"hljs-selector-tag\">img\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:focus\u003C/span>,\n\u003Cspan class=\"hljs-selector-class\">.info-card\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\">#007bff\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">outline-offset\u003C/span>: \u003Cspan class=\"hljs-number\">2px\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Skip links for accessibility */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.skip-to-content\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">position\u003C/span>: absolute;\n    \u003Cspan class=\"hljs-attribute\">top\u003C/span>: -\u003Cspan class=\"hljs-number\">40px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">left\u003C/span>: \u003Cspan class=\"hljs-number\">6px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#000\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: white;\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">8px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">text-decoration\u003C/span>: none;\n    \u003Cspan class=\"hljs-attribute\">z-index\u003C/span>: \u003Cspan class=\"hljs-number\">1000\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">4px\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.skip-to-content\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:focus\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">top\u003C/span>: \u003Cspan class=\"hljs-number\">6px\u003C/span>;\n}\n\u003C/code>\u003C/pre>\u003Ch2 id=\"platform-specific-integration-patterns\">Platform-Specific Integration Patterns\u003C/h2>\n\u003Ch3 id=\"jekyll-and-liquid-integration\">Jekyll and Liquid Integration\u003C/h3>\n\u003Cp>Advanced Jekyll integration with HTML components:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-liquid\"><!-- _includes/html-component-handler.liquid -->\n<!-- Enhanced HTML component processor for Jekyll -->\n\n{% comment %}\nUsage: {% include html-component-handler.liquid content=page.content %}\n{% endcomment %}\n\n{% assign processed_content = include.content %}\n\n<!-- Process custom HTML components -->\n{% assign component_types = 'callout,tabs,code-example,gallery,info-card' | split: ',' %}\n\n{% for component_type in component_types %}\n    {% case component_type %}\n        {% when 'callout' %}\n            {% assign processed_content = processed_content | replace: '<md-callout', '<div class="callout' %}\n            {% assign processed_content = processed_content | replace: '</md-callout>', '</div>' %}\n        {% when 'tabs' %}\n            {% assign processed_content = processed_content | replace: '<md-tabs', '<div class="tabs-component' %}\n            {% assign processed_content = processed_content | replace: '</md-tabs>', '</div>' %}\n        {% when 'code-example' %}\n            {% assign processed_content = processed_content | replace: '<md-code-example', '<div class="code-example' %}\n            {% assign processed_content = processed_content | replace: '</md-code-example>', '</div>' %}\n    {% endcase %}\n{% endfor %}\n\n<!-- Process enhanced attributes -->\n{% assign processed_content = processed_content | replace: 'type="info"', 'class="callout-info"' %}\n{% assign processed_content = processed_content | replace: 'type="warning"', 'class="callout-warning"' %}\n{% assign processed_content = processed_content | replace: 'type="error"', 'class="callout-error"' %}\n\n<!-- Enhanced table processing -->\n{% if processed_content contains '<table' %}\n    {% assign enhanced_tables = processed_content | split: '<table' %}\n    {% assign rebuilt_content = enhanced_tables[0] %}\n    \n    {% for table_part in enhanced_tables offset:1 %}\n        {% if table_part contains 'class="enhanced"' %}\n            {% assign rebuilt_content = rebuilt_content | append: '<div class="table-wrapper responsive"><table class="enhanced-table"' | append: table_part %}\n            {% assign rebuilt_content = rebuilt_content | append: '</div>' %}\n        {% else %}\n            {% assign rebuilt_content = rebuilt_content | append: '<table' | append: table_part %}\n        {% endif %}\n    {% endfor %}\n    \n    {% assign processed_content = rebuilt_content %}\n{% endif %}\n\n<!-- Output processed content -->\n{{ processed_content }}\n\n<!-- Add required JavaScript for interactive components -->\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n    // Initialize tabs\n    const tabComponents = document.querySelectorAll('.tabs-component');\n    tabComponents.forEach(component => {\n        initializeTabs(component);\n    });\n    \n    // Initialize copy buttons\n    const copyButtons = document.querySelectorAll('.copy-button');\n    copyButtons.forEach(button => {\n        initializeCopyButton(button);\n    });\n    \n    // Initialize enhanced tables\n    const enhancedTables = document.querySelectorAll('.enhanced-table');\n    enhancedTables.forEach(table => {\n        initializeTableEnhancements(table);\n    });\n});\n\nfunction initializeTabs(component) {\n    const headers = component.querySelectorAll('.tab-header');\n    const contents = component.querySelectorAll('.tab-content');\n    \n    headers.forEach((header, index) => {\n        header.addEventListener('click', () => {\n            // Remove active class from all\n            headers.forEach(h => h.classList.remove('active'));\n            contents.forEach(c => c.classList.remove('active'));\n            \n            // Add active class to clicked\n            header.classList.add('active');\n            contents[index].classList.add('active');\n        });\n    });\n}\n\nfunction initializeCopyButton(button) {\n    button.addEventListener('click', () => {\n        const codeBlock = button.closest('.code-example').querySelector('code');\n        if (codeBlock) {\n            navigator.clipboard.writeText(codeBlock.textContent).then(() => {\n                button.textContent = '✓ Copied!';\n                setTimeout(() => {\n                    button.textContent = '📋';\n                }, 2000);\n            });\n        }\n    });\n}\n\nfunction initializeTableEnhancements(table) {\n    // Add sorting to headers\n    const headers = table.querySelectorAll('th');\n    headers.forEach((header, index) => {\n        header.style.cursor = 'pointer';\n        header.addEventListener('click', () => sortTable(table, index));\n    });\n}\n\nfunction sortTable(table, columnIndex) {\n    const tbody = table.querySelector('tbody');\n    const rows = Array.from(tbody.rows);\n    \n    const isNumeric = rows.every(row => {\n        const cellText = row.cells[columnIndex].textContent.trim();\n        return !isNaN(cellText) && cellText !== '';\n    });\n    \n    rows.sort((a, b) => {\n        const aVal = a.cells[columnIndex].textContent.trim();\n        const bVal = b.cells[columnIndex].textContent.trim();\n        \n        if (isNumeric) {\n            return parseFloat(aVal) - parseFloat(bVal);\n        } else {\n            return aVal.localeCompare(bVal);\n        }\n    });\n    \n    rows.forEach(row => tbody.appendChild(row));\n}\n</script>\n\u003C/code>\u003C/pre>\u003Ch3 id=\"hugo-shortcode-integration\">Hugo Shortcode Integration\u003C/h3>\n\u003Cp>Creating powerful shortcodes for HTML-Markdown integration:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-go\"><!-- layouts/shortcodes/enhanced-content.html -->\n{{ $\u003Cspan class=\"hljs-keyword\">type\u003C/span> := .Get \u003Cspan class=\"hljs-string\">"type"\u003C/span> | \u003Cspan class=\"hljs-keyword\">default\u003C/span> \u003Cspan class=\"hljs-string\">"info"\u003C/span> }}\n{{ $title := .Get \u003Cspan class=\"hljs-string\">"title"\u003C/span> }}\n{{ $icon := .Get \u003Cspan class=\"hljs-string\">"icon"\u003C/span> }}\n{{ $collapsible := .Get \u003Cspan class=\"hljs-string\">"collapsible"\u003C/span> | \u003Cspan class=\"hljs-keyword\">default\u003C/span> \u003Cspan class=\"hljs-literal\">false\u003C/span> }}\n\n{{ $validTypes := slice \u003Cspan class=\"hljs-string\">"info"\u003C/span> \u003Cspan class=\"hljs-string\">"warning"\u003C/span> \u003Cspan class=\"hljs-string\">"error"\u003C/span> \u003Cspan class=\"hljs-string\">"success"\u003C/span> \u003Cspan class=\"hljs-string\">"note"\u003C/span> }}\n{{ $\u003Cspan class=\"hljs-keyword\">type\u003C/span> = cond (in $validTypes $\u003Cspan class=\"hljs-keyword\">type\u003C/span>) $\u003Cspan class=\"hljs-keyword\">type\u003C/span> \u003Cspan class=\"hljs-string\">"info"\u003C/span> }}\n\n<div class=\u003Cspan class=\"hljs-string\">"callout callout-{{ $type }}"\u003C/span> role=\u003Cspan class=\"hljs-string\">"alert"\u003C/span>>\n    {{ \u003Cspan class=\"hljs-keyword\">if\u003C/span> $title }}\n        <div class=\u003Cspan class=\"hljs-string\">"callout-title"\u003C/span>>\n            {{ with $icon }}{{ . }}{{ end }}\n            {{ $title }}\n        </div>\n    {{ end }}\n    \n    <div class=\u003Cspan class=\"hljs-string\">"callout-content{{ if $collapsible }} collapsible{{ end }}"\u003C/span>>\n        {{ .Inner | markdownify }}\n    </div>\n</div>\n\n<!-- layouts/shortcodes/tabs.html -->\n{{ $defaultTab := .Get \u003Cspan class=\"hljs-string\">"default"\u003C/span> | \u003Cspan class=\"hljs-keyword\">default\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span> }}\n{{ $tabs := split .Inner \u003Cspan class=\"hljs-string\">"---"\u003C/span> }}\n\n<div class=\u003Cspan class=\"hljs-string\">"tabs-component"\u003C/span>>\n    <div class=\u003Cspan class=\"hljs-string\">"tab-headers"\u003C/span> role=\u003Cspan class=\"hljs-string\">"tablist"\u003C/span>>\n        {{ \u003Cspan class=\"hljs-keyword\">range\u003C/span> $index, $tab := $tabs }}\n            {{ $parts := split $tab \u003Cspan class=\"hljs-string\">":"\u003C/span> }}\n            {{ $title := index $parts \u003Cspan class=\"hljs-number\">0\u003C/span> | trim }}\n            {{ $isActive := eq $index (\u003Cspan class=\"hljs-type\">int\u003C/span> $defaultTab) }}\n            \n            <button class=\u003Cspan class=\"hljs-string\">"tab-header{{ if $isActive }} active{{ end }}"\u003C/span> \n                    role=\u003Cspan class=\"hljs-string\">"tab"\u003C/span> \n                    aria-selected=\u003Cspan class=\"hljs-string\">"{{ $isActive }}"\u003C/span>\n                    data-tab=\u003Cspan class=\"hljs-string\">"{{ $index }}"\u003C/span>>\n                {{ $title }}\n            </button>\n        {{ end }}\n    </div>\n    \n    <div class=\u003Cspan class=\"hljs-string\">"tab-contents"\u003C/span>>\n        {{ \u003Cspan class=\"hljs-keyword\">range\u003C/span> $index, $tab := $tabs }}\n            {{ $parts := split $tab \u003Cspan class=\"hljs-string\">":"\u003C/span> }}\n            {{ $content := index $parts \u003Cspan class=\"hljs-number\">1\u003C/span> | \u003Cspan class=\"hljs-keyword\">default\u003C/span> \u003Cspan class=\"hljs-string\">""\u003C/span> | trim }}\n            {{ $isActive := eq $index (\u003Cspan class=\"hljs-type\">int\u003C/span> $defaultTab) }}\n            \n            <div class=\u003Cspan class=\"hljs-string\">"tab-content{{ if $isActive }} active{{ end }}"\u003C/span> \n                 role=\u003Cspan class=\"hljs-string\">"tabpanel"\u003C/span> \n                 data-tab=\u003Cspan class=\"hljs-string\">"{{ $index }}"\u003C/span>>\n                {{ $content | markdownify }}\n            </div>\n        {{ end }}\n    </div>\n</div>\n\n<!-- layouts/shortcodes/code-example.html -->\n{{ $language := .Get \u003Cspan class=\"hljs-string\">"language"\u003C/span> | \u003Cspan class=\"hljs-keyword\">default\u003C/span> \u003Cspan class=\"hljs-string\">"text"\u003C/span> }}\n{{ $title := .Get \u003Cspan class=\"hljs-string\">"title"\u003C/span> }}\n{{ $filename := .Get \u003Cspan class=\"hljs-string\">"filename"\u003C/span> }}\n{{ $copyButton := .Get \u003Cspan class=\"hljs-string\">"copy-button"\u003C/span> | \u003Cspan class=\"hljs-keyword\">default\u003C/span> \u003Cspan class=\"hljs-literal\">true\u003C/span> }}\n\n{{ $headerContent := $title | \u003Cspan class=\"hljs-keyword\">default\u003C/span> $filename }}\n\n<div class=\u003Cspan class=\"hljs-string\">"code-example"\u003C/span> data-language=\u003Cspan class=\"hljs-string\">"{{ $language }}"\u003C/span>>\n    {{ \u003Cspan class=\"hljs-keyword\">if\u003C/span> $headerContent }}\n        <div class=\u003Cspan class=\"hljs-string\">"code-header"\u003C/span>>\n            <span class=\u003Cspan class=\"hljs-string\">"code-title"\u003C/span>>{{ $headerContent }}</span>\n            {{ \u003Cspan class=\"hljs-keyword\">if\u003C/span> $copyButton }}\n                <button class=\u003Cspan class=\"hljs-string\">"copy-button"\u003C/span> title=\u003Cspan class=\"hljs-string\">"Copy code"\u003C/span>>📋</button>\n            {{ end }}\n        </div>\n    {{ end }}\n    \n    <pre class=\u003Cspan class=\"hljs-string\">"code-block"\u003C/span>><code class=\u003Cspan class=\"hljs-string\">"language-{{ $language }}"\u003C/span>>{{ .Inner | htmlEscape }}</code></pre>\n</div>\n\n<!-- layouts/shortcodes/gallery.html -->\n{{ $layout := .Get \u003Cspan class=\"hljs-string\">"layout"\u003C/span> | \u003Cspan class=\"hljs-keyword\">default\u003C/span> \u003Cspan class=\"hljs-string\">"grid"\u003C/span> }}\n{{ $columns := .Get \u003Cspan class=\"hljs-string\">"columns"\u003C/span> | \u003Cspan class=\"hljs-keyword\">default\u003C/span> \u003Cspan class=\"hljs-string\">"3"\u003C/span> }}\n{{ $lightbox := .Get \u003Cspan class=\"hljs-string\">"lightbox"\u003C/span> | \u003Cspan class=\"hljs-keyword\">default\u003C/span> \u003Cspan class=\"hljs-literal\">false\u003C/span> }}\n\n<div class=\u003Cspan class=\"hljs-string\">"image-gallery layout-{{ $layout }}"\u003C/span> style=\u003Cspan class=\"hljs-string\">"--columns: {{ $columns }}"\u003C/span>>\n    {{ \u003Cspan class=\"hljs-keyword\">range\u003C/span> $index, $image := split .Inner \u003Cspan class=\"hljs-string\">"\\n"\u003C/span> }}\n        {{ \u003Cspan class=\"hljs-keyword\">if\u003C/span> $image }}\n            {{ $parts := split $image \u003Cspan class=\"hljs-string\">"|"\u003C/span> }}\n            {{ $src := index $parts \u003Cspan class=\"hljs-number\">0\u003C/span> | trim }}\n            {{ $alt := index $parts \u003Cspan class=\"hljs-number\">1\u003C/span> | \u003Cspan class=\"hljs-keyword\">default\u003C/span> \u003Cspan class=\"hljs-string\">""\u003C/span> | trim }}\n            {{ $caption := index $parts \u003Cspan class=\"hljs-number\">2\u003C/span> | \u003Cspan class=\"hljs-keyword\">default\u003C/span> $alt | trim }}\n            \n            {{ \u003Cspan class=\"hljs-keyword\">if\u003C/span> $src }}\n                <figure class=\u003Cspan class=\"hljs-string\">"gallery-item"\u003C/span>>\n                    <img src=\u003Cspan class=\"hljs-string\">"{{ $src }}"\u003C/span> \n                         alt=\u003Cspan class=\"hljs-string\">"{{ $alt }}"\u003C/span> \n                         loading=\u003Cspan class=\"hljs-string\">"lazy"\u003C/span>\n                         {{ \u003Cspan class=\"hljs-keyword\">if\u003C/span> $lightbox }}data-lightbox=\u003Cspan class=\"hljs-string\">"gallery"\u003C/span> data-index=\u003Cspan class=\"hljs-string\">"{{ $index }}"\u003C/span>{{ end }}>\n                    {{ \u003Cspan class=\"hljs-keyword\">if\u003C/span> $caption }}\n                        <figcaption>{{ $caption | markdownify }}</figcaption>\n                    {{ end }}\n                </figure>\n            {{ end }}\n        {{ end }}\n    {{ end }}\n</div>\n\n{{ \u003Cspan class=\"hljs-keyword\">if\u003C/span> $lightbox }}\n    {{ partial \u003Cspan class=\"hljs-string\">"lightbox-script.html"\u003C/span> . }}\n{{ end }}\n\u003C/code>\u003C/pre>\u003Ch2 id=\"integration-with-modern-documentation-systems\">Integration with Modern Documentation Systems\u003C/h2>\n\u003Cp>HTML-Markdown integration complements comprehensive documentation workflows. When combined with \u003Ca href=\"/blog/markdown-content-validation-automated-quality-assurance-complete-guide\">automated content validation and quality assurance\u003C/a>, mixed content systems enable systematic verification of HTML components, accessibility compliance testing, and consistent formatting across complex documentation architectures.\u003C/p>\n\u003Cp>For enhanced content organization, HTML integration works effectively with \u003Ca href=\"/blog/markdown-table-performance-optimization-large-datasets-guide\">advanced table systems and performance optimization\u003C/a> to create sophisticated data presentation interfaces that combine Markdown simplicity with HTML's advanced layout capabilities, enabling complex data visualization within standard Markdown workflows.\u003C/p>\n\u003Cp>When developing comprehensive content platforms, HTML-Markdown integration supports \u003Ca href=\"/blog/markdown-progressive-web-app-documentation-complete-guide\">Progressive Web App documentation systems\u003C/a> by providing offline-capable interactive components, cached HTML processing, and enhanced user interfaces that maintain functionality across different network conditions and device capabilities.\u003C/p>\n\u003Ch2 id=\"conclusion\">Conclusion\u003C/h2>\n\u003Cp>Markdown HTML integration and mixed content systems transform static documentation into dynamic, interactive experiences that leverage the strengths of both markup languages while maintaining accessibility, performance, and maintainability. By implementing comprehensive HTML sanitization, building reusable component systems, and establishing robust integration patterns, technical teams can create sophisticated content platforms that scale effectively across complex documentation requirements.\u003C/p>\n\u003Cp>The key to successful HTML-Markdown integration lies in establishing clear security boundaries, implementing consistent component architectures, and maintaining semantic HTML practices that enhance rather than compromise accessibility. Whether you're building technical documentation, educational content, or complex reference materials, the integration techniques covered in this guide provide the foundation for creating powerful, flexible content systems that combine Markdown's simplicity with HTML's advanced capabilities.\u003C/p>\n\u003Cp>Remember to prioritize security when accepting mixed content, implement comprehensive testing for cross-platform compatibility, and establish clear guidelines for HTML usage within your Markdown workflows. With proper implementation of HTML-Markdown integration systems, your content can achieve new levels of interactivity and sophistication while maintaining the readability and maintainability that makes Markdown an ideal choice for technical documentation.\u003C/p>\n",[15,19,22,25,28,31,34],{"id":16,"text":17,"level":18},"why-master-html-integration-in-markdown","Why Master HTML Integration in Markdown?",2,{"id":20,"text":21,"level":18},"foundation-html-integration-principles","Foundation HTML Integration Principles",{"id":23,"text":24,"level":18},"advanced-component-systems","Advanced Component Systems",{"id":26,"text":27,"level":18},"responsive-design-integration","Responsive Design Integration",{"id":29,"text":30,"level":18},"platform-specific-integration-patterns","Platform-Specific Integration Patterns",{"id":32,"text":33,"level":18},"integration-with-modern-documentation-systems","Integration with Modern Documentation Systems",{"id":35,"text":36,"level":18},"conclusion","Conclusion",[],[39,47,55],{"slug":40,"title":41,"description":42,"excerpt":43,"date":44,"category":9,"author":10,"keywords":45,"readingMinutes":46},"markdown-custom-html-components-complete-guide","Markdown Custom HTML Components and Extensions: Complete Guide for Dynamic Content Creation and Interactive Documentation","Master Markdown custom HTML components, shortcodes, and extensions for interactive documentation, dynamic content generation, and enhanced reader experiences. Learn component development, templating, and integration strategies.","Advanced Markdown custom HTML components and extensions enable the creation of dynamic, interactive documentation that transcends traditional static content limitations through sophisticated…","2025-10-03","markdown custom components, markdown html extensions, markdown shortcodes, interactive markdown, dynamic markdown content, custom markdown elements, markdown templating, markdown component development",33,{"slug":48,"title":49,"description":50,"excerpt":51,"date":52,"category":9,"author":10,"keywords":53,"readingMinutes":54},"markdown-version-control-git-integration-complete-guide","Markdown Version Control and Git Integration: Complete Guide for Documentation Workflows and Collaborative Content Management","Master Markdown version control with Git integration for collaborative documentation workflows, automated content management, and efficient technical writing processes. Learn Git hooks, merge strategies, and workflow optimization.","Advanced Markdown version control and Git integration enables sophisticated collaborative documentation workflows that maintain content quality, track changes systematically, and automate content…","2025-09-29","markdown version control, git markdown integration, documentation git workflows, markdown collaboration, git hooks markdown, version control documentation, markdown git best practices, collaborative writing git",22,{"slug":56,"title":57,"description":58,"excerpt":59,"date":60,"category":9,"author":10,"keywords":61,"readingMinutes":62},"markdown-emoji-guide-complete-reference","Markdown Emoji Guide: Complete Reference for Technical Documentation and Content Creation","Master emoji usage in Markdown for enhanced technical documentation and content creation. Learn platform-specific implementations, accessibility considerations, and professional best practices for emoji integration.","Emoji integration in Markdown elevates technical documentation and content creation from plain text to engaging, visually enhanced communication that improves reader comprehension and adds…","2025-09-11","markdown emoji, markdown emoticons, github emoji markdown, emoji in documentation, technical writing emoji, markdown symbols, emoji accessibility, professional emoji usage",18,1792184946352]