[{"data":1,"prerenderedAt":57},["Reactive",2],{"blog-post-markdown-code-syntax-highlighting-advanced-techniques":3},{"slug":4,"title":5,"description":6,"excerpt":7,"date":8,"category":9,"author":10,"keywords":11,"readingMinutes":12,"html":13,"headings":14,"tools":31,"related":32},"markdown-code-syntax-highlighting-advanced-techniques","Advanced Markdown Code Syntax Highlighting: Complete Guide for Multi-Language Support, Custom Themes, and Interactive Documentation","Master advanced code syntax highlighting in Markdown with comprehensive language support, custom theme creation, interactive examples, and modern rendering techniques for professional technical documentation.","Advanced Markdown code syntax highlighting transforms static code examples into visually rich, interactive documentation that enhances readability, comprehension, and user engagement across…","2025-12-21","Tutorial","Matthew Rathbone","markdown syntax highlighting, code highlighting markdown, multi-language syntax, custom highlighting themes, markdown code blocks, syntax highlighter integration, technical documentation markdown, code formatting markdown",27,"\u003Cp>Advanced Markdown code syntax highlighting transforms static code examples into visually rich, interactive documentation that enhances readability, comprehension, and user engagement across technical content. By implementing sophisticated syntax highlighting systems, custom theme integration, and intelligent language detection, technical writers can create comprehensive documentation that effectively communicates complex programming concepts while maintaining consistency across diverse codebases and programming languages.\u003C/p>\n\u003Ch2 id=\"why-implement-advanced-syntax-highlighting\">Why Implement Advanced Syntax Highlighting?\u003C/h2>\n\u003Cp>Professional syntax highlighting provides essential benefits for technical documentation:\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>Code Readability\u003C/strong>: Enhanced visual distinction between syntax elements improves code comprehension\u003C/li>\n\u003Cli>\u003Cstrong>Language Support\u003C/strong>: Comprehensive highlighting for 200+ programming languages and markup formats\u003C/li>\n\u003Cli>\u003Cstrong>Theme Customization\u003C/strong>: Brand-consistent highlighting that matches documentation design systems\u003C/li>\n\u003Cli>\u003Cstrong>Interactive Features\u003C/strong>: Copy buttons, line numbers, and collapsible sections enhance user experience\u003C/li>\n\u003Cli>\u003Cstrong>Accessibility\u003C/strong>: High-contrast themes and screen reader compatibility ensure inclusive documentation\u003C/li>\n\u003Cli>\u003Cstrong>Performance\u003C/strong>: Optimized rendering engines handle large code blocks without impacting page load times\u003C/li>\n\u003C/ul>\n\u003Ch2 id=\"foundation-syntax-highlighting-systems\">Foundation Syntax Highlighting Systems\u003C/h2>\n\u003Ch3 id=\"prismjs-advanced-implementation\">Prism.js Advanced Implementation\u003C/h3>\n\u003Cp>Setting up comprehensive syntax highlighting with Prism.js and modern extensions:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-javascript\">\u003Cspan class=\"hljs-comment\">// prism-advanced-setup.js - Advanced Prism.js configuration\u003C/span>\n\u003Cspan class=\"hljs-keyword\">class\u003C/span> \u003Cspan class=\"hljs-title class_\">AdvancedPrismHighlighter\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\">theme\u003C/span>: \u003Cspan class=\"hljs-string\">'default'\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">languages\u003C/span>: [\u003Cspan class=\"hljs-string\">'javascript'\u003C/span>, \u003Cspan class=\"hljs-string\">'python'\u003C/span>, \u003Cspan class=\"hljs-string\">'java'\u003C/span>, \u003Cspan class=\"hljs-string\">'cpp'\u003C/span>, \u003Cspan class=\"hljs-string\">'bash'\u003C/span>],\n            \u003Cspan class=\"hljs-attr\">enableLineNumbers\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">enableCopyButton\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">enableLanguageLabels\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">enableCodeFolding\u003C/span>: \u003Cspan class=\"hljs-literal\">false\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">enableInlineColors\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">enableDiffHighlighting\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">autoDetectLanguage\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">tabSize\u003C/span>: \u003Cspan class=\"hljs-number\">4\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">maxHeight\u003C/span>: \u003Cspan class=\"hljs-string\">'500px'\u003C/span>,\n            ...options\n        };\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">loadedLanguages\u003C/span> = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Set\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">languageAliases\u003C/span> = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Map\u003C/span>([\n            [\u003Cspan class=\"hljs-string\">'js'\u003C/span>, \u003Cspan class=\"hljs-string\">'javascript'\u003C/span>],\n            [\u003Cspan class=\"hljs-string\">'ts'\u003C/span>, \u003Cspan class=\"hljs-string\">'typescript'\u003C/span>],\n            [\u003Cspan class=\"hljs-string\">'py'\u003C/span>, \u003Cspan class=\"hljs-string\">'python'\u003C/span>],\n            [\u003Cspan class=\"hljs-string\">'sh'\u003C/span>, \u003Cspan class=\"hljs-string\">'bash'\u003C/span>],\n            [\u003Cspan class=\"hljs-string\">'yml'\u003C/span>, \u003Cspan class=\"hljs-string\">'yaml'\u003C/span>],\n            [\u003Cspan class=\"hljs-string\">'md'\u003C/span>, \u003Cspan class=\"hljs-string\">'markdown'\u003C/span>]\n        ]);\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">init\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-keyword\">async\u003C/span> \u003Cspan class=\"hljs-title function_\">init\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">loadPrismCore\u003C/span>();\n        \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">loadTheme\u003C/span>();\n        \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">loadLanguages\u003C/span>();\n        \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">loadPlugins\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">setupCodeBlocks\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">bindEvents\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-keyword\">async\u003C/span> \u003Cspan class=\"hljs-title function_\">loadPrismCore\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-keyword\">typeof\u003C/span> \u003Cspan class=\"hljs-title class_\">Prism\u003C/span> === \u003Cspan class=\"hljs-string\">'undefined'\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">loadScript\u003C/span>(\u003Cspan class=\"hljs-string\">'https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-core.min.js'\u003C/span>);\n        }\n    }\n    \n    \u003Cspan class=\"hljs-keyword\">async\u003C/span> \u003Cspan class=\"hljs-title function_\">loadTheme\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> themeUrl = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">getThemeUrl\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">theme\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">loadCSS\u003C/span>(themeUrl);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">getThemeUrl\u003C/span>(\u003Cspan class=\"hljs-params\">theme\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> themes = {\n            \u003Cspan class=\"hljs-string\">'default'\u003C/span>: \u003Cspan class=\"hljs-string\">'https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css'\u003C/span>,\n            \u003Cspan class=\"hljs-string\">'dark'\u003C/span>: \u003Cspan class=\"hljs-string\">'https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-dark.min.css'\u003C/span>,\n            \u003Cspan class=\"hljs-string\">'okaidia'\u003C/span>: \u003Cspan class=\"hljs-string\">'https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-okaidia.min.css'\u003C/span>,\n            \u003Cspan class=\"hljs-string\">'tomorrow'\u003C/span>: \u003Cspan class=\"hljs-string\">'https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css'\u003C/span>,\n            \u003Cspan class=\"hljs-string\">'twilight'\u003C/span>: \u003Cspan class=\"hljs-string\">'https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-twilight.min.css'\u003C/span>,\n            \u003Cspan class=\"hljs-string\">'coy'\u003C/span>: \u003Cspan class=\"hljs-string\">'https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-coy.min.css'\u003C/span>,\n            \u003Cspan class=\"hljs-string\">'funky'\u003C/span>: \u003Cspan class=\"hljs-string\">'https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-funky.min.css'\u003C/span>,\n            \u003Cspan class=\"hljs-string\">'solarizedlight'\u003C/span>: \u003Cspan class=\"hljs-string\">'https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-solarizedlight.min.css'\u003C/span>\n        };\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> themes[theme] || themes[\u003Cspan class=\"hljs-string\">'default'\u003C/span>];\n    }\n    \n    \u003Cspan class=\"hljs-keyword\">async\u003C/span> \u003Cspan class=\"hljs-title function_\">loadLanguages\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> baseUrl = \u003Cspan class=\"hljs-string\">'https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/'\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">const\u003C/span> language \u003Cspan class=\"hljs-keyword\">of\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">languages\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> normalizedLang = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">languageAliases\u003C/span>.\u003Cspan class=\"hljs-title function_\">get\u003C/span>(language) || language;\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">loadedLanguages\u003C/span>.\u003Cspan class=\"hljs-title function_\">has\u003C/span>(normalizedLang) && normalizedLang !== \u003Cspan class=\"hljs-string\">'markup'\u003C/span>) {\n                \u003Cspan class=\"hljs-keyword\">try\u003C/span> {\n                    \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">loadScript\u003C/span>(\u003Cspan class=\"hljs-string\">`\u003Cspan class=\"hljs-subst\">${baseUrl}\u003C/span>prism-\u003Cspan class=\"hljs-subst\">${normalizedLang}\u003C/span>.min.js`\u003C/span>);\n                    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">loadedLanguages\u003C/span>.\u003Cspan class=\"hljs-title function_\">add\u003C/span>(normalizedLang);\n                } \u003Cspan class=\"hljs-keyword\">catch\u003C/span> (error) {\n                    \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">warn\u003C/span>(\u003Cspan class=\"hljs-string\">`Failed to load language: \u003Cspan class=\"hljs-subst\">${normalizedLang}\u003C/span>`\u003C/span>, error);\n                }\n            }\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Load common dependencies\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">loadLanguageDependencies\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-keyword\">async\u003C/span> \u003Cspan class=\"hljs-title function_\">loadLanguageDependencies\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> dependencies = {\n            \u003Cspan class=\"hljs-string\">'typescript'\u003C/span>: [\u003Cspan class=\"hljs-string\">'javascript'\u003C/span>],\n            \u003Cspan class=\"hljs-string\">'jsx'\u003C/span>: [\u003Cspan class=\"hljs-string\">'javascript'\u003C/span>],\n            \u003Cspan class=\"hljs-string\">'tsx'\u003C/span>: [\u003Cspan class=\"hljs-string\">'jsx'\u003C/span>, \u003Cspan class=\"hljs-string\">'typescript'\u003C/span>],\n            \u003Cspan class=\"hljs-string\">'scss'\u003C/span>: [\u003Cspan class=\"hljs-string\">'css'\u003C/span>],\n            \u003Cspan class=\"hljs-string\">'less'\u003C/span>: [\u003Cspan class=\"hljs-string\">'css'\u003C/span>],\n            \u003Cspan class=\"hljs-string\">'stylus'\u003C/span>: [\u003Cspan class=\"hljs-string\">'css'\u003C/span>],\n            \u003Cspan class=\"hljs-string\">'php'\u003C/span>: [\u003Cspan class=\"hljs-string\">'markup'\u003C/span>],\n            \u003Cspan class=\"hljs-string\">'smarty'\u003C/span>: [\u003Cspan class=\"hljs-string\">'markup'\u003C/span>],\n            \u003Cspan class=\"hljs-string\">'django'\u003C/span>: [\u003Cspan class=\"hljs-string\">'markup'\u003C/span>],\n            \u003Cspan class=\"hljs-string\">'handlebars'\u003C/span>: [\u003Cspan class=\"hljs-string\">'markup'\u003C/span>],\n            \u003Cspan class=\"hljs-string\">'erb'\u003C/span>: [\u003Cspan class=\"hljs-string\">'ruby'\u003C/span>, \u003Cspan class=\"hljs-string\">'markup'\u003C/span>]\n        };\n        \n        \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">const\u003C/span> [lang, deps] \u003Cspan class=\"hljs-keyword\">of\u003C/span> \u003Cspan class=\"hljs-title class_\">Object\u003C/span>.\u003Cspan class=\"hljs-title function_\">entries\u003C/span>(dependencies)) {\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\">languages\u003C/span>.\u003Cspan class=\"hljs-title function_\">includes\u003C/span>(lang)) {\n                \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">const\u003C/span> dep \u003Cspan class=\"hljs-keyword\">of\u003C/span> deps) {\n                    \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">loadedLanguages\u003C/span>.\u003Cspan class=\"hljs-title function_\">has\u003C/span>(dep)) {\n                        \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">loadLanguage\u003C/span>(dep);\n                    }\n                }\n            }\n        }\n    }\n    \n    \u003Cspan class=\"hljs-keyword\">async\u003C/span> \u003Cspan class=\"hljs-title function_\">loadLanguage\u003C/span>(\u003Cspan class=\"hljs-params\">language\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">loadedLanguages\u003C/span>.\u003Cspan class=\"hljs-title function_\">has\u003C/span>(language)) \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> baseUrl = \u003Cspan class=\"hljs-string\">'https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/'\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">try\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">loadScript\u003C/span>(\u003Cspan class=\"hljs-string\">`\u003Cspan class=\"hljs-subst\">${baseUrl}\u003C/span>prism-\u003Cspan class=\"hljs-subst\">${language}\u003C/span>.min.js`\u003C/span>);\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">loadedLanguages\u003C/span>.\u003Cspan class=\"hljs-title function_\">add\u003C/span>(language);\n        } \u003Cspan class=\"hljs-keyword\">catch\u003C/span> (error) {\n            \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">warn\u003C/span>(\u003Cspan class=\"hljs-string\">`Failed to load language dependency: \u003Cspan class=\"hljs-subst\">${language}\u003C/span>`\u003C/span>, error);\n        }\n    }\n    \n    \u003Cspan class=\"hljs-keyword\">async\u003C/span> \u003Cspan class=\"hljs-title function_\">loadPlugins\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> plugins = [];\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\">enableLineNumbers\u003C/span>) {\n            plugins.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">loadLineNumbers\u003C/span>());\n        }\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\">enableCopyButton\u003C/span>) {\n            plugins.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">loadCopyButton\u003C/span>());\n        }\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\">enableCodeFolding\u003C/span>) {\n            plugins.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">loadCodeFolding\u003C/span>());\n        }\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\">enableDiffHighlighting\u003C/span>) {\n            plugins.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">loadDiffHighlighting\u003C/span>());\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-title class_\">Promise\u003C/span>.\u003Cspan class=\"hljs-title function_\">all\u003C/span>(plugins);\n    }\n    \n    \u003Cspan class=\"hljs-keyword\">async\u003C/span> \u003Cspan class=\"hljs-title function_\">loadLineNumbers\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">loadScript\u003C/span>(\u003Cspan class=\"hljs-string\">'https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/line-numbers/prism-line-numbers.min.js'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">loadCSS\u003C/span>(\u003Cspan class=\"hljs-string\">'https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/line-numbers/prism-line-numbers.min.css'\u003C/span>);\n    }\n    \n    \u003Cspan class=\"hljs-keyword\">async\u003C/span> \u003Cspan class=\"hljs-title function_\">loadCopyButton\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">loadScript\u003C/span>(\u003Cspan class=\"hljs-string\">'https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js'\u003C/span>);\n    }\n    \n    \u003Cspan class=\"hljs-keyword\">async\u003C/span> \u003Cspan class=\"hljs-title function_\">loadCodeFolding\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Custom implementation for code folding\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">setupCodeFolding\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-keyword\">async\u003C/span> \u003Cspan class=\"hljs-title function_\">loadDiffHighlighting\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">loadScript\u003C/span>(\u003Cspan class=\"hljs-string\">'https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/diff-highlight/prism-diff-highlight.min.js'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">loadCSS\u003C/span>(\u003Cspan class=\"hljs-string\">'https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/diff-highlight/prism-diff-highlight.min.css'\u003C/span>);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">setupCodeBlocks\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> codeBlocks = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'pre[class*="language-"], code[class*="language-"]'\u003C/span>);\n        \n        codeBlocks.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">block\u003C/span> =>\u003C/span> {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">enhanceCodeBlock\u003C/span>(block);\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// Auto-detect language for unmarked code blocks\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\">autoDetectLanguage\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">autoDetectLanguages\u003C/span>();\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">enhanceCodeBlock\u003C/span>(\u003Cspan class=\"hljs-params\">block\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> pre = block.\u003Cspan class=\"hljs-property\">tagName\u003C/span> === \u003Cspan class=\"hljs-string\">'PRE'\u003C/span> ? block : block.\u003Cspan class=\"hljs-title function_\">closest\u003C/span>(\u003Cspan class=\"hljs-string\">'pre'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!pre) \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n        \n        \u003Cspan class=\"hljs-comment\">// Add wrapper div for enhanced styling\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!pre.\u003Cspan class=\"hljs-title function_\">closest\u003C/span>(\u003Cspan class=\"hljs-string\">'.code-block-wrapper'\u003C/span>)) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> wrapper = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n            wrapper.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'code-block-wrapper'\u003C/span>;\n            pre.\u003Cspan class=\"hljs-property\">parentNode\u003C/span>.\u003Cspan class=\"hljs-title function_\">insertBefore\u003C/span>(wrapper, pre);\n            wrapper.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(pre);\n            \n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">addLanguageLabel\u003C/span>(wrapper, pre);\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">addCodeToolbar\u003C/span>(wrapper, pre);\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">setupCodeInteractions\u003C/span>(wrapper, pre);\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Add line numbers 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\">enableLineNumbers\u003C/span> && !pre.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">contains\u003C/span>(\u003Cspan class=\"hljs-string\">'line-numbers'\u003C/span>)) {\n            pre.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">add\u003C/span>(\u003Cspan class=\"hljs-string\">'line-numbers'\u003C/span>);\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Set max height if specified\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\">maxHeight\u003C/span>) {\n            pre.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">maxHeight\u003C/span> = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">maxHeight\u003C/span>;\n            pre.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">overflow\u003C/span> = \u003Cspan class=\"hljs-string\">'auto'\u003C/span>;\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Apply tab size\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\">tabSize\u003C/span>) {\n            pre.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">tabSize\u003C/span> = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">tabSize\u003C/span>;\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">addLanguageLabel\u003C/span>(\u003Cspan class=\"hljs-params\">wrapper, pre\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\">enableLanguageLabels\u003C/span>) \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> className = pre.\u003Cspan class=\"hljs-property\">className\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> langMatch = className.\u003Cspan class=\"hljs-title function_\">match\u003C/span>(\u003Cspan class=\"hljs-regexp\">/language-([a-zA-Z0-9-]+)/\u003C/span>);\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (langMatch) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> language = langMatch[\u003Cspan class=\"hljs-number\">1\u003C/span>];\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> label = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n            label.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'language-label'\u003C/span>;\n            label.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">formatLanguageName\u003C/span>(language);\n            label.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'aria-label'\u003C/span>, \u003Cspan class=\"hljs-string\">`Code language: \u003Cspan class=\"hljs-subst\">${language}\u003C/span>`\u003C/span>);\n            wrapper.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(label);\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">formatLanguageName\u003C/span>(\u003Cspan class=\"hljs-params\">language\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> names = {\n            \u003Cspan class=\"hljs-string\">'js'\u003C/span>: \u003Cspan class=\"hljs-string\">'JavaScript'\u003C/span>,\n            \u003Cspan class=\"hljs-string\">'ts'\u003C/span>: \u003Cspan class=\"hljs-string\">'TypeScript'\u003C/span>,\n            \u003Cspan class=\"hljs-string\">'py'\u003C/span>: \u003Cspan class=\"hljs-string\">'Python'\u003C/span>,\n            \u003Cspan class=\"hljs-string\">'cpp'\u003C/span>: \u003Cspan class=\"hljs-string\">'C++'\u003C/span>,\n            \u003Cspan class=\"hljs-string\">'cs'\u003C/span>: \u003Cspan class=\"hljs-string\">'C#'\u003C/span>,\n            \u003Cspan class=\"hljs-string\">'rb'\u003C/span>: \u003Cspan class=\"hljs-string\">'Ruby'\u003C/span>,\n            \u003Cspan class=\"hljs-string\">'go'\u003C/span>: \u003Cspan class=\"hljs-string\">'Go'\u003C/span>,\n            \u003Cspan class=\"hljs-string\">'rs'\u003C/span>: \u003Cspan class=\"hljs-string\">'Rust'\u003C/span>,\n            \u003Cspan class=\"hljs-string\">'php'\u003C/span>: \u003Cspan class=\"hljs-string\">'PHP'\u003C/span>,\n            \u003Cspan class=\"hljs-string\">'java'\u003C/span>: \u003Cspan class=\"hljs-string\">'Java'\u003C/span>,\n            \u003Cspan class=\"hljs-string\">'kt'\u003C/span>: \u003Cspan class=\"hljs-string\">'Kotlin'\u003C/span>,\n            \u003Cspan class=\"hljs-string\">'swift'\u003C/span>: \u003Cspan class=\"hljs-string\">'Swift'\u003C/span>,\n            \u003Cspan class=\"hljs-string\">'dart'\u003C/span>: \u003Cspan class=\"hljs-string\">'Dart'\u003C/span>,\n            \u003Cspan class=\"hljs-string\">'scala'\u003C/span>: \u003Cspan class=\"hljs-string\">'Scala'\u003C/span>,\n            \u003Cspan class=\"hljs-string\">'clj'\u003C/span>: \u003Cspan class=\"hljs-string\">'Clojure'\u003C/span>,\n            \u003Cspan class=\"hljs-string\">'hs'\u003C/span>: \u003Cspan class=\"hljs-string\">'Haskell'\u003C/span>,\n            \u003Cspan class=\"hljs-string\">'ml'\u003C/span>: \u003Cspan class=\"hljs-string\">'ML'\u003C/span>,\n            \u003Cspan class=\"hljs-string\">'fs'\u003C/span>: \u003Cspan class=\"hljs-string\">'F#'\u003C/span>,\n            \u003Cspan class=\"hljs-string\">'sh'\u003C/span>: \u003Cspan class=\"hljs-string\">'Shell'\u003C/span>,\n            \u003Cspan class=\"hljs-string\">'bash'\u003C/span>: \u003Cspan class=\"hljs-string\">'Bash'\u003C/span>,\n            \u003Cspan class=\"hljs-string\">'zsh'\u003C/span>: \u003Cspan class=\"hljs-string\">'Zsh'\u003C/span>,\n            \u003Cspan class=\"hljs-string\">'ps1'\u003C/span>: \u003Cspan class=\"hljs-string\">'PowerShell'\u003C/span>,\n            \u003Cspan class=\"hljs-string\">'sql'\u003C/span>: \u003Cspan class=\"hljs-string\">'SQL'\u003C/span>,\n            \u003Cspan class=\"hljs-string\">'html'\u003C/span>: \u003Cspan class=\"hljs-string\">'HTML'\u003C/span>,\n            \u003Cspan class=\"hljs-string\">'xml'\u003C/span>: \u003Cspan class=\"hljs-string\">'XML'\u003C/span>,\n            \u003Cspan class=\"hljs-string\">'css'\u003C/span>: \u003Cspan class=\"hljs-string\">'CSS'\u003C/span>,\n            \u003Cspan class=\"hljs-string\">'scss'\u003C/span>: \u003Cspan class=\"hljs-string\">'SCSS'\u003C/span>,\n            \u003Cspan class=\"hljs-string\">'sass'\u003C/span>: \u003Cspan class=\"hljs-string\">'Sass'\u003C/span>,\n            \u003Cspan class=\"hljs-string\">'less'\u003C/span>: \u003Cspan class=\"hljs-string\">'Less'\u003C/span>,\n            \u003Cspan class=\"hljs-string\">'stylus'\u003C/span>: \u003Cspan class=\"hljs-string\">'Stylus'\u003C/span>,\n            \u003Cspan class=\"hljs-string\">'json'\u003C/span>: \u003Cspan class=\"hljs-string\">'JSON'\u003C/span>,\n            \u003Cspan class=\"hljs-string\">'yaml'\u003C/span>: \u003Cspan class=\"hljs-string\">'YAML'\u003C/span>,\n            \u003Cspan class=\"hljs-string\">'toml'\u003C/span>: \u003Cspan class=\"hljs-string\">'TOML'\u003C/span>,\n            \u003Cspan class=\"hljs-string\">'ini'\u003C/span>: \u003Cspan class=\"hljs-string\">'INI'\u003C/span>,\n            \u003Cspan class=\"hljs-string\">'md'\u003C/span>: \u003Cspan class=\"hljs-string\">'Markdown'\u003C/span>,\n            \u003Cspan class=\"hljs-string\">'tex'\u003C/span>: \u003Cspan class=\"hljs-string\">'LaTeX'\u003C/span>,\n            \u003Cspan class=\"hljs-string\">'dockerfile'\u003C/span>: \u003Cspan class=\"hljs-string\">'Dockerfile'\u003C/span>,\n            \u003Cspan class=\"hljs-string\">'nginx'\u003C/span>: \u003Cspan class=\"hljs-string\">'Nginx'\u003C/span>,\n            \u003Cspan class=\"hljs-string\">'apache'\u003C/span>: \u003Cspan class=\"hljs-string\">'Apache'\u003C/span>\n        };\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> names[language] || language.\u003Cspan class=\"hljs-title function_\">toUpperCase\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">addCodeToolbar\u003C/span>(\u003Cspan class=\"hljs-params\">wrapper, pre\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> toolbar = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n        toolbar.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'code-toolbar'\u003C/span>;\n        \n        \u003Cspan class=\"hljs-comment\">// Copy button\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\">enableCopyButton\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> copyButton = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'button'\u003C/span>);\n            copyButton.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'copy-button'\u003C/span>;\n            copyButton.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = \u003Cspan class=\"hljs-string\">'Copy'\u003C/span>;\n            copyButton.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'aria-label'\u003C/span>, \u003Cspan class=\"hljs-string\">'Copy code to clipboard'\u003C/span>);\n            copyButton.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'click'\u003C/span>, \u003Cspan class=\"hljs-function\">() =>\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">copyCode\u003C/span>(pre, copyButton));\n            toolbar.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(copyButton);\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Expand/collapse button\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\">enableCodeFolding\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> foldButton = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'button'\u003C/span>);\n            foldButton.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'fold-button'\u003C/span>;\n            foldButton.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = \u003Cspan class=\"hljs-string\">'Collapse'\u003C/span>;\n            foldButton.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'aria-label'\u003C/span>, \u003Cspan class=\"hljs-string\">'Toggle code visibility'\u003C/span>);\n            foldButton.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'click'\u003C/span>, \u003Cspan class=\"hljs-function\">() =>\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">toggleCodeFold\u003C/span>(pre, foldButton));\n            toolbar.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(foldButton);\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Download button\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> downloadButton = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'button'\u003C/span>);\n        downloadButton.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'download-button'\u003C/span>;\n        downloadButton.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = \u003Cspan class=\"hljs-string\">'Download'\u003C/span>;\n        downloadButton.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'aria-label'\u003C/span>, \u003Cspan class=\"hljs-string\">'Download code as file'\u003C/span>);\n        downloadButton.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'click'\u003C/span>, \u003Cspan class=\"hljs-function\">() =>\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">downloadCode\u003C/span>(pre));\n        toolbar.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(downloadButton);\n        \n        wrapper.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(toolbar);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">setupCodeInteractions\u003C/span>(\u003Cspan class=\"hljs-params\">wrapper, pre\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Add focus management for keyboard navigation\u003C/span>\n        pre.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'tabindex'\u003C/span>, \u003Cspan class=\"hljs-string\">'0'\u003C/span>);\n        pre.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'role'\u003C/span>, \u003Cspan class=\"hljs-string\">'textbox'\u003C/span>);\n        pre.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'aria-label'\u003C/span>, \u003Cspan class=\"hljs-string\">'Code example'\u003C/span>);\n        pre.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'aria-readonly'\u003C/span>, \u003Cspan class=\"hljs-string\">'true'\u003C/span>);\n        \n        \u003Cspan class=\"hljs-comment\">// Add keyboard shortcuts\u003C/span>\n        pre.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'keydown'\u003C/span>, \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">e\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (e.\u003Cspan class=\"hljs-property\">ctrlKey\u003C/span> || e.\u003Cspan class=\"hljs-property\">metaKey\u003C/span>) {\n                \u003Cspan class=\"hljs-keyword\">switch\u003C/span> (e.\u003Cspan class=\"hljs-property\">key\u003C/span>) {\n                    \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'c'\u003C/span>:\n                        e.\u003Cspan class=\"hljs-title function_\">preventDefault\u003C/span>();\n                        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">copyCode\u003C/span>(pre);\n                        \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n                    \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'a'\u003C/span>:\n                        e.\u003Cspan class=\"hljs-title function_\">preventDefault\u003C/span>();\n                        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">selectAllCode\u003C/span>(pre);\n                        \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n                }\n            }\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// Add double-click to select all\u003C/span>\n        pre.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'dblclick'\u003C/span>, \u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">selectAllCode\u003C/span>(pre);\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">copyCode\u003C/span>(\u003Cspan class=\"hljs-params\">pre, button = \u003Cspan class=\"hljs-literal\">null\u003C/span>\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> code = pre.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'code'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> text = code ? code.\u003Cspan class=\"hljs-property\">textContent\u003C/span> : pre.\u003Cspan class=\"hljs-property\">textContent\u003C/span>;\n        \n        navigator.\u003Cspan class=\"hljs-property\">clipboard\u003C/span>.\u003Cspan class=\"hljs-title function_\">writeText\u003C/span>(text).\u003Cspan class=\"hljs-title function_\">then\u003C/span>(\u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">showCopyFeedback\u003C/span>(button || pre);\n        }).\u003Cspan class=\"hljs-title function_\">catch\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">err\u003C/span> =>\u003C/span> {\n            \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">error\u003C/span>(\u003Cspan class=\"hljs-string\">'Failed to copy code:'\u003C/span>, err);\n            \u003Cspan class=\"hljs-comment\">// Fallback for older browsers\u003C/span>\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">fallbackCopy\u003C/span>(text);\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">showCopyFeedback\u003C/span>(\u003Cspan class=\"hljs-params\">element\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> originalText = element.\u003Cspan class=\"hljs-property\">textContent\u003C/span>;\n        element.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = \u003Cspan class=\"hljs-string\">'Copied!'\u003C/span>;\n        element.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">add\u003C/span>(\u003Cspan class=\"hljs-string\">'copied'\u003C/span>);\n        \n        \u003Cspan class=\"hljs-built_in\">setTimeout\u003C/span>(\u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n            element.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = originalText;\n            element.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">remove\u003C/span>(\u003Cspan class=\"hljs-string\">'copied'\u003C/span>);\n        }, \u003Cspan class=\"hljs-number\">2000\u003C/span>);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">fallbackCopy\u003C/span>(\u003Cspan class=\"hljs-params\">text\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> textArea = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'textarea'\u003C/span>);\n        textArea.\u003Cspan class=\"hljs-property\">value\u003C/span> = text;\n        textArea.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">position\u003C/span> = \u003Cspan class=\"hljs-string\">'fixed'\u003C/span>;\n        textArea.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">left\u003C/span> = \u003Cspan class=\"hljs-string\">'-999999px'\u003C/span>;\n        textArea.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">top\u003C/span> = \u003Cspan class=\"hljs-string\">'-999999px'\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-property\">body\u003C/span>.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(textArea);\n        textArea.\u003Cspan class=\"hljs-title function_\">focus\u003C/span>();\n        textArea.\u003Cspan class=\"hljs-title function_\">select\u003C/span>();\n        \n        \u003Cspan class=\"hljs-keyword\">try\u003C/span> {\n            \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">execCommand\u003C/span>(\u003Cspan class=\"hljs-string\">'copy'\u003C/span>);\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">showGlobalCopyFeedback\u003C/span>();\n        } \u003Cspan class=\"hljs-keyword\">catch\u003C/span> (err) {\n            \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">error\u003C/span>(\u003Cspan class=\"hljs-string\">'Fallback copy failed:'\u003C/span>, err);\n        }\n        \n        \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-property\">body\u003C/span>.\u003Cspan class=\"hljs-title function_\">removeChild\u003C/span>(textArea);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">showGlobalCopyFeedback\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> feedback = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n        feedback.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'copy-feedback'\u003C/span>;\n        feedback.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = \u003Cspan class=\"hljs-string\">'Code copied to clipboard'\u003C/span>;\n        feedback.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'aria-live'\u003C/span>, \u003Cspan class=\"hljs-string\">'polite'\u003C/span>);\n        \n        \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-property\">body\u003C/span>.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(feedback);\n        \n        \u003Cspan class=\"hljs-built_in\">setTimeout\u003C/span>(\u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n            feedback.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">add\u003C/span>(\u003Cspan class=\"hljs-string\">'show'\u003C/span>);\n        }, \u003Cspan class=\"hljs-number\">10\u003C/span>);\n        \n        \u003Cspan class=\"hljs-built_in\">setTimeout\u003C/span>(\u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n            feedback.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">remove\u003C/span>(\u003Cspan class=\"hljs-string\">'show'\u003C/span>);\n            \u003Cspan class=\"hljs-built_in\">setTimeout\u003C/span>(\u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n                \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-property\">body\u003C/span>.\u003Cspan class=\"hljs-title function_\">removeChild\u003C/span>(feedback);\n            }, \u003Cspan class=\"hljs-number\">300\u003C/span>);\n        }, \u003Cspan class=\"hljs-number\">2000\u003C/span>);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">selectAllCode\u003C/span>(\u003Cspan class=\"hljs-params\">pre\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> range = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createRange\u003C/span>();\n        range.\u003Cspan class=\"hljs-title function_\">selectNodeContents\u003C/span>(pre);\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> selection = \u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-title function_\">getSelection\u003C/span>();\n        selection.\u003Cspan class=\"hljs-title function_\">removeAllRanges\u003C/span>();\n        selection.\u003Cspan class=\"hljs-title function_\">addRange\u003C/span>(range);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">toggleCodeFold\u003C/span>(\u003Cspan class=\"hljs-params\">pre, button\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> isFolded = pre.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">contains\u003C/span>(\u003Cspan class=\"hljs-string\">'folded'\u003C/span>);\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (isFolded) {\n            pre.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">remove\u003C/span>(\u003Cspan class=\"hljs-string\">'folded'\u003C/span>);\n            button.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = \u003Cspan class=\"hljs-string\">'Collapse'\u003C/span>;\n            button.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'aria-expanded'\u003C/span>, \u003Cspan class=\"hljs-string\">'true'\u003C/span>);\n        } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n            pre.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">add\u003C/span>(\u003Cspan class=\"hljs-string\">'folded'\u003C/span>);\n            button.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = \u003Cspan class=\"hljs-string\">'Expand'\u003C/span>;\n            button.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'aria-expanded'\u003C/span>, \u003Cspan class=\"hljs-string\">'false'\u003C/span>);\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">downloadCode\u003C/span>(\u003Cspan class=\"hljs-params\">pre\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> code = pre.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'code'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> text = code ? code.\u003Cspan class=\"hljs-property\">textContent\u003C/span> : pre.\u003Cspan class=\"hljs-property\">textContent\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> language = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">extractLanguage\u003C/span>(pre);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> extension = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">getFileExtension\u003C/span>(language);\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> blob = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Blob\u003C/span>([text], { \u003Cspan class=\"hljs-attr\">type\u003C/span>: \u003Cspan class=\"hljs-string\">'text/plain'\u003C/span> });\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> url = \u003Cspan class=\"hljs-variable constant_\">URL\u003C/span>.\u003Cspan class=\"hljs-title function_\">createObjectURL\u003C/span>(blob);\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> a = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'a'\u003C/span>);\n        a.\u003Cspan class=\"hljs-property\">href\u003C/span> = url;\n        a.\u003Cspan class=\"hljs-property\">download\u003C/span> = \u003Cspan class=\"hljs-string\">`code-example.\u003Cspan class=\"hljs-subst\">${extension}\u003C/span>`\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-property\">body\u003C/span>.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(a);\n        a.\u003Cspan class=\"hljs-title function_\">click\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-property\">body\u003C/span>.\u003Cspan class=\"hljs-title function_\">removeChild\u003C/span>(a);\n        \n        \u003Cspan class=\"hljs-variable constant_\">URL\u003C/span>.\u003Cspan class=\"hljs-title function_\">revokeObjectURL\u003C/span>(url);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">extractLanguage\u003C/span>(\u003Cspan class=\"hljs-params\">pre\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> className = pre.\u003Cspan class=\"hljs-property\">className\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> match = className.\u003Cspan class=\"hljs-title function_\">match\u003C/span>(\u003Cspan class=\"hljs-regexp\">/language-([a-zA-Z0-9-]+)/\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> match ? match[\u003Cspan class=\"hljs-number\">1\u003C/span>] : \u003Cspan class=\"hljs-string\">'txt'\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">getFileExtension\u003C/span>(\u003Cspan class=\"hljs-params\">language\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> extensions = {\n            \u003Cspan class=\"hljs-string\">'javascript'\u003C/span>: \u003Cspan class=\"hljs-string\">'js'\u003C/span>,\n            \u003Cspan class=\"hljs-string\">'typescript'\u003C/span>: \u003Cspan class=\"hljs-string\">'ts'\u003C/span>,\n            \u003Cspan class=\"hljs-string\">'python'\u003C/span>: \u003Cspan class=\"hljs-string\">'py'\u003C/span>,\n            \u003Cspan class=\"hljs-string\">'java'\u003C/span>: \u003Cspan class=\"hljs-string\">'java'\u003C/span>,\n            \u003Cspan class=\"hljs-string\">'cpp'\u003C/span>: \u003Cspan class=\"hljs-string\">'cpp'\u003C/span>,\n            \u003Cspan class=\"hljs-string\">'c'\u003C/span>: \u003Cspan class=\"hljs-string\">'c'\u003C/span>,\n            \u003Cspan class=\"hljs-string\">'csharp'\u003C/span>: \u003Cspan class=\"hljs-string\">'cs'\u003C/span>,\n            \u003Cspan class=\"hljs-string\">'ruby'\u003C/span>: \u003Cspan class=\"hljs-string\">'rb'\u003C/span>,\n            \u003Cspan class=\"hljs-string\">'go'\u003C/span>: \u003Cspan class=\"hljs-string\">'go'\u003C/span>,\n            \u003Cspan class=\"hljs-string\">'rust'\u003C/span>: \u003Cspan class=\"hljs-string\">'rs'\u003C/span>,\n            \u003Cspan class=\"hljs-string\">'php'\u003C/span>: \u003Cspan class=\"hljs-string\">'php'\u003C/span>,\n            \u003Cspan class=\"hljs-string\">'kotlin'\u003C/span>: \u003Cspan class=\"hljs-string\">'kt'\u003C/span>,\n            \u003Cspan class=\"hljs-string\">'swift'\u003C/span>: \u003Cspan class=\"hljs-string\">'swift'\u003C/span>,\n            \u003Cspan class=\"hljs-string\">'dart'\u003C/span>: \u003Cspan class=\"hljs-string\">'dart'\u003C/span>,\n            \u003Cspan class=\"hljs-string\">'scala'\u003C/span>: \u003Cspan class=\"hljs-string\">'scala'\u003C/span>,\n            \u003Cspan class=\"hljs-string\">'clojure'\u003C/span>: \u003Cspan class=\"hljs-string\">'clj'\u003C/span>,\n            \u003Cspan class=\"hljs-string\">'haskell'\u003C/span>: \u003Cspan class=\"hljs-string\">'hs'\u003C/span>,\n            \u003Cspan class=\"hljs-string\">'bash'\u003C/span>: \u003Cspan class=\"hljs-string\">'sh'\u003C/span>,\n            \u003Cspan class=\"hljs-string\">'shell'\u003C/span>: \u003Cspan class=\"hljs-string\">'sh'\u003C/span>,\n            \u003Cspan class=\"hljs-string\">'powershell'\u003C/span>: \u003Cspan class=\"hljs-string\">'ps1'\u003C/span>,\n            \u003Cspan class=\"hljs-string\">'sql'\u003C/span>: \u003Cspan class=\"hljs-string\">'sql'\u003C/span>,\n            \u003Cspan class=\"hljs-string\">'html'\u003C/span>: \u003Cspan class=\"hljs-string\">'html'\u003C/span>,\n            \u003Cspan class=\"hljs-string\">'css'\u003C/span>: \u003Cspan class=\"hljs-string\">'css'\u003C/span>,\n            \u003Cspan class=\"hljs-string\">'scss'\u003C/span>: \u003Cspan class=\"hljs-string\">'scss'\u003C/span>,\n            \u003Cspan class=\"hljs-string\">'sass'\u003C/span>: \u003Cspan class=\"hljs-string\">'sass'\u003C/span>,\n            \u003Cspan class=\"hljs-string\">'less'\u003C/span>: \u003Cspan class=\"hljs-string\">'less'\u003C/span>,\n            \u003Cspan class=\"hljs-string\">'json'\u003C/span>: \u003Cspan class=\"hljs-string\">'json'\u003C/span>,\n            \u003Cspan class=\"hljs-string\">'yaml'\u003C/span>: \u003Cspan class=\"hljs-string\">'yaml'\u003C/span>,\n            \u003Cspan class=\"hljs-string\">'xml'\u003C/span>: \u003Cspan class=\"hljs-string\">'xml'\u003C/span>,\n            \u003Cspan class=\"hljs-string\">'markdown'\u003C/span>: \u003Cspan class=\"hljs-string\">'md'\u003C/span>,\n            \u003Cspan class=\"hljs-string\">'dockerfile'\u003C/span>: \u003Cspan class=\"hljs-string\">'dockerfile'\u003C/span>\n        };\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> extensions[language] || \u003Cspan class=\"hljs-string\">'txt'\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">autoDetectLanguages\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> untaggedBlocks = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'pre:not([class*="language-"]) code, code:not([class*="language-"])'\u003C/span>);\n        \n        untaggedBlocks.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">block\u003C/span> =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> text = block.\u003Cspan class=\"hljs-property\">textContent\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> detectedLanguage = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">detectLanguage\u003C/span>(text);\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (detectedLanguage) {\n                block.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">`language-\u003Cspan class=\"hljs-subst\">${detectedLanguage}\u003C/span>`\u003C/span>;\n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (block.\u003Cspan class=\"hljs-title function_\">closest\u003C/span>(\u003Cspan class=\"hljs-string\">'pre'\u003C/span>)) {\n                    block.\u003Cspan class=\"hljs-title function_\">closest\u003C/span>(\u003Cspan class=\"hljs-string\">'pre'\u003C/span>).\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">`language-\u003Cspan class=\"hljs-subst\">${detectedLanguage}\u003C/span>`\u003C/span>;\n                }\n            }\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">detectLanguage\u003C/span>(\u003Cspan class=\"hljs-params\">code\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Simple heuristic-based language detection\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> patterns = {\n            \u003Cspan class=\"hljs-string\">'javascript'\u003C/span>: [\n                \u003Cspan class=\"hljs-regexp\">/\\b(function|const|let|var|=>|async|await|require|import)\\b/\u003C/span>,\n                \u003Cspan class=\"hljs-regexp\">/\\bconsole\\.log\\b/\u003C/span>,\n                \u003Cspan class=\"hljs-regexp\">/\\b(document|window)\\./\u003C/span>,\n                \u003Cspan class=\"hljs-regexp\">/\\$\\(/\u003C/span>\n            ],\n            \u003Cspan class=\"hljs-string\">'python'\u003C/span>: [\n                \u003Cspan class=\"hljs-regexp\">/\\b(def|class|import|from|if __name__|print|range|len)\\b/\u003C/span>,\n                \u003Cspan class=\"hljs-regexp\">/:\\s*$/m\u003C/span>,\n                \u003Cspan class=\"hljs-regexp\">/\\bindent/\u003C/span>\n            ],\n            \u003Cspan class=\"hljs-string\">'java'\u003C/span>: [\n                \u003Cspan class=\"hljs-regexp\">/\\b(public|private|protected|static|void|class|interface)\\b/\u003C/span>,\n                \u003Cspan class=\"hljs-regexp\">/\\bSystem\\.out\\.print/\u003C/span>,\n                \u003Cspan class=\"hljs-regexp\">/\\bpublic static void main\\b/\u003C/span>\n            ],\n            \u003Cspan class=\"hljs-string\">'html'\u003C/span>: [\n                \u003Cspan class=\"hljs-regexp\">/<\\/?[a-zA-Z][^>]*>/\u003C/span>,\n                \u003Cspan class=\"hljs-regexp\">/<!DOCTYPE/i\u003C/span>,\n                \u003Cspan class=\"hljs-regexp\">/<html|<head|<body/i\u003C/span>\n            ],\n            \u003Cspan class=\"hljs-string\">'css'\u003C/span>: [\n                \u003Cspan class=\"hljs-regexp\">/\\{[^}]*\\}/\u003C/span>,\n                \u003Cspan class=\"hljs-regexp\">/[a-zA-Z-]+\\s*:\\s*[^;]+;/\u003C/span>,\n                \u003Cspan class=\"hljs-regexp\">/@media|@import|@keyframes/\u003C/span>\n            ],\n            \u003Cspan class=\"hljs-string\">'sql'\u003C/span>: [\n                \u003Cspan class=\"hljs-regexp\">/\\b(SELECT|FROM|WHERE|JOIN|INSERT|UPDATE|DELETE|CREATE|ALTER|DROP)\\b/i\u003C/span>\n            ],\n            \u003Cspan class=\"hljs-string\">'bash'\u003C/span>: [\n                \u003Cspan class=\"hljs-regexp\">/^#!/\u003C/span>,\n                \u003Cspan class=\"hljs-regexp\">/\\$[A-Za-z_][A-Za-z0-9_]*/\u003C/span>,\n                \u003Cspan class=\"hljs-regexp\">/\\becho|grep|awk|sed|ls|cd|mkdir\\b/\u003C/span>\n            ]\n        };\n        \n        \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">const\u003C/span> [language, regexes] \u003Cspan class=\"hljs-keyword\">of\u003C/span> \u003Cspan class=\"hljs-title class_\">Object\u003C/span>.\u003Cspan class=\"hljs-title function_\">entries\u003C/span>(patterns)) {\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (regexes.\u003Cspan class=\"hljs-title function_\">some\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">regex\u003C/span> =>\u003C/span> regex.\u003Cspan class=\"hljs-title function_\">test\u003C/span>(code))) {\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> language;\n            }\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-literal\">null\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-keyword\">async\u003C/span> \u003Cspan class=\"hljs-title function_\">loadScript\u003C/span>(\u003Cspan class=\"hljs-params\">src\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Promise\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">resolve, reject\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> script = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'script'\u003C/span>);\n            script.\u003Cspan class=\"hljs-property\">src\u003C/span> = src;\n            script.\u003Cspan class=\"hljs-property\">onload\u003C/span> = resolve;\n            script.\u003Cspan class=\"hljs-property\">onerror\u003C/span> = reject;\n            \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-property\">head\u003C/span>.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(script);\n        });\n    }\n    \n    \u003Cspan class=\"hljs-keyword\">async\u003C/span> \u003Cspan class=\"hljs-title function_\">loadCSS\u003C/span>(\u003Cspan class=\"hljs-params\">href\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Promise\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">resolve, reject\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> link = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'link'\u003C/span>);\n            link.\u003Cspan class=\"hljs-property\">rel\u003C/span> = \u003Cspan class=\"hljs-string\">'stylesheet'\u003C/span>;\n            link.\u003Cspan class=\"hljs-property\">href\u003C/span> = href;\n            link.\u003Cspan class=\"hljs-property\">onload\u003C/span> = resolve;\n            link.\u003Cspan class=\"hljs-property\">onerror\u003C/span> = reject;\n            \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-property\">head\u003C/span>.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(link);\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">bindEvents\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Handle dynamically added code blocks\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> observer = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">MutationObserver\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">mutations\u003C/span>) =>\u003C/span> {\n            mutations.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">mutation\u003C/span> =>\u003C/span> {\n                mutation.\u003Cspan class=\"hljs-property\">addedNodes\u003C/span>.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">node\u003C/span> =>\u003C/span> {\n                    \u003Cspan class=\"hljs-keyword\">if\u003C/span> (node.\u003Cspan class=\"hljs-property\">nodeType\u003C/span> === \u003Cspan class=\"hljs-number\">1\u003C/span>) {\n                        \u003Cspan class=\"hljs-keyword\">const\u003C/span> codeBlocks = node.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'pre[class*="language-"], code[class*="language-"]'\u003C/span>);\n                        codeBlocks.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">block\u003C/span> =>\u003C/span> {\n                            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">enhanceCodeBlock\u003C/span>(block);\n                        });\n                        \n                        \u003Cspan class=\"hljs-comment\">// Re-run Prism highlighting\u003C/span>\n                        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-keyword\">typeof\u003C/span> \u003Cspan class=\"hljs-title class_\">Prism\u003C/span> !== \u003Cspan class=\"hljs-string\">'undefined'\u003C/span> && \u003Cspan class=\"hljs-title class_\">Prism\u003C/span>.\u003Cspan class=\"hljs-property\">highlightAllUnder\u003C/span>) {\n                            \u003Cspan class=\"hljs-title class_\">Prism\u003C/span>.\u003Cspan class=\"hljs-title function_\">highlightAllUnder\u003C/span>(node);\n                        }\n                    }\n                });\n            });\n        });\n        \n        observer.\u003Cspan class=\"hljs-title function_\">observe\u003C/span>(\u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-property\">body\u003C/span>, {\n            \u003Cspan class=\"hljs-attr\">childList\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">subtree\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>\n        });\n    }\n    \n    \u003Cspan class=\"hljs-comment\">// Public API\u003C/span>\n    \u003Cspan class=\"hljs-title function_\">highlightElement\u003C/span>(\u003Cspan class=\"hljs-params\">element\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-keyword\">typeof\u003C/span> \u003Cspan class=\"hljs-title class_\">Prism\u003C/span> !== \u003Cspan class=\"hljs-string\">'undefined'\u003C/span>) {\n            \u003Cspan class=\"hljs-title class_\">Prism\u003C/span>.\u003Cspan class=\"hljs-title function_\">highlightElement\u003C/span>(element);\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">enhanceCodeBlock\u003C/span>(element);\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">addLanguage\u003C/span>(\u003Cspan class=\"hljs-params\">name, grammar\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-keyword\">typeof\u003C/span> \u003Cspan class=\"hljs-title class_\">Prism\u003C/span> !== \u003Cspan class=\"hljs-string\">'undefined'\u003C/span>) {\n            \u003Cspan class=\"hljs-title class_\">Prism\u003C/span>.\u003Cspan class=\"hljs-property\">languages\u003C/span>[name] = grammar;\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">loadedLanguages\u003C/span>.\u003Cspan class=\"hljs-title function_\">add\u003C/span>(name);\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">setTheme\u003C/span>(\u003Cspan class=\"hljs-params\">theme\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">theme\u003C/span> = theme;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">loadTheme\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">updateOptions\u003C/span>(\u003Cspan class=\"hljs-params\">newOptions\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span> = { ...\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>, ...newOptions };\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">setupCodeBlocks\u003C/span>();\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">// Enhanced CSS for advanced syntax highlighting\u003C/span>\n\u003Cspan class=\"hljs-keyword\">const\u003C/span> advancedSyntaxStyles = \u003Cspan class=\"hljs-string\">`\n/* Code block wrapper styling */\n.code-block-wrapper {\n    position: relative;\n    margin: 1.5rem 0;\n    border-radius: 8px;\n    background: #f8f9fa;\n    border: 1px solid #e9ecef;\n    overflow: hidden;\n    box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n}\n\n/* Language label */\n.language-label {\n    position: absolute;\n    top: 8px;\n    right: 8px;\n    background: rgba(0,0,0,0.7);\n    color: white;\n    padding: 4px 8px;\n    border-radius: 4px;\n    font-size: 12px;\n    font-weight: 500;\n    z-index: 10;\n    pointer-events: none;\n}\n\n/* Code toolbar */\n.code-toolbar {\n    position: absolute;\n    top: 8px;\n    right: 8px;\n    display: flex;\n    gap: 4px;\n    opacity: 0;\n    transition: opacity 0.2s ease;\n    z-index: 10;\n}\n\n.code-block-wrapper:hover .code-toolbar {\n    opacity: 1;\n}\n\n.code-toolbar button {\n    background: rgba(0,0,0,0.7);\n    color: white;\n    border: none;\n    padding: 6px 10px;\n    border-radius: 4px;\n    font-size: 12px;\n    cursor: pointer;\n    transition: background-color 0.2s ease;\n}\n\n.code-toolbar button:hover {\n    background: rgba(0,0,0,0.9);\n}\n\n.code-toolbar button:focus {\n    outline: 2px solid #007bff;\n    outline-offset: 2px;\n}\n\n.code-toolbar button.copied {\n    background: #28a745;\n}\n\n/* Enhanced pre styling */\n.code-block-wrapper pre {\n    margin: 0;\n    padding: 16px;\n    background: inherit;\n    border-radius: 0;\n    font-size: 14px;\n    line-height: 1.5;\n    font-family: 'Fira Code', 'Consolas', 'Monaco', 'Courier New', monospace;\n    overflow-x: auto;\n    tab-size: 4;\n}\n\n.code-block-wrapper pre:focus {\n    outline: 2px solid #007bff;\n    outline-offset: -2px;\n}\n\n/* Code folding */\n.code-block-wrapper pre.folded {\n    max-height: 100px;\n    overflow: hidden;\n    position: relative;\n}\n\n.code-block-wrapper pre.folded::after {\n    content: '';\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    height: 40px;\n    background: linear-gradient(transparent, #f8f9fa);\n    pointer-events: none;\n}\n\n/* Line numbers enhancement */\n.line-numbers-rows {\n    padding-left: 0 !important;\n    border-right: 1px solid #e9ecef;\n    margin-right: 16px;\n    padding-right: 8px;\n}\n\n.line-numbers-rows > span:before {\n    color: #6c757d;\n    font-weight: normal;\n}\n\n/* Copy feedback */\n.copy-feedback {\n    position: fixed;\n    top: 20px;\n    right: 20px;\n    background: #28a745;\n    color: white;\n    padding: 12px 20px;\n    border-radius: 6px;\n    font-size: 14px;\n    font-weight: 500;\n    box-shadow: 0 4px 12px rgba(0,0,0,0.2);\n    transform: translateX(100%);\n    opacity: 0;\n    transition: all 0.3s ease;\n    z-index: 9999;\n}\n\n.copy-feedback.show {\n    transform: translateX(0);\n    opacity: 1;\n}\n\n/* Dark theme support */\n@media (prefers-color-scheme: dark) {\n    .code-block-wrapper {\n        background: #1e1e1e;\n        border-color: #404040;\n    }\n    \n    .line-numbers-rows {\n        border-right-color: #404040;\n    }\n    \n    .line-numbers-rows > span:before {\n        color: #888;\n    }\n}\n\n/* High contrast mode */\n@media (prefers-contrast: high) {\n    .code-block-wrapper {\n        border: 2px solid #000;\n        background: #fff;\n    }\n    \n    .code-toolbar button {\n        background: #000;\n        color: #fff;\n        border: 1px solid #fff;\n    }\n    \n    .language-label {\n        background: #000;\n        color: #fff;\n        border: 1px solid #fff;\n    }\n}\n\n/* Reduced motion preferences */\n@media (prefers-reduced-motion: reduce) {\n    .code-toolbar,\n    .copy-feedback,\n    .code-toolbar button {\n        transition: none;\n    }\n}\n\n/* Mobile optimizations */\n@media (max-width: 768px) {\n    .code-block-wrapper pre {\n        padding: 12px;\n        font-size: 13px;\n    }\n    \n    .code-toolbar {\n        opacity: 1; /* Always show on mobile */\n        position: static;\n        background: rgba(0,0,0,0.05);\n        padding: 8px;\n        border-bottom: 1px solid #e9ecef;\n        justify-content: flex-end;\n    }\n    \n    .language-label {\n        position: static;\n        background: rgba(0,0,0,0.05);\n        color: inherit;\n        padding: 8px 12px;\n        border-bottom: 1px solid #e9ecef;\n        border-radius: 0;\n    }\n}\n\n/* Print styles */\n@media print {\n    .code-toolbar,\n    .language-label {\n        display: none;\n    }\n    \n    .code-block-wrapper {\n        break-inside: avoid;\n        box-shadow: none;\n        border: 1px solid #000;\n    }\n    \n    .code-block-wrapper pre {\n        white-space: pre-wrap;\n        word-wrap: break-word;\n    }\n}\n\n/* Accessibility improvements */\n.code-block-wrapper pre[aria-label]:focus::before {\n    content: attr(aria-label);\n    position: absolute;\n    top: -30px;\n    left: 0;\n    background: #000;\n    color: #fff;\n    padding: 4px 8px;\n    border-radius: 4px;\n    font-size: 12px;\n    z-index: 1000;\n}\n\n/* Language-specific enhancements */\n.language-diff .token.inserted {\n    background: rgba(40, 167, 69, 0.2);\n    color: #155724;\n}\n\n.language-diff .token.deleted {\n    background: rgba(220, 53, 69, 0.2);\n    color: #721c24;\n}\n\n.token.comment {\n    font-style: italic;\n}\n\n.token.string,\n.token.attr-value {\n    quotes: '"' '"';\n}\n\n.token.url {\n    text-decoration: underline;\n}\n\n/* Custom tokens for enhanced highlighting */\n.token.this,\n.token.super {\n    color: #e83e8c;\n}\n\n.token.console {\n    color: #6f42c1;\n}\n\n.token.dom {\n    color: #fd7e14;\n}\n\n.token.filesystem {\n    color: #20c997;\n}\n`\u003C/span>;\n\n\u003Cspan class=\"hljs-comment\">// Inject enhanced styles\u003C/span>\n\u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-keyword\">typeof\u003C/span> \u003Cspan class=\"hljs-variable language_\">document\u003C/span> !== \u003Cspan class=\"hljs-string\">'undefined'\u003C/span>) {\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> style = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'style'\u003C/span>);\n    style.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = advancedSyntaxStyles;\n    \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-property\">head\u003C/span>.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(style);\n}\n\n\u003Cspan class=\"hljs-comment\">// Initialize advanced syntax highlighting\u003C/span>\n\u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'DOMContentLoaded'\u003C/span>, \u003Cspan class=\"hljs-keyword\">function\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n    \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">AdvancedPrismHighlighter\u003C/span>({\n        \u003Cspan class=\"hljs-attr\">theme\u003C/span>: \u003Cspan class=\"hljs-string\">'default'\u003C/span>,\n        \u003Cspan class=\"hljs-attr\">languages\u003C/span>: [\n            \u003Cspan class=\"hljs-string\">'javascript'\u003C/span>, \u003Cspan class=\"hljs-string\">'typescript'\u003C/span>, \u003Cspan class=\"hljs-string\">'python'\u003C/span>, \u003Cspan class=\"hljs-string\">'java'\u003C/span>, \u003Cspan class=\"hljs-string\">'cpp'\u003C/span>, \u003Cspan class=\"hljs-string\">'c'\u003C/span>, \u003Cspan class=\"hljs-string\">'csharp'\u003C/span>,\n            \u003Cspan class=\"hljs-string\">'ruby'\u003C/span>, \u003Cspan class=\"hljs-string\">'go'\u003C/span>, \u003Cspan class=\"hljs-string\">'rust'\u003C/span>, \u003Cspan class=\"hljs-string\">'php'\u003C/span>, \u003Cspan class=\"hljs-string\">'kotlin'\u003C/span>, \u003Cspan class=\"hljs-string\">'swift'\u003C/span>, \u003Cspan class=\"hljs-string\">'dart'\u003C/span>, \u003Cspan class=\"hljs-string\">'scala'\u003C/span>,\n            \u003Cspan class=\"hljs-string\">'bash'\u003C/span>, \u003Cspan class=\"hljs-string\">'powershell'\u003C/span>, \u003Cspan class=\"hljs-string\">'sql'\u003C/span>, \u003Cspan class=\"hljs-string\">'html'\u003C/span>, \u003Cspan class=\"hljs-string\">'css'\u003C/span>, \u003Cspan class=\"hljs-string\">'scss'\u003C/span>, \u003Cspan class=\"hljs-string\">'json'\u003C/span>, \u003Cspan class=\"hljs-string\">'yaml'\u003C/span>,\n            \u003Cspan class=\"hljs-string\">'markdown'\u003C/span>, \u003Cspan class=\"hljs-string\">'dockerfile'\u003C/span>, \u003Cspan class=\"hljs-string\">'nginx'\u003C/span>, \u003Cspan class=\"hljs-string\">'apache'\u003C/span>\n        ],\n        \u003Cspan class=\"hljs-attr\">enableLineNumbers\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n        \u003Cspan class=\"hljs-attr\">enableCopyButton\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n        \u003Cspan class=\"hljs-attr\">enableLanguageLabels\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n        \u003Cspan class=\"hljs-attr\">enableCodeFolding\u003C/span>: \u003Cspan class=\"hljs-literal\">false\u003C/span>,\n        \u003Cspan class=\"hljs-attr\">autoDetectLanguage\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n        \u003Cspan class=\"hljs-attr\">maxHeight\u003C/span>: \u003Cspan class=\"hljs-string\">'600px'\u003C/span>\n    });\n});\n\n\u003Cspan class=\"hljs-comment\">// Export for module systems\u003C/span>\n\u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-keyword\">typeof\u003C/span> \u003Cspan class=\"hljs-variable language_\">module\u003C/span> !== \u003Cspan class=\"hljs-string\">'undefined'\u003C/span> && \u003Cspan class=\"hljs-variable language_\">module\u003C/span>.\u003Cspan class=\"hljs-property\">exports\u003C/span>) {\n    \u003Cspan class=\"hljs-variable language_\">module\u003C/span>.\u003Cspan class=\"hljs-property\">exports\u003C/span> = \u003Cspan class=\"hljs-title class_\">AdvancedPrismHighlighter\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-keyword\">typeof\u003C/span> define === \u003Cspan class=\"hljs-string\">'function'\u003C/span> && define.\u003Cspan class=\"hljs-property\">amd\u003C/span>) {\n    \u003Cspan class=\"hljs-title function_\">define\u003C/span>([], \u003Cspan class=\"hljs-keyword\">function\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-title class_\">AdvancedPrismHighlighter\u003C/span>;\n    });\n}\n\u003C/code>\u003C/pre>\u003Ch3 id=\"custom-theme-development\">Custom Theme Development\u003C/h3>\n\u003Cp>Creating brand-consistent syntax highlighting themes:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">\u003Cspan class=\"hljs-section\"># Custom Theme Creation System\u003C/span>\n\n\u003Cspan class=\"hljs-section\">## CSS-in-JS Theme Builder\u003C/span>\n\u003Cspan class=\"hljs-code\">```javascript\n// theme-builder.js - Dynamic theme generation system\nclass SyntaxThemeBuilder {\n    constructor() {\n        this.themes = new Map();\n        this.customProperties = new Map();\n        this.activeTheme = null;\n        \n        this.initializeDefaultThemes();\n    }\n    \n    initializeDefaultThemes() {\n        // GitHub-inspired theme\n        this.addTheme('github', {\n            name: 'GitHub',\n            colors: {\n                background: '#ffffff',\n                foreground: '#24292e',\n                selection: '#c8e1ff',\n                comment: '#6a737d',\n                keyword: '#d73a49',\n                string: '#032f62',\n                number: '#005cc5',\n                operator: '#24292e',\n                function: '#6f42c1',\n                variable: '#e36209',\n                type: '#005cc5',\n                tag: '#22863a',\n                attribute: '#6f42c1',\n                punctuation: '#24292e',\n                lineNumbers: '#959da5',\n                lineHighlight: '#f6f8fa',\n                border: '#e1e4e8',\n                scrollbar: '#d1d5da'\n            },\n            fonts: {\n                code: "'SFMono-Regular', 'Consolas', 'Liberation Mono', 'Menlo', 'Courier', monospace"\n            },\n            sizes: {\n                fontSize: '14px',\n                lineHeight: '1.45'\n            }\n        });\n        \n        // VS Code Dark+ theme\n        this.addTheme('vscode-dark', {\n            name: 'VS Code Dark+',\n            colors: {\n                background: '#1e1e1e',\n                foreground: '#d4d4d4',\n                selection: '#264f78',\n                comment: '#6a9955',\n                keyword: '#569cd6',\n                string: '#ce9178',\n                number: '#b5cea8',\n                operator: '#d4d4d4',\n                function: '#dcdcaa',\n                variable: '#9cdcfe',\n                type: '#4ec9b0',\n                tag: '#569cd6',\n                attribute: '#92c5f8',\n                punctuation: '#d4d4d4',\n                lineNumbers: '#858585',\n                lineHighlight: '#2a2d2e',\n                border: '#3c3c3c',\n                scrollbar: '#424242'\n            },\n            fonts: {\n                code: "'Fira Code', 'Cascadia Code', 'JetBrains Mono', 'Consolas', monospace"\n            },\n            sizes: {\n                fontSize: '14px',\n                lineHeight: '1.4'\n            }\n        });\n        \n        // Material Design theme\n        this.addTheme('material', {\n            name: 'Material Design',\n            colors: {\n                background: '#263238',\n                foreground: '#eeffff',\n                selection: '#546e7a',\n                comment: '#546e7a',\n                keyword: '#c792ea',\n                string: '#c3e88d',\n                number: '#f78c6c',\n                operator: '#89ddff',\n                function: '#82aaff',\n                variable: '#eeffff',\n                type: '#ffcb6b',\n                tag: '#f07178',\n                attribute: '#c792ea',\n                punctuation: '#89ddff',\n                lineNumbers: '#546e7a',\n                lineHighlight: '#314549',\n                border: '#37474f',\n                scrollbar: '#37474f'\n            },\n            fonts: {\n                code: "'Operator Mono', 'Fira Code', 'SF Mono', monospace"\n            },\n            sizes: {\n                fontSize: '14px',\n                lineHeight: '1.5'\n            }\n        });\n    }\n    \n    addTheme(id, themeConfig) {\n        this.themes.set(id, themeConfig);\n    }\n    \n    generateThemeCSS(themeId) {\n        const theme = this.themes.get(themeId);\n        if (!theme) {\n            throw new Error(`Theme '${themeId}' not found`);\n        }\n        \n        const { colors, fonts, sizes } = theme;\n        \n        return `\n/* ${theme.name} Theme */\n.theme-${themeId} {\n    --syntax-bg: ${colors.background};\n    --syntax-fg: ${colors.foreground};\n    --syntax-selection: ${colors.selection};\n    --syntax-comment: ${colors.comment};\n    --syntax-keyword: ${colors.keyword};\n    --syntax-string: ${colors.string};\n    --syntax-number: ${colors.number};\n    --syntax-operator: ${colors.operator};\n    --syntax-function: ${colors.function};\n    --syntax-variable: ${colors.variable};\n    --syntax-type: ${colors.type};\n    --syntax-tag: ${colors.tag};\n    --syntax-attribute: ${colors.attribute};\n    --syntax-punctuation: ${colors.punctuation};\n    --syntax-line-numbers: ${colors.lineNumbers};\n    --syntax-line-highlight: ${colors.lineHighlight};\n    --syntax-border: ${colors.border};\n    --syntax-scrollbar: ${colors.scrollbar};\n    --syntax-font: ${fonts.code};\n    --syntax-font-size: ${sizes.fontSize};\n    --syntax-line-height: ${sizes.lineHeight};\n}\n\n.theme-${themeId} pre[class*="language-"] {\n    background: var(--syntax-bg);\n    color: var(--syntax-fg);\n    font-family: var(--syntax-font);\n    font-size: var(--syntax-font-size);\n    line-height: var(--syntax-line-height);\n    border: 1px solid var(--syntax-border);\n}\n\n.theme-${themeId} code[class*="language-"] {\n    background: var(--syntax-bg);\n    color: var(--syntax-fg);\n    font-family: var(--syntax-font);\n}\n\n.theme-${themeId} .token.comment,\n.theme-${themeId} .token.prolog,\n.theme-${themeId} .token.doctype,\n.theme-${themeId} .token.cdata {\n    color: var(--syntax-comment);\n}\n\n.theme-${themeId} .token.punctuation {\n    color: var(--syntax-punctuation);\n}\n\n.theme-${themeId} .token.property,\n.theme-${themeId} .token.tag,\n.theme-${themeId} .token.boolean,\n.theme-${themeId} .token.constant,\n.theme-${themeId} .token.symbol,\n.theme-${themeId} .token.deleted {\n    color: var(--syntax-tag);\n}\n\n.theme-${themeId} .token.number {\n    color: var(--syntax-number);\n}\n\n.theme-${themeId} .token.selector,\n.theme-${themeId} .token.attr-name,\n.theme-${themeId} .token.string,\n.theme-${themeId} .token.char,\n.theme-${themeId} .token.builtin,\n.theme-${themeId} .token.inserted {\n    color: var(--syntax-string);\n}\n\n.theme-${themeId} .token.operator,\n.theme-${themeId} .token.entity,\n.theme-${themeId} .token.url,\n.theme-${themeId} .language-css .token.string,\n.theme-${themeId} .style .token.string {\n    color: var(--syntax-operator);\n}\n\n.theme-${themeId} .token.atrule,\n.theme-${themeId} .token.attr-value,\n.theme-${themeId} .token.keyword {\n    color: var(--syntax-keyword);\n}\n\n.theme-${themeId} .token.function,\n.theme-${themeId} .token.class-name {\n    color: var(--syntax-function);\n}\n\n.theme-${themeId} .token.regex,\n.theme-${themeId} .token.important,\n.theme-${themeId} .token.variable {\n    color: var(--syntax-variable);\n}\n\n.theme-${themeId} .token.namespace {\n    color: var(--syntax-type);\n}\n\n.theme-${themeId} .line-numbers .line-numbers-rows {\n    border-right-color: var(--syntax-border);\n}\n\n.theme-${themeId} .line-numbers-rows > span:before {\n    color: var(--syntax-line-numbers);\n}\n\n.theme-${themeId} .line-highlight {\n    background: var(--syntax-line-highlight);\n}\n\n.theme-${themeId} pre[class*="language-"]::-webkit-scrollbar {\n    width: 12px;\n    height: 12px;\n}\n\n.theme-${themeId} pre[class*="language-"]::-webkit-scrollbar-track {\n    background: var(--syntax-bg);\n}\n\n.theme-${themeId} pre[class*="language-"]::-webkit-scrollbar-thumb {\n    background: var(--syntax-scrollbar);\n    border-radius: 6px;\n}\n\n.theme-${themeId} pre[class*="language-"]::-webkit-scrollbar-thumb:hover {\n    background: color-mix(in srgb, var(--syntax-scrollbar), white 20%);\n}\n\n.theme-${themeId} ::selection {\n    background: var(--syntax-selection);\n}\n`;\n    }\n    \n    applyTheme(themeId) {\n        // Remove existing theme stylesheets\n        const existingThemes = document.querySelectorAll('style[data-syntax-theme]');\n        existingThemes.forEach(style => style.remove());\n        \n        // Apply new theme\n        const css = this.generateThemeCSS(themeId);\n        const style = document.createElement('style');\n        style.setAttribute('data-syntax-theme', themeId);\n        style.textContent = css;\n        document.head.appendChild(style);\n        \n        // Update body class\n        document.body.classList.remove(...Array.from(document.body.classList).filter(cls => cls.startsWith('theme-')));\n        document.body.classList.add(`theme-${themeId}`);\n        \n        this.activeTheme = themeId;\n        \n        // Store preference\n        localStorage.setItem('preferred-syntax-theme', themeId);\n        \n        // Emit theme change event\n        document.dispatchEvent(new CustomEvent('syntaxThemeChanged', {\n            detail: { themeId, theme: this.themes.get(themeId) }\n        }));\n    }\n    \n    createCustomTheme(id, baseThemeId, overrides = {}) {\n        const baseTheme = this.themes.get(baseThemeId);\n        if (!baseTheme) {\n            throw new Error(`Base theme '${baseThemeId}' not found`);\n        }\n        \n        const customTheme = {\n            name: overrides.name || `Custom ${baseTheme.name}`,\n            colors: { ...baseTheme.colors, ...overrides.colors },\n            fonts: { ...baseTheme.fonts, ...overrides.fonts },\n            sizes: { ...baseTheme.sizes, ...overrides.sizes }\n        };\n        \n        this.addTheme(id, customTheme);\n        return id;\n    }\n    \n    getAvailableThemes() {\n        return Array.from(this.themes.entries()).map(([id, theme]) => ({\n            id,\n            name: theme.name\n        }));\n    }\n    \n    exportTheme(themeId) {\n        const theme = this.themes.get(themeId);\n        if (!theme) {\n            throw new Error(`Theme '${themeId}' not found`);\n        }\n        \n        return {\n            id: themeId,\n            ...theme\n        };\n    }\n    \n    importTheme(themeData) {\n        const { id, ...theme } = themeData;\n        this.addTheme(id, theme);\n        return id;\n    }\n    \n    // Color utility methods\n    lighten(color, amount) {\n        const num = parseInt(color.replace("#", ""), 16);\n        const amt = Math.round(2.55 * amount);\n        const R = (num >> 16) + amt;\n        const G = (num >> 8 & 0x00FF) + amt;\n        const B = (num & 0x0000FF) + amt;\n        \n        return "#" + (0x1000000 + (R < 255 ? R < 1 ? 0 : R : 255) * 0x10000 +\n            (G < 255 ? G < 1 ? 0 : G : 255) * 0x100 +\n            (B < 255 ? B < 1 ? 0 : B : 255)).toString(16).slice(1);\n    }\n    \n    darken(color, amount) {\n        return this.lighten(color, -amount);\n    }\n    \n    hexToRgb(hex) {\n        const result = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(hex);\n        return result ? {\n            r: parseInt(result[1], 16),\n            g: parseInt(result[2], 16),\n            b: parseInt(result[3], 16)\n        } : null;\n    }\n    \n    rgbToHex(r, g, b) {\n        return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);\n    }\n}\n\n// Theme selector component\nclass ThemeSelector {\n    constructor(themeBuilder, containerId) {\n        this.themeBuilder = themeBuilder;\n        this.container = document.getElementById(containerId);\n        \n        if (this.container) {\n            this.createSelector();\n            this.loadSavedTheme();\n        }\n    }\n    \n    createSelector() {\n        const selector = document.createElement('select');\n        selector.id = 'syntax-theme-selector';\n        selector.className = 'theme-selector';\n        selector.setAttribute('aria-label', 'Select syntax highlighting theme');\n        \n        const label = document.createElement('label');\n        label.htmlFor = 'syntax-theme-selector';\n        label.textContent = 'Syntax Theme: ';\n        label.className = 'theme-selector-label';\n        \n        const themes = this.themeBuilder.getAvailableThemes();\n        themes.forEach(theme => {\n            const option = document.createElement('option');\n            option.value = theme.id;\n            option.textContent = theme.name;\n            selector.appendChild(option);\n        });\n        \n        selector.addEventListener('change', (e) => {\n            this.themeBuilder.applyTheme(e.target.value);\n        });\n        \n        this.container.appendChild(label);\n        this.container.appendChild(selector);\n        this.selector = selector;\n    }\n    \n    loadSavedTheme() {\n        const savedTheme = localStorage.getItem('preferred-syntax-theme');\n        if (savedTheme && this.themeBuilder.themes.has(savedTheme)) {\n            this.selector.value = savedTheme;\n            this.themeBuilder.applyTheme(savedTheme);\n        } else {\n            // Apply default theme based on system preference\n            const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;\n            const defaultTheme = prefersDark ? 'vscode-dark' : 'github';\n            this.selector.value = defaultTheme;\n            this.themeBuilder.applyTheme(defaultTheme);\n        }\n    }\n}\n\n// Initialize theme system\nconst themeBuilder = new SyntaxThemeBuilder();\n\n// Auto-initialize if container exists\ndocument.addEventListener('DOMContentLoaded', function() {\n    const themeContainer = document.getElementById('theme-selector-container');\n    if (themeContainer) {\n        new ThemeSelector(themeBuilder, 'theme-selector-container');\n    }\n    \n    // Listen for system theme changes\n    const darkModeQuery = window.matchMedia('(prefers-color-scheme: dark)');\n    darkModeQuery.addListener(function(e) {\n        if (!localStorage.getItem('preferred-syntax-theme')) {\n            const autoTheme = e.matches ? 'vscode-dark' : 'github';\n            themeBuilder.applyTheme(autoTheme);\n        }\n    });\n});\n```\u003C/span>\n\n\u003Cspan class=\"hljs-section\">## Language-Specific Highlighting Extensions\u003C/span>\n\n\u003Cspan class=\"hljs-section\">### Custom Language Definitions\u003C/span>\n\u003Cspan class=\"hljs-code\">```javascript\n// custom-languages.js - Extended language support\nclass CustomLanguageDefinitions {\n    constructor(prismInstance) {\n        this.Prism = prismInstance;\n        this.defineCustomLanguages();\n    }\n    \n    defineCustomLanguages() {\n        this.defineDockerfile();\n        this.defineNginxConfig();\n        this.defineEnvFiles();\n        this.defineLogFormats();\n        this.defineConfigFormats();\n        this.defineBashWithPrompt();\n        this.defineJSONWithComments();\n        this.defineMarkdownWithMeta();\n    }\n    \n    defineDockerfile() {\n        this.Prism.languages.dockerfile = {\n            'comment': {\n                pattern: /#.*/,\n                greedy: true\n            },\n            'instruction': {\n                pattern: /^\\s*(?:FROM|MAINTAINER|RUN|CMD|LABEL|EXPOSE|ENV|ADD|COPY|ENTRYPOINT|VOLUME|USER|WORKDIR|ARG|ONBUILD|STOPSIGNAL|HEALTHCHECK|SHELL)\\b/im,\n                alias: 'keyword'\n            },\n            'string': {\n                pattern: /"(?:[^"\\\\]|\\\\.)*"/,\n                greedy: true\n            },\n            'variable': /\\$(?:\\w+|\\{[^}]*\\})/,\n            'operator': /&&|\\|\\||[<>]=?|[!=]=|[&|]|\\+\\+?|--?|\\*\\*?|\\/\\/?|%|\\^|[?:~]/,\n            'punctuation': /[{}[\\];(),.:]/\n        };\n        \n        this.Prism.languages.docker = this.Prism.languages.dockerfile;\n    }\n    \n    defineNginxConfig() {\n        this.Prism.languages.nginx = {\n            'comment': /#.*/,\n            'directive': {\n                pattern: /\\b(?:server|location|upstream|proxy_pass|listen|server_name|root|index|try_files|error_page|access_log|error_log|gzip|ssl_certificate|ssl_certificate_key|return|rewrite|if|set|add_header|expires|client_max_body_size|worker_processes|events|http|stream)\\b/,\n                alias: 'keyword'\n            },\n            'variable': /\\$[a-zA-Z_][a-zA-Z0-9_]*/,\n            'string': {\n                pattern: /"(?:[^"\\\\]|\\\\.)*"|'(?:[^'\\\\]|\\\\.)*'/,\n                greedy: true\n            },\n            'boolean': /\\b(?:on|off)\\b/,\n            'number': /\\b\\d+(?:\\.\\d+)?[kmg]?\\b/i,\n            'operator': /[=~]/,\n            'punctuation': /[{};\\[\\]]/\n        };\n    }\n    \n    defineEnvFiles() {\n        this.Prism.languages.env = {\n            'comment': /#.*/,\n            'variable': {\n                pattern: /^[A-Z_][A-Z0-9_]*(?=\\s*=)/m,\n                alias: 'property'\n            },\n            'value': {\n                pattern: /=.*/,\n                inside: {\n                    'string': {\n                        pattern: /"(?:[^"\\\\]|\\\\.)*"|'(?:[^'\\\\]|\\\\.)*'/,\n                        greedy: true\n                    },\n                    'variable': /\\$\\{?[A-Z_][A-Z0-9_]*\\}?/,\n                    'number': /\\b\\d+(?:\\.\\d+)?\\b/,\n                    'boolean': /\\b(?:true|false|yes|no|on|off)\\b/i\n                }\n            },\n            'operator': /=/\n        };\n        \n        this.Prism.languages.dotenv = this.Prism.languages.env;\n        this.Prism.languages.envfile = this.Prism.languages.env;\n    }\n    \n    defineLogFormats() {\n        this.Prism.languages.log = {\n            'timestamp': {\n                pattern: /^\\d{4}-\\d{2}-\\d{2}[T ]\\d{2}:\\d{2}:\\d{2}(?:\\.\\d{3})?(?:Z|[+-]\\d{2}:\\d{2})?|\\[?\\d{2}\\/\\w{3}\\/\\d{4}:\\d{2}:\\d{2}:\\d{2}(?: [+-]\\d{4})?\\]?/m,\n                alias: 'number'\n            },\n            'level': {\n                pattern: /\\b(?:TRACE|DEBUG|INFO|WARN|WARNING|ERROR|FATAL|CRITICAL|EMERGENCY|ALERT)\\b/i,\n                alias: 'keyword'\n            },\n            'ip': {\n                pattern: /\\b(?:\\d{1,3}\\.){3}\\d{1,3}\\b/,\n                alias: 'number'\n            },\n            'url': {\n                pattern: /https?:\\/\\/[^\\s]+/,\n                alias: 'string'\n            },\n            'status': {\n                pattern: /\\b[1-5]\\d{2}\\b/,\n                alias: 'number'\n            },\n            'string': {\n                pattern: /"(?:[^"\\\\]|\\\\.)*"/,\n                greedy: true\n            },\n            'uuid': {\n                pattern: /\\b[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}\\b/i,\n                alias: 'variable'\n            }\n        };\n    }\n    \n    defineConfigFormats() {\n        this.Prism.languages.ini = {\n            'comment': /^[;#].*/m,\n            'section': {\n                pattern: /^\\[[^\\]]*\\]/m,\n                alias: 'keyword'\n            },\n            'property': {\n                pattern: /^[^=\\r\\n]+(?=\\s*=)/m,\n                alias: 'attr-name'\n            },\n            'value': {\n                pattern: /=.*/,\n                inside: {\n                    'string': {\n                        pattern: /"(?:[^"\\\\]|\\\\.)*"/,\n                        greedy: true\n                    },\n                    'number': /\\b\\d+(?:\\.\\d+)?\\b/,\n                    'boolean': /\\b(?:true|false|yes|no|on|off)\\b/i\n                }\n            },\n            'operator': /=/\n        };\n        \n        this.Prism.languages.config = this.Prism.languages.ini;\n        this.Prism.languages.cfg = this.Prism.languages.ini;\n    }\n    \n    defineBashWithPrompt() {\n        this.Prism.languages['bash-prompt'] = this.Prism.util.clone(this.Prism.languages.bash);\n        \n        this.Prism.languages['bash-prompt']['prompt'] = {\n            pattern: /^[$#]\\s*/m,\n            alias: 'keyword'\n        };\n        \n        this.Prism.languages['bash-session'] = {\n            'command': {\n                pattern: /^[$#]\\s*[^\\r\\n]*$/m,\n                inside: {\n                    'prompt': {\n                        pattern: /^[$#]\\s*/,\n                        alias: 'keyword'\n                    },\n                    'bash': {\n                        pattern: /[\\s\\S]+/,\n                        alias: 'language-bash',\n                        inside: this.Prism.languages.bash\n                    }\n                }\n            },\n            'output': {\n                pattern: /^(?![$#]\\s)[^\\r\\n]*$/m,\n                alias: 'string'\n            }\n        };\n    }\n    \n    defineJSONWithComments() {\n        this.Prism.languages.jsonc = this.Prism.util.clone(this.Prism.languages.json);\n        \n        this.Prism.languages.jsonc.comment = {\n            pattern: /\\/\\/.*|\\/\\*[\\s\\S]*?\\*\\//,\n            greedy: true\n        };\n        \n        this.Prism.languages['json5'] = this.Prism.util.clone(this.Prism.languages.jsonc);\n        \n        // JSON5 additional features\n        this.Prism.languages.json5.property = {\n            pattern: /(?:[a-zA-Z_$][a-zA-Z0-9_$]*|'(?:[^'\\\\]|\\\\.)*'|"(?:[^"\\\\]|\\\\.)*")(?=\\s*:)/,\n            greedy: true,\n            alias: 'property'\n        };\n    }\n    \n    defineMarkdownWithMeta() {\n        this.Prism.languages['markdown-meta'] = this.Prism.util.clone(this.Prism.languages.markdown);\n        \n        this.Prism.languages['markdown-meta']['frontmatter'] = {\n            pattern: /^---[\\s\\S]*?---/,\n            inside: {\n                'punctuation': /^---|---$/m,\n                'yaml': {\n                    pattern: /[\\s\\S]+(?=\\r?\\n---$)/,\n                    alias: 'language-yaml',\n                    inside: this.Prism.languages.yaml\n                }\n            }\n        };\n        \n        // Enhanced code block highlighting\n        this.Prism.languages['markdown-meta']['code-block'] = {\n            pattern: /```\u003C/span>[\\s\\S]\u003Cspan class=\"hljs-emphasis\">*?```/,\n            inside: {\n                'code-info': {\n                    pattern: /```[a-z]*\u003C/span>(?:\\{[^}]\u003Cspan class=\"hljs-emphasis\">*\\})?/,\n                    alias: 'keyword'\n                },\n                'code': {\n                    pattern: /[\\s\\S]+?(?=```$)/,\n                    alias: 'language-markup'\n                },\n                'punctuation': /```/\n            }\n        };\n    }\n    \n    // Utility method to register all languages at once\n    registerAll() {\n        Object.keys(this).forEach(method => {\n            if (method.startsWith('define') && typeof this[method] === 'function') {\n                this[\u003Cspan class=\"hljs-string\">method\u003C/span>](\u003Cspan class=\"hljs-link\">\u003C/span>);\n            }\n        });\n    }\n}\n\n// Auto-register custom languages when Prism is available\ndocument.addEventListener('DOMContentLoaded', function() {\n    if (typeof Prism !== 'undefined') {\n        new CustomLanguageDefinitions(Prism);\n    }\n});\n```\n\n## Interactive Code Examples\n\n### Live Code Execution\n```html\n<!-- interactive-examples.html -->\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\">"interactive-code-example"\u003C/span> \u003Cspan class=\"hljs-attr\">data-language\u003C/span>=\u003Cspan class=\"hljs-string\">"javascript"\u003C/span>>\u003C/span>\u003C/span>\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\">"code-tabs"\u003C/span>>\u003C/span>\u003C/span>\n        \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">button\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"tab active"\u003C/span> \u003Cspan class=\"hljs-attr\">data-tab\u003C/span>=\u003Cspan class=\"hljs-string\">"code"\u003C/span>>\u003C/span>\u003C/span>Code\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">button\u003C/span>>\u003C/span>\u003C/span>\n        \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">button\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"tab"\u003C/span> \u003Cspan class=\"hljs-attr\">data-tab\u003C/span>=\u003Cspan class=\"hljs-string\">"result"\u003C/span>>\u003C/span>\u003C/span>Result\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">button\u003C/span>>\u003C/span>\u003C/span>\n        \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">button\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"tab"\u003C/span> \u003Cspan class=\"hljs-attr\">data-tab\u003C/span>=\u003Cspan class=\"hljs-string\">"console"\u003C/span>>\u003C/span>\u003C/span>Console\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">button\u003C/span>>\u003C/span>\u003C/span>\n    \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\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\">"tab-content"\u003C/span>>\u003C/span>\u003C/span>\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\">"tab-pane active"\u003C/span> \u003Cspan class=\"hljs-attr\">data-pane\u003C/span>=\u003Cspan class=\"hljs-string\">"code"\u003C/span>>\u003C/span>\u003C/span>\n            \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">textarea\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"code-editor"\u003C/span> \u003Cspan class=\"hljs-attr\">spellcheck\u003C/span>=\u003Cspan class=\"hljs-string\">"false"\u003C/span>>\u003C/span>\u003C/span>\n// Interactive JavaScript Example\nfunction fibonacci(n) {\n    if (n <= 1) return n;\n    return fibonacci(n - 1) + fibonacci(n - 2);\n}\n\n// Calculate first 10 Fibonacci numbers\nfor (let i = 0; i < 10; i++) {\n    console.log(`F(${i}) = ${fibonacci(i)}`);\n}\n\n// Display result in page\nconst result = fibonacci(8);\ndocument.body.innerHTML += `\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">h3\u003C/span>>\u003C/span>\u003C/span>F(8) = ${result}\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">h3\u003C/span>>\u003C/span>\u003C/span>`;\n            \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">textarea\u003C/span>>\u003C/span>\u003C/span>\n        \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\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\">"tab-pane"\u003C/span> \u003Cspan class=\"hljs-attr\">data-pane\u003C/span>=\u003Cspan class=\"hljs-string\">"result"\u003C/span>>\u003C/span>\u003C/span>\n            \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">iframe\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"result-frame"\u003C/span> \u003Cspan class=\"hljs-attr\">sandbox\u003C/span>=\u003Cspan class=\"hljs-string\">"allow-scripts"\u003C/span>>\u003C/span>\u003C/span>\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">iframe\u003C/span>>\u003C/span>\u003C/span>\n        \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\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\">"tab-pane"\u003C/span> \u003Cspan class=\"hljs-attr\">data-pane\u003C/span>=\u003Cspan class=\"hljs-string\">"console"\u003C/span>>\u003C/span>\u003C/span>\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\">"console-output"\u003C/span>>\u003C/span>\u003C/span>\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\u003C/span>\n        \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\u003C/span>\n    \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\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\">"code-controls"\u003C/span>>\u003C/span>\u003C/span>\n        \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">button\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"run-button"\u003C/span>>\u003C/span>\u003C/span>▶ Run Code\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">button\u003C/span>>\u003C/span>\u003C/span>\n        \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">button\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"reset-button"\u003C/span>>\u003C/span>\u003C/span>Reset\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">button\u003C/span>>\u003C/span>\u003C/span>\n        \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">button\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"share-button"\u003C/span>>\u003C/span>\u003C/span>Share\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">button\u003C/span>>\u003C/span>\u003C/span>\n    \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\u003C/span>\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\u003C/span>\n\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">script\u003C/span>>\u003C/span>\u003C/span>\nclass InteractiveCodeExample {\n    constructor(container) {\n        this.container = container;\n        this.language = container.dataset.language || 'javascript';\n        this.codeEditor = container.querySelector('.code-editor');\n        this.resultFrame = container.querySelector('.result-frame');\n        this.consoleOutput = container.querySelector('.console-output');\n        this.originalCode = this.codeEditor.value;\n        \n        this.initializeTabs();\n        this.initializeControls();\n        this.initializeEditor();\n        this.setupConsoleRedirect();\n    }\n    \n    initializeTabs() {\n        const tabs = this.container.querySelectorAll('.tab');\n        const panes = this.container.querySelectorAll('.tab-pane');\n        \n        tabs.forEach(tab => {\n            tab.addEventListener('click', () => {\n                const targetTab = tab.dataset.tab;\n                \n                // Update tab states\n                tabs.forEach(t => t.classList.remove('active'));\n                tab.classList.add('active');\n                \n                // Update pane visibility\n                panes.forEach(pane => {\n                    if (pane.dataset.pane === targetTab) {\n                        pane.classList.add('active');\n                    } else {\n                        pane.classList.remove('active');\n                    }\n                });\n            });\n        });\n    }\n    \n    initializeControls() {\n        const runButton = this.container.querySelector('.run-button');\n        const resetButton = this.container.querySelector('.reset-button');\n        const shareButton = this.container.querySelector('.share-button');\n        \n        runButton.addEventListener('click', () => this.runCode());\n        resetButton.addEventListener('click', () => this.resetCode());\n        shareButton.addEventListener('click', () => this.shareCode());\n        \n        // Auto-run on code change (debounced)\n        let autoRunTimeout;\n        this.codeEditor.addEventListener('input', () => {\n            clearTimeout(autoRunTimeout);\n            autoRunTimeout = setTimeout(() => {\n                this.runCode();\n            }, 1000);\n        });\n    }\n    \n    initializeEditor() {\n        // Add syntax highlighting to textarea\n        this.codeEditor.addEventListener('input', () => {\n            this.updateSyntaxHighlighting();\n        });\n        \n        // Add keyboard shortcuts\n        this.codeEditor.addEventListener('keydown', (e) => {\n            if (e.ctrlKey || e.metaKey) {\n                switch (e.key) {\n                    case 'Enter':\n                        e.preventDefault();\n                        this.runCode();\n                        break;\n                    case 'r':\n                        e.preventDefault();\n                        this.resetCode();\n                        break;\n                }\n            }\n            \n            // Handle tab indentation\n            if (e.key === 'Tab') {\n                e.preventDefault();\n                const start = this.codeEditor.selectionStart;\n                const end = this.codeEditor.selectionEnd;\n                const value = this.codeEditor.value;\n                \n                this.codeEditor.value = value.substring(0, start) + '    ' + value.substring(end);\n                this.codeEditor.selectionStart = this.codeEditor.selectionEnd = start + 4;\n            }\n        });\n        \n        // Initial syntax highlighting\n        this.updateSyntaxHighlighting();\n    }\n    \n    updateSyntaxHighlighting() {\n        if (typeof Prism !== 'undefined' && Prism.languages[this.language]) {\n            const code = this.codeEditor.value;\n            const highlighted = Prism.highlight(code, Prism.languages[this.language], this.language);\n            \n            // Update background highlighting (would need additional implementation)\n            this.updateEditorBackground(highlighted);\n        }\n    }\n    \n    setupConsoleRedirect() {\n        // Create console proxy for capturing output\n        this.consoleLogs = [];\n        \n        const originalLog = console.log;\n        const originalError = console.error;\n        const originalWarn = console.warn;\n        \n        window.interceptConsole = (method, ...args) => {\n            this.consoleLogs.push({\n                method: method,\n                args: args,\n                timestamp: new Date()\n            });\n            \n            this.updateConsoleDisplay();\n            \n            // Call original method\n            if (method === 'log') originalLog(...args);\n            else if (method === 'error') originalError(...args);\n            else if (method === 'warn') originalWarn(...args);\n        };\n    }\n    \n    runCode() {\n        try {\n            this.clearConsole();\n            this.clearResult();\n            \n            if (this.language === 'javascript') {\n                this.runJavaScript();\n            } else if (this.language === 'html') {\n                this.runHTML();\n            } else if (this.language === 'css') {\n                this.runCSS();\n            }\n            \n        } catch (error) {\n            this.showError(error);\n        }\n    }\n    \n    runJavaScript() {\n        const code = this.codeEditor.value;\n        \n        // Create sandbox environment\n        const sandboxCode = `\n            (function() {\n                const console = {\n                    log: (...args) => parent.interceptConsole('log', ...args),\n                    error: (...args) => parent.interceptConsole('error', ...args),\n                    warn: (...args) => parent.interceptConsole('warn', ...args)\n                };\n                \n                try {\n                    ${code}\n                } catch (error) {\n                    console.error(error.message);\n                }\n            })();\n        `;\n        \n        // Execute in iframe\n        const frameDoc = this.resultFrame.contentDocument || this.resultFrame.contentWindow.document;\n        frameDoc.open();\n        frameDoc.write(`\n            \u003Cspan class=\"language-xml\">\u003Cspan class=\"language-handlebars\">\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">html\u003C/span>>\u003C/span>\u003C/span>\u003C/span>\u003C/span>\n                \u003Cspan class=\"language-xml\">\u003Cspan class=\"language-handlebars\">\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">head\u003C/span>>\u003C/span>\u003C/span>\u003C/span>\u003C/span>\n                    \u003Cspan class=\"language-xml\">\u003Cspan class=\"language-handlebars\">\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">style\u003C/span>>\u003C/span>\u003C/span>\u003C/span>\u003C/span>\n                        body { \n                            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n                            margin: 16px;\n                            line-height: 1.6;\n                        }\n                        h1, h2, h3 { margin-top: 0; }\n                    \u003Cspan class=\"language-xml\">\u003Cspan class=\"language-handlebars\">\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">style\u003C/span>>\u003C/span>\u003C/span>\u003C/span>\u003C/span>\n                \u003Cspan class=\"language-xml\">\u003Cspan class=\"language-handlebars\">\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">head\u003C/span>>\u003C/span>\u003C/span>\u003C/span>\u003C/span>\n                \u003Cspan class=\"language-xml\">\u003Cspan class=\"language-handlebars\">\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">body\u003C/span>>\u003C/span>\u003C/span>\u003C/span>\u003C/span>\n                    \u003Cspan class=\"language-xml\">\u003Cspan class=\"language-handlebars\">\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">script\u003C/span>>\u003C/span>\u003C/span>\u003C/span>\u003C/span>${sandboxCode}\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">script\u003C/span>>\u003C/span>\u003C/span>\n                \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">body\u003C/span>>\u003C/span>\u003C/span>\n            \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">html\u003C/span>>\u003C/span>\u003C/span>\n        `);\n        frameDoc.close();\n    }\n    \n    runHTML() {\n        const code = this.codeEditor.value;\n        \n        const frameDoc = this.resultFrame.contentDocument || this.resultFrame.contentWindow.document;\n        frameDoc.open();\n        frameDoc.write(code);\n        frameDoc.close();\n    }\n    \n    runCSS() {\n        const code = this.codeEditor.value;\n        \n        const frameDoc = this.resultFrame.contentDocument || this.resultFrame.contentWindow.document;\n        frameDoc.open();\n        frameDoc.write(`\n            \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">html\u003C/span>>\u003C/span>\u003C/span>\n                \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">head\u003C/span>>\u003C/span>\u003C/span>\n                    \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">style\u003C/span>>\u003C/span>\u003C/span>${code}\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">style\u003C/span>>\u003C/span>\u003C/span>\n                \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">head\u003C/span>>\u003C/span>\u003C/span>\n                \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">body\u003C/span>>\u003C/span>\u003C/span>\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\">"demo-content"\u003C/span>>\u003C/span>\u003C/span>\n                        \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">h1\u003C/span>>\u003C/span>\u003C/span>CSS Demo\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">h1\u003C/span>>\u003C/span>\u003C/span>\n                        \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">p\u003C/span>>\u003C/span>\u003C/span>This is a paragraph to demonstrate your CSS.\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">p\u003C/span>>\u003C/span>\u003C/span>\n                        \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">button\u003C/span>>\u003C/span>\u003C/span>Sample Button\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">button\u003C/span>>\u003C/span>\u003C/span>\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\">"box"\u003C/span>>\u003C/span>\u003C/span>Sample Box\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\u003C/span>\n                    \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\u003C/span>\n                \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">body\u003C/span>>\u003C/span>\u003C/span>\n            \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">html\u003C/span>>\u003C/span>\u003C/span>\n        `);\n        frameDoc.close();\n    }\n    \n    clearConsole() {\n        this.consoleLogs = [];\n        this.updateConsoleDisplay();\n    }\n    \n    clearResult() {\n        const frameDoc = this.resultFrame.contentDocument || this.resultFrame.contentWindow.document;\n        frameDoc.open();\n        frameDoc.write('\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">html\u003C/span>>\u003C/span>\u003C/span>\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">body\u003C/span>>\u003C/span>\u003C/span>\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">body\u003C/span>>\u003C/span>\u003C/span>\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">html\u003C/span>>\u003C/span>\u003C/span>');\n        frameDoc.close();\n    }\n    \n    updateConsoleDisplay() {\n        this.consoleOutput.innerHTML = '';\n        \n        this.consoleLogs.forEach(log => {\n            const logElement = document.createElement('div');\n            logElement.className = `console-${log.method}`;\n            \n            const timestamp = document.createElement('span');\n            timestamp.className = 'console-timestamp';\n            timestamp.textContent = log.timestamp.toLocaleTimeString();\n            \n            const message = document.createElement('span');\n            message.className = 'console-message';\n            message.textContent = log.args.join(' ');\n            \n            logElement.appendChild(timestamp);\n            logElement.appendChild(message);\n            this.consoleOutput.appendChild(logElement);\n        });\n        \n        // Auto-scroll to bottom\n        this.consoleOutput.scrollTop = this.consoleOutput.scrollHeight;\n    }\n    \n    showError(error) {\n        this.consoleLogs.push({\n            method: 'error',\n            args: [error.message],\n            timestamp: new Date()\n        });\n        this.updateConsoleDisplay();\n    }\n    \n    resetCode() {\n        this.codeEditor.value = this.originalCode;\n        this.clearConsole();\n        this.clearResult();\n        this.updateSyntaxHighlighting();\n    }\n    \n    shareCode() {\n        const code = this.codeEditor.value;\n        const shareData = {\n            language: this.language,\n            code: code\n        };\n        \n        // Create shareable URL\n        const shareUrl = this.createShareUrl(shareData);\n        \n        if (navigator.share) {\n            navigator.share({\n                title: 'Code Example',\n                text: 'Check out this code example',\n                url: shareUrl\n            });\n        } else {\n            // Fallback: copy to clipboard\n            navigator.clipboard.writeText(shareUrl).then(() => {\n                this.showShareFeedback();\n            });\n        }\n    }\n    \n    createShareUrl(data) {\n        const encoded = btoa(JSON.stringify(data));\n        return `${window.location.origin}${window.location.pathname}?code=${encoded}`;\n    }\n    \n    showShareFeedback() {\n        const feedback = document.createElement('div');\n        feedback.className = 'share-feedback';\n        feedback.textContent = 'Share URL copied to clipboard!';\n        \n        this.container.appendChild(feedback);\n        \n        setTimeout(() => {\n            feedback.classList.add('show');\n        }, 10);\n        \n        setTimeout(() => {\n            feedback.classList.remove('show');\n            setTimeout(() => {\n                this.container.removeChild(feedback);\n            }, 300);\n        }, 2000);\n    }\n}\n\n// CSS for interactive examples\nconst interactiveExampleStyles = `\n.interactive-code-example {\n    margin: 2rem 0;\n    border: 1px solid #e1e4e8;\n    border-radius: 8px;\n    background: #ffffff;\n    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n    box-shadow: 0 2px 8px rgba(0,0,0,0.1);\n}\n\n.code-tabs {\n    display: flex;\n    background: #f6f8fa;\n    border-bottom: 1px solid #e1e4e8;\n    border-radius: 8px 8px 0 0;\n    overflow: hidden;\n}\n\n.code-tabs .tab {\n    background: none;\n    border: none;\n    padding: 12px 20px;\n    cursor: pointer;\n    font-size: 14px;\n    font-weight: 500;\n    color: #586069;\n    border-bottom: 3px solid transparent;\n    transition: all 0.2s ease;\n}\n\n.code-tabs .tab:hover {\n    background: #e1e4e8;\n    color: #24292e;\n}\n\n.code-tabs .tab.active {\n    background: #ffffff;\n    color: #24292e;\n    border-bottom-color: #007bff;\n}\n\n.tab-content {\n    position: relative;\n    min-height: 300px;\n}\n\n.tab-pane {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    display: none;\n    padding: 16px;\n}\n\n.tab-pane.active {\n    display: block;\n}\n\n.code-editor {\n    width: 100%;\n    height: 100%;\n    min-height: 250px;\n    border: none;\n    outline: none;\n    resize: vertical;\n    font-family: 'Fira Code', 'Consolas', 'Monaco', monospace;\n    font-size: 14px;\n    line-height: 1.5;\n    tab-size: 4;\n    background: transparent;\n    color: inherit;\n}\n\n.result-frame {\n    width: 100%;\n    height: 250px;\n    border: 1px solid #e1e4e8;\n    border-radius: 4px;\n    background: white;\n}\n\n.console-output {\n    height: 250px;\n    overflow-y: auto;\n    border: 1px solid #e1e4e8;\n    border-radius: 4px;\n    background: #1e1e1e;\n    color: #d4d4d4;\n    font-family: 'Fira Code', 'Consolas', monospace;\n    font-size: 13px;\n    padding: 8px;\n}\n\n.console-output div {\n    margin: 2px 0;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.console-timestamp {\n    color: #858585;\n    font-size: 11px;\n    min-width: 80px;\n}\n\n.console-log {\n    color: #d4d4d4;\n}\n\n.console-error {\n    color: #f48771;\n}\n\n.console-warn {\n    color: #dcdcaa;\n}\n\n.code-controls {\n    display: flex;\n    gap: 8px;\n    padding: 12px 16px;\n    background: #f6f8fa;\n    border-top: 1px solid #e1e4e8;\n    border-radius: 0 0 8px 8px;\n}\n\n.code-controls button {\n    padding: 8px 16px;\n    border: 1px solid #e1e4e8;\n    border-radius: 4px;\n    background: white;\n    color: #24292e;\n    font-size: 14px;\n    font-weight: 500;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.code-controls button:hover {\n    background: #f3f4f6;\n    border-color: #d0d7de;\n}\n\n.run-button {\n    background: #2ea043 !important;\n    color: white !important;\n    border-color: #2ea043 !important;\n}\n\n.run-button:hover {\n    background: #2c974b !important;\n}\n\n.share-feedback {\n    position: absolute;\n    top: 8px;\n    right: 8px;\n    background: #28a745;\n    color: white;\n    padding: 8px 12px;\n    border-radius: 4px;\n    font-size: 12px;\n    opacity: 0;\n    transform: translateY(-10px);\n    transition: all 0.3s ease;\n    z-index: 1000;\n}\n\n.share-feedback.show {\n    opacity: 1;\n    transform: translateY(0);\n}\n\n@media (max-width: 768px) {\n    .code-tabs {\n        flex-wrap: wrap;\n    }\n    \n    .code-tabs .tab {\n        flex: 1;\n        min-width: 0;\n        padding: 10px 12px;\n        font-size: 13px;\n    }\n    \n    .tab-pane {\n        padding: 12px;\n    }\n    \n    .code-editor {\n        font-size: 13px;\n    }\n    \n    .code-controls {\n        flex-wrap: wrap;\n        gap: 6px;\n        padding: 10px 12px;\n    }\n    \n    .code-controls button {\n        flex: 1;\n        min-width: 0;\n        font-size: 13px;\n        padding: 8px 12px;\n    }\n}\n`;\n\n// Inject styles\nconst style = document.createElement('style');\nstyle.textContent = interactiveExampleStyles;\ndocument.head.appendChild(style);\n\n// Initialize all interactive examples\ndocument.addEventListener('DOMContentLoaded', function() {\n    const examples = document.querySelectorAll('.interactive-code-example');\n    examples.forEach(example => {\n        new InteractiveCodeExample(example);\n    });\n});\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">script\u003C/span>>\u003C/span>\u003C/span>\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch2 id=\"integration-with-documentation-systems\">Integration with Documentation Systems\u003C/h2>\n\u003Cp>Advanced syntax highlighting integrates seamlessly with modern documentation workflows. When combined with \u003Ca href=\"/blog/markdown-table-data-validation-and-quality-assurance-complete-guide\">table data validation systems\u003C/a>, code highlighting ensures technical accuracy while maintaining visual consistency across complex documentation that includes both tabular data and code examples.\u003C/p>\n\u003Cp>For comprehensive technical writing, syntax highlighting works effectively with \u003Ca href=\"/blog/markdown-accessibility-complete-guide\">accessibility compliance systems\u003C/a> to ensure code examples remain readable for users with visual impairments while supporting screen readers and assistive technologies through proper semantic markup and high-contrast themes.\u003C/p>\n\u003Cp>When building sophisticated documentation platforms, syntax highlighting complements \u003Ca href=\"/blog/markdown-table-data-filtering-search-complete-guide\">content filtering and search capabilities\u003C/a> by enabling searchable code indices, syntax-aware filtering, and intelligent code discovery that helps users find relevant programming examples across large technical documentation repositories.\u003C/p>\n\u003Ch2 id=\"performance-optimization-and-best-practices\">Performance Optimization and Best Practices\u003C/h2>\n\u003Ch3 id=\"lazy-loading-implementation\">Lazy Loading Implementation\u003C/h3>\n\u003Cpre>\u003Ccode class=\"hljs language-javascript\">\u003Cspan class=\"hljs-comment\">// lazy-syntax-highlighting.js - Performance-optimized code highlighting\u003C/span>\n\u003Cspan class=\"hljs-keyword\">class\u003C/span> \u003Cspan class=\"hljs-title class_\">LazySyntaxHighlighter\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\">threshold\u003C/span>: \u003Cspan class=\"hljs-number\">0.1\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">rootMargin\u003C/span>: \u003Cspan class=\"hljs-string\">'50px'\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">enableVirtualization\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">chunkSize\u003C/span>: \u003Cspan class=\"hljs-number\">50\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">enableWorker\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\">observer\u003C/span> = \u003Cspan class=\"hljs-literal\">null\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">highlightQueue\u003C/span> = [];\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">isProcessing\u003C/span> = \u003Cspan class=\"hljs-literal\">false\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">worker\u003C/span> = \u003Cspan class=\"hljs-literal\">null\u003C/span>;\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">init\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">init\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">setupIntersectionObserver\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">setupWorker\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">observeCodeBlocks\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">bindEvents\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">setupIntersectionObserver\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-string\">'IntersectionObserver'\u003C/span> \u003Cspan class=\"hljs-keyword\">in\u003C/span> \u003Cspan class=\"hljs-variable language_\">window\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">observer\u003C/span> = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">IntersectionObserver\u003C/span>(\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">handleIntersection\u003C/span>.\u003Cspan class=\"hljs-title function_\">bind\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>),\n                {\n                    \u003Cspan class=\"hljs-attr\">threshold\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">threshold\u003C/span>,\n                    \u003Cspan class=\"hljs-attr\">rootMargin\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">rootMargin\u003C/span>\n                }\n            );\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">setupWorker\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">enableWorker\u003C/span> && \u003Cspan class=\"hljs-string\">'Worker'\u003C/span> \u003Cspan class=\"hljs-keyword\">in\u003C/span> \u003Cspan class=\"hljs-variable language_\">window\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> workerScript = \u003Cspan class=\"hljs-string\">`\n                importScripts('https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-core.min.js');\n                \n                const languages = new Map();\n                \n                self.addEventListener('message', async function(e) {\n                    const { id, code, language, action } = e.data;\n                    \n                    if (action === 'highlight') {\n                        try {\n                            if (!languages.has(language)) {\n                                await loadLanguage(language);\n                            }\n                            \n                            const highlighted = Prism.highlight(code, Prism.languages[language], language);\n                            \n                            self.postMessage({\n                                id: id,\n                                highlighted: highlighted,\n                                success: true\n                            });\n                        } catch (error) {\n                            self.postMessage({\n                                id: id,\n                                error: error.message,\n                                success: false\n                            });\n                        }\n                    }\n                });\n                \n                async function loadLanguage(language) {\n                    if (languages.has(language)) return;\n                    \n                    try {\n                        importScripts(\\`https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-\\${language}.min.js\\`);\n                        languages.set(language, true);\n                    } catch (error) {\n                        console.warn('Failed to load language:', language);\n                    }\n                }\n            `\u003C/span>;\n            \n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> blob = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Blob\u003C/span>([workerScript], { \u003Cspan class=\"hljs-attr\">type\u003C/span>: \u003Cspan class=\"hljs-string\">'application/javascript'\u003C/span> });\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">worker\u003C/span> = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Worker\u003C/span>(\u003Cspan class=\"hljs-variable constant_\">URL\u003C/span>.\u003Cspan class=\"hljs-title function_\">createObjectURL\u003C/span>(blob));\n            \n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">worker\u003C/span>.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'message'\u003C/span>, \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">e\u003C/span>) =>\u003C/span> {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">handleWorkerMessage\u003C/span>(e.\u003Cspan class=\"hljs-property\">data\u003C/span>);\n            });\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">observeCodeBlocks\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> codeBlocks = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'pre[class*="language-"], code[class*="language-"]'\u003C/span>);\n        \n        codeBlocks.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">block\u003C/span> =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">observer\u003C/span>) {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">observer\u003C/span>.\u003Cspan class=\"hljs-title function_\">observe\u003C/span>(block);\n            } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n                \u003Cspan class=\"hljs-comment\">// Fallback for browsers without IntersectionObserver\u003C/span>\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">highlightBlock\u003C/span>(block);\n            }\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">handleIntersection\u003C/span>(\u003Cspan class=\"hljs-params\">entries\u003C/span>) {\n        entries.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">entry\u003C/span> =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (entry.\u003Cspan class=\"hljs-property\">isIntersecting\u003C/span>) {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">highlightBlock\u003C/span>(entry.\u003Cspan class=\"hljs-property\">target\u003C/span>);\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">observer\u003C/span>.\u003Cspan class=\"hljs-title function_\">unobserve\u003C/span>(entry.\u003Cspan class=\"hljs-property\">target\u003C/span>);\n            }\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">highlightBlock\u003C/span>(\u003Cspan class=\"hljs-params\">block\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (block.\u003Cspan class=\"hljs-property\">dataset\u003C/span>.\u003Cspan class=\"hljs-property\">highlighted\u003C/span> === \u003Cspan class=\"hljs-string\">'true'\u003C/span>) \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> code = block.\u003Cspan class=\"hljs-property\">textContent\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> language = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">extractLanguage\u003C/span>(block);\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\">enableVirtualization\u003C/span> && code.\u003Cspan class=\"hljs-property\">length\u003C/span> > \u003Cspan class=\"hljs-number\">5000\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">highlightLargeBlock\u003C/span>(block, code, language);\n        } \u003Cspan class=\"hljs-keyword\">else\u003C/span> \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">worker\u003C/span> && code.\u003Cspan class=\"hljs-property\">length\u003C/span> > \u003Cspan class=\"hljs-number\">1000\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">highlightWithWorker\u003C/span>(block, code, language);\n        } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">highlightSynchronously\u003C/span>(block, code, language);\n        }\n        \n        block.\u003Cspan class=\"hljs-property\">dataset\u003C/span>.\u003Cspan class=\"hljs-property\">highlighted\u003C/span> = \u003Cspan class=\"hljs-string\">'true'\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">highlightSynchronously\u003C/span>(\u003Cspan class=\"hljs-params\">block, code, language\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-keyword\">typeof\u003C/span> \u003Cspan class=\"hljs-title class_\">Prism\u003C/span> !== \u003Cspan class=\"hljs-string\">'undefined'\u003C/span> && \u003Cspan class=\"hljs-title class_\">Prism\u003C/span>.\u003Cspan class=\"hljs-property\">languages\u003C/span>[language]) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> highlighted = \u003Cspan class=\"hljs-title class_\">Prism\u003C/span>.\u003Cspan class=\"hljs-title function_\">highlight\u003C/span>(code, \u003Cspan class=\"hljs-title class_\">Prism\u003C/span>.\u003Cspan class=\"hljs-property\">languages\u003C/span>[language], language);\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">applyHighlighting\u003C/span>(block, highlighted);\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">highlightWithWorker\u003C/span>(\u003Cspan class=\"hljs-params\">block, code, language\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">worker\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">highlightSynchronously\u003C/span>(block, code, language);\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> id = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">generateId\u003C/span>();\n        block.\u003Cspan class=\"hljs-property\">dataset\u003C/span>.\u003Cspan class=\"hljs-property\">highlightId\u003C/span> = id;\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">worker\u003C/span>.\u003Cspan class=\"hljs-title function_\">postMessage\u003C/span>({\n            \u003Cspan class=\"hljs-attr\">id\u003C/span>: id,\n            \u003Cspan class=\"hljs-attr\">code\u003C/span>: code,\n            \u003Cspan class=\"hljs-attr\">language\u003C/span>: language,\n            \u003Cspan class=\"hljs-attr\">action\u003C/span>: \u003Cspan class=\"hljs-string\">'highlight'\u003C/span>\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">highlightLargeBlock\u003C/span>(\u003Cspan class=\"hljs-params\">block, code, language\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Implement virtual scrolling for very large code blocks\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> lines = code.\u003Cspan class=\"hljs-title function_\">split\u003C/span>(\u003Cspan class=\"hljs-string\">'\\n'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> visibleLines = \u003Cspan class=\"hljs-number\">100\u003C/span>; \u003Cspan class=\"hljs-comment\">// Show first 100 lines initially\u003C/span>\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (lines.\u003Cspan class=\"hljs-property\">length\u003C/span> <= visibleLines) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">highlightSynchronously\u003C/span>(block, code, language);\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Create virtual scrolling container\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> container = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">createVirtualContainer\u003C/span>(block);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> visibleCode = lines.\u003Cspan class=\"hljs-title function_\">slice\u003C/span>(\u003Cspan class=\"hljs-number\">0\u003C/span>, visibleLines).\u003Cspan class=\"hljs-title function_\">join\u003C/span>(\u003Cspan class=\"hljs-string\">'\\n'\u003C/span>);\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-keyword\">typeof\u003C/span> \u003Cspan class=\"hljs-title class_\">Prism\u003C/span> !== \u003Cspan class=\"hljs-string\">'undefined'\u003C/span> && \u003Cspan class=\"hljs-title class_\">Prism\u003C/span>.\u003Cspan class=\"hljs-property\">languages\u003C/span>[language]) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> highlighted = \u003Cspan class=\"hljs-title class_\">Prism\u003C/span>.\u003Cspan class=\"hljs-title function_\">highlight\u003C/span>(visibleCode, \u003Cspan class=\"hljs-title class_\">Prism\u003C/span>.\u003Cspan class=\"hljs-property\">languages\u003C/span>[language], language);\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">applyHighlighting\u003C/span>(container.\u003Cspan class=\"hljs-property\">codeElement\u003C/span>, highlighted);\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Add load more functionality\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">setupLazyLoading\u003C/span>(container, lines, language, visibleLines);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">createVirtualContainer\u003C/span>(\u003Cspan class=\"hljs-params\">originalBlock\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> container = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n        container.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'virtual-code-container'\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> codeElement = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'code'\u003C/span>);\n        codeElement.\u003Cspan class=\"hljs-property\">className\u003C/span> = originalBlock.\u003Cspan class=\"hljs-property\">className\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> loadMoreButton = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'button'\u003C/span>);\n        loadMoreButton.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = \u003Cspan class=\"hljs-string\">'Load More Lines'\u003C/span>;\n        loadMoreButton.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'load-more-code'\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> pre = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'pre'\u003C/span>);\n        pre.\u003Cspan class=\"hljs-property\">className\u003C/span> = originalBlock.\u003Cspan class=\"hljs-property\">className\u003C/span>;\n        pre.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(codeElement);\n        \n        container.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(pre);\n        container.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(loadMoreButton);\n        \n        originalBlock.\u003Cspan class=\"hljs-property\">parentNode\u003C/span>.\u003Cspan class=\"hljs-title function_\">replaceChild\u003C/span>(container, originalBlock);\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> {\n            \u003Cspan class=\"hljs-attr\">container\u003C/span>: container,\n            \u003Cspan class=\"hljs-attr\">codeElement\u003C/span>: codeElement,\n            \u003Cspan class=\"hljs-attr\">loadMoreButton\u003C/span>: loadMoreButton,\n            \u003Cspan class=\"hljs-attr\">pre\u003C/span>: pre\n        };\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">setupLazyLoading\u003C/span>(\u003Cspan class=\"hljs-params\">virtualContainer, allLines, language, currentlyVisible\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> { loadMoreButton, codeElement } = virtualContainer;\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> visibleCount = currentlyVisible;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> loadIncrement = \u003Cspan class=\"hljs-number\">50\u003C/span>;\n        \n        loadMoreButton.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'click'\u003C/span>, \u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> nextBatch = allLines.\u003Cspan class=\"hljs-title function_\">slice\u003C/span>(visibleCount, visibleCount + loadIncrement);\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (nextBatch.\u003Cspan class=\"hljs-property\">length\u003C/span> > \u003Cspan class=\"hljs-number\">0\u003C/span>) {\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> batchCode = nextBatch.\u003Cspan class=\"hljs-title function_\">join\u003C/span>(\u003Cspan class=\"hljs-string\">'\\n'\u003C/span>);\n                \n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-keyword\">typeof\u003C/span> \u003Cspan class=\"hljs-title class_\">Prism\u003C/span> !== \u003Cspan class=\"hljs-string\">'undefined'\u003C/span> && \u003Cspan class=\"hljs-title class_\">Prism\u003C/span>.\u003Cspan class=\"hljs-property\">languages\u003C/span>[language]) {\n                    \u003Cspan class=\"hljs-keyword\">const\u003C/span> highlighted = \u003Cspan class=\"hljs-title class_\">Prism\u003C/span>.\u003Cspan class=\"hljs-title function_\">highlight\u003C/span>(batchCode, \u003Cspan class=\"hljs-title class_\">Prism\u003C/span>.\u003Cspan class=\"hljs-property\">languages\u003C/span>[language], language);\n                    \n                    \u003Cspan class=\"hljs-comment\">// Append highlighted code\u003C/span>\n                    \u003Cspan class=\"hljs-keyword\">const\u003C/span> span = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'span'\u003C/span>);\n                    span.\u003Cspan class=\"hljs-property\">innerHTML\u003C/span> = \u003Cspan class=\"hljs-string\">'\\n'\u003C/span> + highlighted;\n                    codeElement.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(span);\n                }\n                \n                visibleCount += loadIncrement;\n                \n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (visibleCount >= allLines.\u003Cspan class=\"hljs-property\">length\u003C/span>) {\n                    loadMoreButton.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">display\u003C/span> = \u003Cspan class=\"hljs-string\">'none'\u003C/span>;\n                } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n                    loadMoreButton.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = \u003Cspan class=\"hljs-string\">`Load More Lines (\u003Cspan class=\"hljs-subst\">${allLines.length - visibleCount}\u003C/span> remaining)`\u003C/span>;\n                }\n            }\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// Initially hide button if all lines are visible\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (visibleCount >= allLines.\u003Cspan class=\"hljs-property\">length\u003C/span>) {\n            loadMoreButton.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">display\u003C/span> = \u003Cspan class=\"hljs-string\">'none'\u003C/span>;\n        } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n            loadMoreButton.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = \u003Cspan class=\"hljs-string\">`Load More Lines (\u003Cspan class=\"hljs-subst\">${allLines.length - visibleCount}\u003C/span> remaining)`\u003C/span>;\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">handleWorkerMessage\u003C/span>(\u003Cspan class=\"hljs-params\">data\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> { id, highlighted, success, error } = data;\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (success) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> block = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">`[data-highlight-id="\u003Cspan class=\"hljs-subst\">${id}\u003C/span>"]`\u003C/span>);\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (block) {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">applyHighlighting\u003C/span>(block, highlighted);\n            }\n        } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n            \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">warn\u003C/span>(\u003Cspan class=\"hljs-string\">'Worker highlighting failed:'\u003C/span>, error);\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">applyHighlighting\u003C/span>(\u003Cspan class=\"hljs-params\">element, highlighted\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Use requestIdleCallback for better performance\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-string\">'requestIdleCallback'\u003C/span> \u003Cspan class=\"hljs-keyword\">in\u003C/span> \u003Cspan class=\"hljs-variable language_\">window\u003C/span>) {\n            \u003Cspan class=\"hljs-title function_\">requestIdleCallback\u003C/span>(\u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n                element.\u003Cspan class=\"hljs-property\">innerHTML\u003C/span> = highlighted;\n            });\n        } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n            \u003Cspan class=\"hljs-comment\">// Fallback for browsers without requestIdleCallback\u003C/span>\n            \u003Cspan class=\"hljs-built_in\">setTimeout\u003C/span>(\u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n                element.\u003Cspan class=\"hljs-property\">innerHTML\u003C/span> = highlighted;\n            }, \u003Cspan class=\"hljs-number\">0\u003C/span>);\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">extractLanguage\u003C/span>(\u003Cspan class=\"hljs-params\">element\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> className = element.\u003Cspan class=\"hljs-property\">className\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> match = className.\u003Cspan class=\"hljs-title function_\">match\u003C/span>(\u003Cspan class=\"hljs-regexp\">/language-([a-zA-Z0-9-]+)/\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> match ? match[\u003Cspan class=\"hljs-number\">1\u003C/span>] : \u003Cspan class=\"hljs-string\">'markup'\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">generateId\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">random\u003C/span>().\u003Cspan class=\"hljs-title function_\">toString\u003C/span>(\u003Cspan class=\"hljs-number\">36\u003C/span>).\u003Cspan class=\"hljs-title function_\">substring\u003C/span>(\u003Cspan class=\"hljs-number\">2\u003C/span>, \u003Cspan class=\"hljs-number\">15\u003C/span>);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">bindEvents\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Handle dynamically added code blocks\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> observer = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">MutationObserver\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">mutations\u003C/span>) =>\u003C/span> {\n            mutations.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">mutation\u003C/span> =>\u003C/span> {\n                mutation.\u003Cspan class=\"hljs-property\">addedNodes\u003C/span>.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">node\u003C/span> =>\u003C/span> {\n                    \u003Cspan class=\"hljs-keyword\">if\u003C/span> (node.\u003Cspan class=\"hljs-property\">nodeType\u003C/span> === \u003Cspan class=\"hljs-number\">1\u003C/span>) {\n                        \u003Cspan class=\"hljs-keyword\">const\u003C/span> codeBlocks = node.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'pre[class*="language-"], code[class*="language-"]'\u003C/span>);\n                        codeBlocks.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">block\u003C/span> =>\u003C/span> {\n                            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">observer\u003C/span>) {\n                                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">observer\u003C/span>.\u003Cspan class=\"hljs-title function_\">observe\u003C/span>(block);\n                            } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n                                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">highlightBlock\u003C/span>(block);\n                            }\n                        });\n                    }\n                });\n            });\n        });\n        \n        observer.\u003Cspan class=\"hljs-title function_\">observe\u003C/span>(\u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-property\">body\u003C/span>, {\n            \u003Cspan class=\"hljs-attr\">childList\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">subtree\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>\n        });\n    }\n    \n    \u003Cspan class=\"hljs-comment\">// Performance monitoring\u003C/span>\n    \u003Cspan class=\"hljs-title function_\">measurePerformance\u003C/span>(\u003Cspan class=\"hljs-params\">operation, callback\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> start = performance.\u003Cspan class=\"hljs-title function_\">now\u003C/span>();\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> result = \u003Cspan class=\"hljs-title function_\">callback\u003C/span>();\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> end = performance.\u003Cspan class=\"hljs-title function_\">now\u003C/span>();\n        \n        \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">log\u003C/span>(\u003Cspan class=\"hljs-string\">`\u003Cspan class=\"hljs-subst\">${operation}\u003C/span>: \u003Cspan class=\"hljs-subst\">${(end - start).toFixed(\u003Cspan class=\"hljs-number\">2\u003C/span>)}\u003C/span>ms`\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> result;\n    }\n    \n    \u003Cspan class=\"hljs-comment\">// Cleanup\u003C/span>\n    \u003Cspan class=\"hljs-title function_\">destroy\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">observer\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">observer\u003C/span>.\u003Cspan class=\"hljs-title function_\">disconnect\u003C/span>();\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">worker\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">worker\u003C/span>.\u003Cspan class=\"hljs-title function_\">terminate\u003C/span>();\n        }\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">// Performance monitoring styles\u003C/span>\n\u003Cspan class=\"hljs-keyword\">const\u003C/span> performanceStyles = \u003Cspan class=\"hljs-string\">`\n.virtual-code-container {\n    position: relative;\n    max-height: 500px;\n    overflow: hidden;\n    border: 1px solid #e1e4e8;\n    border-radius: 6px;\n}\n\n.load-more-code {\n    width: 100%;\n    padding: 12px;\n    background: #f6f8fa;\n    border: none;\n    border-top: 1px solid #e1e4e8;\n    color: #24292e;\n    cursor: pointer;\n    font-size: 14px;\n    font-weight: 500;\n    transition: background-color 0.2s ease;\n}\n\n.load-more-code:hover {\n    background: #e1e4e8;\n}\n\n.load-more-code:focus {\n    outline: 2px solid #007bff;\n    outline-offset: -2px;\n}\n\n.code-performance-indicator {\n    position: absolute;\n    top: 8px;\n    left: 8px;\n    background: rgba(0,0,0,0.7);\n    color: white;\n    padding: 4px 8px;\n    border-radius: 4px;\n    font-size: 11px;\n    font-family: monospace;\n    opacity: 0.7;\n    pointer-events: none;\n}\n\n/* Loading states */\n.code-loading {\n    position: relative;\n    opacity: 0.6;\n}\n\n.code-loading::after {\n    content: 'Highlighting...';\n    position: absolute;\n    top: 8px;\n    right: 8px;\n    background: rgba(0,0,0,0.7);\n    color: white;\n    padding: 4px 8px;\n    border-radius: 4px;\n    font-size: 11px;\n    z-index: 10;\n}\n\n/* Reduced motion support */\n@media (prefers-reduced-motion: reduce) {\n    .code-loading,\n    .load-more-code {\n        transition: none;\n    }\n}\n`\u003C/span>;\n\n\u003Cspan class=\"hljs-comment\">// Inject performance styles\u003C/span>\n\u003Cspan class=\"hljs-keyword\">const\u003C/span> perfStyle = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'style'\u003C/span>);\nperfStyle.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = performanceStyles;\n\u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-property\">head\u003C/span>.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(perfStyle);\n\n\u003Cspan class=\"hljs-comment\">// Initialize lazy highlighting\u003C/span>\n\u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'DOMContentLoaded'\u003C/span>, \u003Cspan class=\"hljs-keyword\">function\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n    \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">LazySyntaxHighlighter\u003C/span>({\n        \u003Cspan class=\"hljs-attr\">enableVirtualization\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n        \u003Cspan class=\"hljs-attr\">enableWorker\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n        \u003Cspan class=\"hljs-attr\">threshold\u003C/span>: \u003Cspan class=\"hljs-number\">0.1\u003C/span>,\n        \u003Cspan class=\"hljs-attr\">rootMargin\u003C/span>: \u003Cspan class=\"hljs-string\">'100px'\u003C/span>\n    });\n});\n\u003C/code>\u003C/pre>\u003Ch2 id=\"conclusion\">Conclusion\u003C/h2>\n\u003Cp>Advanced Markdown code syntax highlighting represents a fundamental component of modern technical documentation that significantly enhances code readability, user engagement, and knowledge transfer effectiveness. By implementing comprehensive highlighting systems, custom theme development, and interactive code examples, technical writers can create documentation experiences that effectively communicate complex programming concepts while maintaining accessibility and performance standards.\u003C/p>\n\u003Cp>The key to successful syntax highlighting implementation lies in balancing visual enhancement with practical functionality, ensuring that highlighting systems improve rather than complicate the documentation experience. Whether you're building API documentation, programming tutorials, or technical specifications, the techniques covered in this guide provide the foundation for creating professional-grade code presentation that serves both novice and expert developers.\u003C/p>\n\u003Cp>Remember to implement highlighting progressively, prioritize accessibility across all themes, and optimize performance for large codebases. With proper advanced syntax highlighting implementation, your Markdown documentation becomes a powerful platform for technical communication that engages readers while effectively conveying complex programming information through visually rich, interactive code examples.\u003C/p>\n",[15,19,22,25,28],{"id":16,"text":17,"level":18},"why-implement-advanced-syntax-highlighting","Why Implement Advanced Syntax Highlighting?",2,{"id":20,"text":21,"level":18},"foundation-syntax-highlighting-systems","Foundation Syntax Highlighting Systems",{"id":23,"text":24,"level":18},"integration-with-documentation-systems","Integration with Documentation Systems",{"id":26,"text":27,"level":18},"performance-optimization-and-best-practices","Performance Optimization and Best Practices",{"id":29,"text":30,"level":18},"conclusion","Conclusion",[],[33,41,49],{"slug":34,"title":35,"description":36,"excerpt":37,"date":38,"category":9,"author":10,"keywords":39,"readingMinutes":40},"markdown-code-block-syntax-highlighting-language-specification-complete-guide","Markdown Code Block Syntax Highlighting and Language Specification: Complete Guide to Enhanced Code Display and Documentation","Master advanced Markdown code block syntax highlighting, language specification, and enhanced code display for technical documentation. Learn highlighting techniques, language identifiers, and code presentation best practices.","Advanced Markdown code block syntax highlighting and language specification enable sophisticated technical documentation that provides clear, readable code examples with proper syntax coloring,…","2025-12-11","markdown code blocks, syntax highlighting markdown, code block languages, markdown code syntax, programming language markdown, code highlighting, fenced code blocks, markdown code display",22,{"slug":42,"title":43,"description":44,"excerpt":45,"date":46,"category":9,"author":10,"keywords":47,"readingMinutes":48},"markdown-code-highlighting-syntax-complete-guide","Markdown Code Highlighting and Syntax Features: Complete Guide for Enhanced Technical Documentation","Master advanced Markdown code highlighting techniques with syntax specification, language detection, custom themes, and interactive code features. Learn professional code presentation for documentation, tutorials, and technical writing.","Advanced Markdown code highlighting transforms technical documentation by providing visually distinct, language-specific syntax coloring and enhanced readability for code examples across…","2025-10-04","markdown code highlighting, syntax highlighting markdown, code blocks markdown, programming language syntax, markdown code themes, technical documentation, markdown code examples, syntax highlighting themes",24,{"slug":50,"title":51,"description":52,"excerpt":53,"date":54,"category":9,"author":10,"keywords":55,"readingMinutes":56},"markdown-syntax-highlighting-complete-guide","Markdown Syntax Highlighting: Complete Guide for Code Blocks","Master syntax highlighting in Markdown code blocks across platforms. Learn language identifiers, custom highlighting, and platform-specific features for better code presentation.","Code blocks are one of Markdown's most powerful features for technical writing, and syntax highlighting transforms plain code into readable, professionally formatted content. Understanding how to…","2025-08-18","markdown syntax highlighting, markdown code blocks, language highlighting, code formatting markdown, syntax coloring markdown, programming language markdown",8,1792184946002]