[{"data":1,"prerenderedAt":60},["Reactive",2],{"blog-post-markdown-custom-directives-block-extensions-complete-guide":3},{"slug":4,"title":5,"description":6,"excerpt":7,"date":8,"category":9,"author":10,"keywords":11,"readingMinutes":12,"html":13,"headings":14,"tools":34,"related":35},"markdown-custom-directives-block-extensions-complete-guide","Markdown Custom Directives and Block Extensions: Complete Guide to Advanced Content Blocks and Interactive Components","Master custom Markdown directives, block extensions, and advanced content components. Learn to create custom syntax, interactive blocks, and extensible Markdown systems for technical documentation and content management.","Custom Markdown directives and block extensions enable sophisticated content creation through extensible syntax systems, interactive components, and advanced formatting capabilities that extend…","2025-12-30","Tutorial","Matthew Rathbone","markdown custom directives, markdown block extensions, custom markdown syntax, markdown plugins, advanced markdown components, markdown content blocks, extensible markdown, custom markdown elements",20,"\u003Cp>Custom Markdown directives and block extensions enable sophisticated content creation through extensible syntax systems, interactive components, and advanced formatting capabilities that extend beyond standard Markdown limitations. By implementing custom directive processors, developing reusable content blocks, and creating sophisticated extension systems, technical writers and developers can build powerful documentation platforms that combine Markdown's simplicity with the flexibility of custom content components and interactive elements.\u003C/p>\n\u003Ch2 id=\"why-use-custom-directives-and-block-extensions\">Why Use Custom Directives and Block Extensions?\u003C/h2>\n\u003Cp>Advanced Markdown extensibility provides essential capabilities for modern content systems:\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>Enhanced Content Components\u003C/strong>: Create reusable, interactive content blocks beyond basic Markdown\u003C/li>\n\u003Cli>\u003Cstrong>Custom Syntax Systems\u003C/strong>: Develop domain-specific markup languages for specialized content types\u003C/li>\n\u003Cli>\u003Cstrong>Interactive Documentation\u003C/strong>: Build dynamic content with embedded functionality and user interactions\u003C/li>\n\u003Cli>\u003Cstrong>Content Management Integration\u003C/strong>: Connect Markdown with external data sources and content management systems\u003C/li>\n\u003Cli>\u003Cstrong>Platform Consistency\u003C/strong>: Ensure consistent styling and behavior across different content platforms\u003C/li>\n\u003C/ul>\n\u003Ch2 id=\"foundation-directive-systems\">Foundation Directive Systems\u003C/h2>\n\u003Ch3 id=\"basic-directive-syntax-patterns\">Basic Directive Syntax Patterns\u003C/h3>\n\u003Cp>Common approaches to custom directive implementation:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">\u003Cspan class=\"hljs-section\"># Standard Directive Patterns\u003C/span>\n\n\u003Cspan class=\"hljs-section\">## Block Directive Syntax\u003C/span>\n\n:::info\nThis is an information block with custom styling and behavior.\n:::\n\n:::warning title="Important Notice"\nThis is a warning block with a custom title parameter.\n:::\n\n:::code-example language="javascript" filename="example.js"\n\u003Cspan class=\"hljs-code\">```javascript\nfunction customDirective() {\n    console.log("Custom directive content");\n}\n```\u003C/span>\n::::\n\n\u003Cspan class=\"hljs-section\">## Inline Directive Syntax\u003C/span>\n\nThis paragraph contains an inline {%note%}important note{%/note%} directive.\n\nUse {%badge color="primary"%}Custom Badge{%/badge%} for highlighting.\n\nInsert {%icon name="warning"%} for contextual icons.\n\n\u003Cspan class=\"hljs-section\">## Parameterized Directives\u003C/span>\n\n:::tab-group\n:::tab title="JavaScript"\n\u003Cspan class=\"hljs-code\">```javascript\n// JavaScript implementation\n```\u003C/span>\n:::\n\n:::tab title="Python"  \n\u003Cspan class=\"hljs-code\">```python\n# Python implementation\n```\u003C/span>\n:::\n:::\n\n\u003Cspan class=\"hljs-section\">## Content-Rich Directives\u003C/span>\n\n:::definition term="API Gateway"\nAn API Gateway is a server that acts as an API front-end, receiving API requests, enforcing throttling and security policies, passing requests to the back-end service, and then passing the response back to the requester.\n\n\u003Cspan class=\"hljs-strong\">**Key Features:**\u003C/span>\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> Request routing and composition\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> Authentication and authorization\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> Rate limiting and throttling\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> Request and response transformation\n:::\n\n:::example\n\u003Cspan class=\"hljs-strong\">**Problem**\u003C/span>: How to implement user authentication?\n\n\u003Cspan class=\"hljs-strong\">**Solution**\u003C/span>: Use JSON Web Tokens (JWT) for stateless authentication.\n\n\u003Cspan class=\"hljs-code\">```javascript\nconst jwt = require('jsonwebtoken');\n\nfunction generateToken(user) {\n    return jwt.sign(\n        { id: user.id, email: user.email },\n        process.env.JWT_SECRET,\n        { expiresIn: '1h' }\n    );\n}\n```\u003C/span>\n\n\u003Cspan class=\"hljs-strong\">**Explanation**\u003C/span>: This creates a secure token that can be verified without server-side session storage.\n:::\n\u003C/code>\u003C/pre>\u003Ch3 id=\"advanced-directive-processors\">Advanced Directive Processors\u003C/h3>\n\u003Cp>Creating sophisticated directive processing systems:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-javascript\">\u003Cspan class=\"hljs-comment\">// markdown-directive-processor.js - Comprehensive directive processing system\u003C/span>\n\u003Cspan class=\"hljs-keyword\">class\u003C/span> \u003Cspan class=\"hljs-title class_\">MarkdownDirectiveProcessor\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\">allowCustomHTML\u003C/span>: \u003Cspan class=\"hljs-literal\">false\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">validateDirectives\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">customDirectives\u003C/span>: \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Map\u003C/span>(),\n            \u003Cspan class=\"hljs-attr\">templateEngine\u003C/span>: \u003Cspan class=\"hljs-string\">'default'\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">securityLevel\u003C/span>: \u003Cspan class=\"hljs-string\">'strict'\u003C/span>,\n            ...options\n        };\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">directiveRegistry\u003C/span> = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Map\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">templateCache\u003C/span> = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Map\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">processingStats\u003C/span> = {\n            \u003Cspan class=\"hljs-attr\">directivesProcessed\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">errors\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">warnings\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>\n        };\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">initializeBuiltinDirectives\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">initializeBuiltinDirectives\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Register built-in directive types\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">registerDirective\u003C/span>(\u003Cspan class=\"hljs-string\">'info'\u003C/span>, \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">createInfoBlock\u003C/span>.\u003Cspan class=\"hljs-title function_\">bind\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>));\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">registerDirective\u003C/span>(\u003Cspan class=\"hljs-string\">'warning'\u003C/span>, \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">createWarningBlock\u003C/span>.\u003Cspan class=\"hljs-title function_\">bind\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>));\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">registerDirective\u003C/span>(\u003Cspan class=\"hljs-string\">'code-example'\u003C/span>, \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">createCodeExample\u003C/span>.\u003Cspan class=\"hljs-title function_\">bind\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>));\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">registerDirective\u003C/span>(\u003Cspan class=\"hljs-string\">'definition'\u003C/span>, \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">createDefinition\u003C/span>.\u003Cspan class=\"hljs-title function_\">bind\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>));\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">registerDirective\u003C/span>(\u003Cspan class=\"hljs-string\">'example'\u003C/span>, \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">createExample\u003C/span>.\u003Cspan class=\"hljs-title function_\">bind\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>));\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">registerDirective\u003C/span>(\u003Cspan class=\"hljs-string\">'tab-group'\u003C/span>, \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">createTabGroup\u003C/span>.\u003Cspan class=\"hljs-title function_\">bind\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>));\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">registerDirective\u003C/span>(\u003Cspan class=\"hljs-string\">'tab'\u003C/span>, \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">createTab\u003C/span>.\u003Cspan class=\"hljs-title function_\">bind\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>));\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">registerDirective\u003C/span>(\u003Cspan class=\"hljs-string\">'note'\u003C/span>, \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">createInlineNote\u003C/span>.\u003Cspan class=\"hljs-title function_\">bind\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>));\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">registerDirective\u003C/span>(\u003Cspan class=\"hljs-string\">'badge'\u003C/span>, \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">createBadge\u003C/span>.\u003Cspan class=\"hljs-title function_\">bind\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>));\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">registerDirective\u003C/span>(\u003Cspan class=\"hljs-string\">'icon'\u003C/span>, \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">createIcon\u003C/span>.\u003Cspan class=\"hljs-title function_\">bind\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>));\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">registerDirective\u003C/span>(\u003Cspan class=\"hljs-params\">name, processor\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-keyword\">typeof\u003C/span> processor !== \u003Cspan class=\"hljs-string\">'function'\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">throw\u003C/span> \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Error\u003C/span>(\u003Cspan class=\"hljs-string\">`Directive processor for '\u003Cspan class=\"hljs-subst\">${name}\u003C/span>' must be a function`\u003C/span>);\n        }\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">directiveRegistry\u003C/span>.\u003Cspan class=\"hljs-title function_\">set\u003C/span>(name, {\n            processor,\n            \u003Cspan class=\"hljs-attr\">registeredAt\u003C/span>: \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Date\u003C/span>(),\n            \u003Cspan class=\"hljs-attr\">usageCount\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">processMarkdown\u003C/span>(\u003Cspan class=\"hljs-params\">content\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">try\u003C/span> {\n            \u003Cspan class=\"hljs-comment\">// Process block directives first\u003C/span>\n            content = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">processBlockDirectives\u003C/span>(content);\n            \n            \u003Cspan class=\"hljs-comment\">// Then process inline directives\u003C/span>\n            content = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">processInlineDirectives\u003C/span>(content);\n            \n            \u003Cspan class=\"hljs-comment\">// Post-process for nested directives\u003C/span>\n            content = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">processNestedDirectives\u003C/span>(content);\n            \n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> content;\n        } \u003Cspan class=\"hljs-keyword\">catch\u003C/span> (error) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">processingStats\u003C/span>.\u003Cspan class=\"hljs-property\">errors\u003C/span>++;\n            \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">error\u003C/span>(\u003Cspan class=\"hljs-string\">'Directive processing error:'\u003C/span>, error);\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> content; \u003Cspan class=\"hljs-comment\">// Return original content on error\u003C/span>\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">processBlockDirectives\u003C/span>(\u003Cspan class=\"hljs-params\">content\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Pattern for block directives: :::directive-name params\\ncontent\\n:::\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> blockDirectivePattern = \u003Cspan class=\"hljs-regexp\">/:::(\\w+)(?:\\s+([^\\n]*))?\\n([\\s\\S]*?)\\n:::/g\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> content.\u003Cspan class=\"hljs-title function_\">replace\u003C/span>(blockDirectivePattern, \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">match, directiveName, params, directiveContent\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">try\u003C/span> {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">processingStats\u003C/span>.\u003Cspan class=\"hljs-property\">directivesProcessed\u003C/span>++;\n                \n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> directive = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">directiveRegistry\u003C/span>.\u003Cspan class=\"hljs-title function_\">get\u003C/span>(directiveName);\n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!directive) {\n                    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">processingStats\u003C/span>.\u003Cspan class=\"hljs-property\">warnings\u003C/span>++;\n                    \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">warn\u003C/span>(\u003Cspan class=\"hljs-string\">`Unknown directive: \u003Cspan class=\"hljs-subst\">${directiveName}\u003C/span>`\u003C/span>);\n                    \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">createErrorBlock\u003C/span>(\u003Cspan class=\"hljs-string\">`Unknown directive: \u003Cspan class=\"hljs-subst\">${directiveName}\u003C/span>`\u003C/span>);\n                }\n                \n                directive.\u003Cspan class=\"hljs-property\">usageCount\u003C/span>++;\n                \n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> parsedParams = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">parseDirectiveParams\u003C/span>(params);\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> context = {\n                    \u003Cspan class=\"hljs-attr\">name\u003C/span>: directiveName,\n                    \u003Cspan class=\"hljs-attr\">params\u003C/span>: parsedParams,\n                    \u003Cspan class=\"hljs-attr\">content\u003C/span>: directiveContent.\u003Cspan class=\"hljs-title function_\">trim\u003C/span>(),\n                    \u003Cspan class=\"hljs-attr\">type\u003C/span>: \u003Cspan class=\"hljs-string\">'block'\u003C/span>\n                };\n                \n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> directive.\u003Cspan class=\"hljs-title function_\">processor\u003C/span>(context);\n            } \u003Cspan class=\"hljs-keyword\">catch\u003C/span> (error) {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">processingStats\u003C/span>.\u003Cspan class=\"hljs-property\">errors\u003C/span>++;\n                \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">error\u003C/span>(\u003Cspan class=\"hljs-string\">`Error processing directive \u003Cspan class=\"hljs-subst\">${directiveName}\u003C/span>:`\u003C/span>, error);\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">createErrorBlock\u003C/span>(\u003Cspan class=\"hljs-string\">`Error in directive: \u003Cspan class=\"hljs-subst\">${directiveName}\u003C/span>`\u003C/span>);\n            }\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">processInlineDirectives\u003C/span>(\u003Cspan class=\"hljs-params\">content\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Pattern for inline directives: {%directive-name params%}content{%/directive-name%}\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> inlineDirectivePattern = \u003Cspan class=\"hljs-regexp\">/\\{%(\\w+)(?:\\s+([^%]*))?\\%\\}(.*?)\\{%\\/\\1\\%\\}/g\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> content.\u003Cspan class=\"hljs-title function_\">replace\u003C/span>(inlineDirectivePattern, \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">match, directiveName, params, directiveContent\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">try\u003C/span> {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">processingStats\u003C/span>.\u003Cspan class=\"hljs-property\">directivesProcessed\u003C/span>++;\n                \n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> directive = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">directiveRegistry\u003C/span>.\u003Cspan class=\"hljs-title function_\">get\u003C/span>(directiveName);\n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!directive) {\n                    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">processingStats\u003C/span>.\u003Cspan class=\"hljs-property\">warnings\u003C/span>++;\n                    \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">warn\u003C/span>(\u003Cspan class=\"hljs-string\">`Unknown inline directive: \u003Cspan class=\"hljs-subst\">${directiveName}\u003C/span>`\u003C/span>);\n                    \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">`<span class="directive-error">Unknown directive: \u003Cspan class=\"hljs-subst\">${directiveName}\u003C/span></span>`\u003C/span>;\n                }\n                \n                directive.\u003Cspan class=\"hljs-property\">usageCount\u003C/span>++;\n                \n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> parsedParams = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">parseDirectiveParams\u003C/span>(params);\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> context = {\n                    \u003Cspan class=\"hljs-attr\">name\u003C/span>: directiveName,\n                    \u003Cspan class=\"hljs-attr\">params\u003C/span>: parsedParams,\n                    \u003Cspan class=\"hljs-attr\">content\u003C/span>: directiveContent.\u003Cspan class=\"hljs-title function_\">trim\u003C/span>(),\n                    \u003Cspan class=\"hljs-attr\">type\u003C/span>: \u003Cspan class=\"hljs-string\">'inline'\u003C/span>\n                };\n                \n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> directive.\u003Cspan class=\"hljs-title function_\">processor\u003C/span>(context);\n            } \u003Cspan class=\"hljs-keyword\">catch\u003C/span> (error) {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">processingStats\u003C/span>.\u003Cspan class=\"hljs-property\">errors\u003C/span>++;\n                \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">error\u003C/span>(\u003Cspan class=\"hljs-string\">`Error processing inline directive \u003Cspan class=\"hljs-subst\">${directiveName}\u003C/span>:`\u003C/span>, error);\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">`<span class="directive-error">Error in directive: \u003Cspan class=\"hljs-subst\">${directiveName}\u003C/span></span>`\u003C/span>;\n            }\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">processNestedDirectives\u003C/span>(\u003Cspan class=\"hljs-params\">content\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Handle special cases like tab-group containers\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> content.\u003Cspan class=\"hljs-title function_\">replace\u003C/span>(\u003Cspan class=\"hljs-regexp\">/:::tab-group\\n([\\s\\S]*?)\\n:::/g\u003C/span>, \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">match, tabsContent\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> tabs = [];\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> tabPattern = \u003Cspan class=\"hljs-regexp\">/:::tab\\s+title="([^"]+)"(?:\\s+([^\\n]*))?\\n([\\s\\S]*?)(?=:::tab|$)/g\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">let\u003C/span> tabMatch;\n            \n            \u003Cspan class=\"hljs-keyword\">while\u003C/span> ((tabMatch = tabPattern.\u003Cspan class=\"hljs-title function_\">exec\u003C/span>(tabsContent)) !== \u003Cspan class=\"hljs-literal\">null\u003C/span>) {\n                tabs.\u003Cspan class=\"hljs-title function_\">push\u003C/span>({\n                    \u003Cspan class=\"hljs-attr\">title\u003C/span>: tabMatch[\u003Cspan class=\"hljs-number\">1\u003C/span>],\n                    \u003Cspan class=\"hljs-attr\">params\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">parseDirectiveParams\u003C/span>(tabMatch[\u003Cspan class=\"hljs-number\">2\u003C/span>] || \u003Cspan class=\"hljs-string\">''\u003C/span>),\n                    \u003Cspan class=\"hljs-attr\">content\u003C/span>: tabMatch[\u003Cspan class=\"hljs-number\">3\u003C/span>].\u003Cspan class=\"hljs-title function_\">trim\u003C/span>()\n                });\n            }\n            \n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">createTabGroup\u003C/span>({ \u003Cspan class=\"hljs-attr\">content\u003C/span>: \u003Cspan class=\"hljs-string\">''\u003C/span>, \u003Cspan class=\"hljs-attr\">params\u003C/span>: {}, tabs });\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">parseDirectiveParams\u003C/span>(\u003Cspan class=\"hljs-params\">paramString\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!paramString) \u003Cspan class=\"hljs-keyword\">return\u003C/span> {};\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> params = {};\n        \n        \u003Cspan class=\"hljs-comment\">// Handle quoted parameters: key="value"\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> quotedParamPattern = \u003Cspan class=\"hljs-regexp\">/(\\w+)="([^"]*)"/g\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> match;\n        \n        \u003Cspan class=\"hljs-keyword\">while\u003C/span> ((match = quotedParamPattern.\u003Cspan class=\"hljs-title function_\">exec\u003C/span>(paramString)) !== \u003Cspan class=\"hljs-literal\">null\u003C/span>) {\n            params[match[\u003Cspan class=\"hljs-number\">1\u003C/span>]] = match[\u003Cspan class=\"hljs-number\">2\u003C/span>];\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Handle unquoted parameters: key=value\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> unquotedParamPattern = \u003Cspan class=\"hljs-regexp\">/(\\w+)=(\\w+)/g\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> cleanedString = paramString.\u003Cspan class=\"hljs-title function_\">replace\u003C/span>(quotedParamPattern, \u003Cspan class=\"hljs-string\">''\u003C/span>);\n        \n        \u003Cspan class=\"hljs-keyword\">while\u003C/span> ((match = unquotedParamPattern.\u003Cspan class=\"hljs-title function_\">exec\u003C/span>(cleanedString)) !== \u003Cspan class=\"hljs-literal\">null\u003C/span>) {\n            params[match[\u003Cspan class=\"hljs-number\">1\u003C/span>]] = match[\u003Cspan class=\"hljs-number\">2\u003C/span>];\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Handle boolean flags: just the parameter name\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> remainingString = cleanedString.\u003Cspan class=\"hljs-title function_\">replace\u003C/span>(unquotedParamPattern, \u003Cspan class=\"hljs-string\">''\u003C/span>).\u003Cspan class=\"hljs-title function_\">trim\u003C/span>();\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (remainingString) {\n            remainingString.\u003Cspan class=\"hljs-title function_\">split\u003C/span>(\u003Cspan class=\"hljs-regexp\">/\\s+/\u003C/span>).\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">flag\u003C/span> =>\u003C/span> {\n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (flag && !params[flag]) {\n                    params[flag] = \u003Cspan class=\"hljs-literal\">true\u003C/span>;\n                }\n            });\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> params;\n    }\n    \n    \u003Cspan class=\"hljs-comment\">// Built-in directive implementations\u003C/span>\n    \u003Cspan class=\"hljs-title function_\">createInfoBlock\u003C/span>(\u003Cspan class=\"hljs-params\">context\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> { content, params } = context;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> title = params.\u003Cspan class=\"hljs-property\">title\u003C/span> || \u003Cspan class=\"hljs-string\">''\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> icon = params.\u003Cspan class=\"hljs-property\">icon\u003C/span> || \u003Cspan class=\"hljs-string\">'ℹ️'\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">`\n<div class="directive-block directive-info">\n    \u003Cspan class=\"hljs-subst\">${title ? \u003Cspan class=\"hljs-string\">`<div class="directive-header">\n        <span class="directive-icon">\u003Cspan class=\"hljs-subst\">${icon}\u003C/span></span>\n        <span class="directive-title">\u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.escapeHtml(title)}\u003C/span></span>\n    </div>`\u003C/span> : \u003Cspan class=\"hljs-string\">''\u003C/span>}\u003C/span>\n    <div class="directive-content">\n        \u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.processInnerContent(content)}\u003C/span>\n    </div>\n</div>`\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">createWarningBlock\u003C/span>(\u003Cspan class=\"hljs-params\">context\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> { content, params } = context;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> title = params.\u003Cspan class=\"hljs-property\">title\u003C/span> || \u003Cspan class=\"hljs-string\">'Warning'\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> icon = params.\u003Cspan class=\"hljs-property\">icon\u003C/span> || \u003Cspan class=\"hljs-string\">'⚠️'\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">`\n<div class="directive-block directive-warning">\n    <div class="directive-header">\n        <span class="directive-icon">\u003Cspan class=\"hljs-subst\">${icon}\u003C/span></span>\n        <span class="directive-title">\u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.escapeHtml(title)}\u003C/span></span>\n    </div>\n    <div class="directive-content">\n        \u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.processInnerContent(content)}\u003C/span>\n    </div>\n</div>`\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">createCodeExample\u003C/span>(\u003Cspan class=\"hljs-params\">context\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> { content, params } = context;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> language = params.\u003Cspan class=\"hljs-property\">language\u003C/span> || \u003Cspan class=\"hljs-string\">'text'\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> filename = params.\u003Cspan class=\"hljs-property\">filename\u003C/span> || \u003Cspan class=\"hljs-string\">''\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> highlight = params.\u003Cspan class=\"hljs-property\">highlight\u003C/span> || \u003Cspan class=\"hljs-string\">''\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">`\n<div class="directive-block directive-code-example">\n    \u003Cspan class=\"hljs-subst\">${filename ? \u003Cspan class=\"hljs-string\">`<div class="code-filename">\u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.escapeHtml(filename)}\u003C/span></div>`\u003C/span> : \u003Cspan class=\"hljs-string\">''\u003C/span>}\u003C/span>\n    <div class="code-container">\n        <pre class="code-block language-\u003Cspan class=\"hljs-subst\">${language}\u003C/span>"\u003Cspan class=\"hljs-subst\">${highlight ? \u003Cspan class=\"hljs-string\">` data-highlight="\u003Cspan class=\"hljs-subst\">${highlight}\u003C/span>"`\u003C/span> : \u003Cspan class=\"hljs-string\">''\u003C/span>}\u003C/span>><code>\u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.escapeHtml(content)}\u003C/span></code></pre>\n    </div>\n</div>`\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">createDefinition\u003C/span>(\u003Cspan class=\"hljs-params\">context\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> { content, params } = context;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> term = params.\u003Cspan class=\"hljs-property\">term\u003C/span> || \u003Cspan class=\"hljs-string\">''\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">`\n<div class="directive-block directive-definition">\n    <div class="definition-term">\u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.escapeHtml(term)}\u003C/span></div>\n    <div class="definition-content">\n        \u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.processInnerContent(content)}\u003C/span>\n    </div>\n</div>`\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">createExample\u003C/span>(\u003Cspan class=\"hljs-params\">context\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> { content, params } = context;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> title = params.\u003Cspan class=\"hljs-property\">title\u003C/span> || \u003Cspan class=\"hljs-string\">'Example'\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">`\n<div class="directive-block directive-example">\n    <div class="directive-header">\n        <span class="directive-icon">💡</span>\n        <span class="directive-title">\u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.escapeHtml(title)}\u003C/span></span>\n    </div>\n    <div class="directive-content">\n        \u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.processInnerContent(content)}\u003C/span>\n    </div>\n</div>`\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">createTabGroup\u003C/span>(\u003Cspan class=\"hljs-params\">context\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> { tabs } = context;\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!tabs || tabs.\u003Cspan class=\"hljs-property\">length\u003C/span> === \u003Cspan class=\"hljs-number\">0\u003C/span>) \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">''\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> tabsId = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">generateId\u003C/span>();\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> tabsHtml = \u003Cspan class=\"hljs-string\">`<div class="directive-tabs" data-tabs-id="\u003Cspan class=\"hljs-subst\">${tabsId}\u003C/span>">`\u003C/span>;\n        \n        \u003Cspan class=\"hljs-comment\">// Create tab headers\u003C/span>\n        tabsHtml += \u003Cspan class=\"hljs-string\">'<div class="tab-headers">'\u003C/span>;\n        tabs.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">tab, index\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> activeClass = index === \u003Cspan class=\"hljs-number\">0\u003C/span> ? \u003Cspan class=\"hljs-string\">' active'\u003C/span> : \u003Cspan class=\"hljs-string\">''\u003C/span>;\n            tabsHtml += \u003Cspan class=\"hljs-string\">`<button class="tab-header\u003Cspan class=\"hljs-subst\">${activeClass}\u003C/span>" data-tab="\u003Cspan class=\"hljs-subst\">${index}\u003C/span>">\u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.escapeHtml(tab.title)}\u003C/span></button>`\u003C/span>;\n        });\n        tabsHtml += \u003Cspan class=\"hljs-string\">'</div>'\u003C/span>;\n        \n        \u003Cspan class=\"hljs-comment\">// Create tab content\u003C/span>\n        tabsHtml += \u003Cspan class=\"hljs-string\">'<div class="tab-contents">'\u003C/span>;\n        tabs.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">tab, index\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> activeClass = index === \u003Cspan class=\"hljs-number\">0\u003C/span> ? \u003Cspan class=\"hljs-string\">' active'\u003C/span> : \u003Cspan class=\"hljs-string\">''\u003C/span>;\n            tabsHtml += \u003Cspan class=\"hljs-string\">`<div class="tab-content\u003Cspan class=\"hljs-subst\">${activeClass}\u003C/span>" data-tab="\u003Cspan class=\"hljs-subst\">${index}\u003C/span>">\n                \u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.processInnerContent(tab.content)}\u003C/span>\n            </div>`\u003C/span>;\n        });\n        tabsHtml += \u003Cspan class=\"hljs-string\">'</div>'\u003C/span>;\n        \n        tabsHtml += \u003Cspan class=\"hljs-string\">'</div>'\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> tabsHtml;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">createTab\u003C/span>(\u003Cspan class=\"hljs-params\">context\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// This is handled by createTabGroup, but we need the method for registration\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">''\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">createInlineNote\u003C/span>(\u003Cspan class=\"hljs-params\">context\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> { content, params } = context;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> type = params.\u003Cspan class=\"hljs-property\">type\u003C/span> || \u003Cspan class=\"hljs-string\">'info'\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">`<span class="directive-inline directive-note directive-note-\u003Cspan class=\"hljs-subst\">${type}\u003C/span>">\u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.escapeHtml(content)}\u003C/span></span>`\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">createBadge\u003C/span>(\u003Cspan class=\"hljs-params\">context\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> { content, params } = context;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> color = params.\u003Cspan class=\"hljs-property\">color\u003C/span> || \u003Cspan class=\"hljs-string\">'primary'\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> size = params.\u003Cspan class=\"hljs-property\">size\u003C/span> || \u003Cspan class=\"hljs-string\">'normal'\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">`<span class="directive-badge badge-\u003Cspan class=\"hljs-subst\">${color}\u003C/span> badge-\u003Cspan class=\"hljs-subst\">${size}\u003C/span>">\u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.escapeHtml(content)}\u003C/span></span>`\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">createIcon\u003C/span>(\u003Cspan class=\"hljs-params\">context\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> { params } = context;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> name = params.\u003Cspan class=\"hljs-property\">name\u003C/span> || \u003Cspan class=\"hljs-string\">''\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> size = params.\u003Cspan class=\"hljs-property\">size\u003C/span> || \u003Cspan class=\"hljs-string\">''\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!name) \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">''\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">`<span class="directive-icon icon-\u003Cspan class=\"hljs-subst\">${name}\u003C/span>\u003Cspan class=\"hljs-subst\">${size ? \u003Cspan class=\"hljs-string\">` icon-\u003Cspan class=\"hljs-subst\">${size}\u003C/span>`\u003C/span> : \u003Cspan class=\"hljs-string\">''\u003C/span>}\u003C/span>" aria-hidden="true"></span>`\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">createErrorBlock\u003C/span>(\u003Cspan class=\"hljs-params\">message\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">`\n<div class="directive-error-block">\n    <strong>Directive Error:</strong> \u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.escapeHtml(message)}\u003C/span>\n</div>`\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">processInnerContent\u003C/span>(\u003Cspan class=\"hljs-params\">content\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Process Markdown within directive content\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-keyword\">typeof\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">markdownProcessor\u003C/span> === \u003Cspan class=\"hljs-string\">'function'\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-title function_\">markdownProcessor\u003C/span>(content);\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Basic markdown processing for common cases\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> content\n            .\u003Cspan class=\"hljs-title function_\">replace\u003C/span>(\u003Cspan class=\"hljs-regexp\">/\\*\\*(.*?)\\*\\*/g\u003C/span>, \u003Cspan class=\"hljs-string\">'<strong>$1</strong>'\u003C/span>)\n            .\u003Cspan class=\"hljs-title function_\">replace\u003C/span>(\u003Cspan class=\"hljs-regexp\">/\\*(.*?)\\*/g\u003C/span>, \u003Cspan class=\"hljs-string\">'<em>$1</em>'\u003C/span>)\n            .\u003Cspan class=\"hljs-title function_\">replace\u003C/span>(\u003Cspan class=\"hljs-regexp\">/`(.*?)`/g\u003C/span>, \u003Cspan class=\"hljs-string\">'<code>$1</code>'\u003C/span>)\n            .\u003Cspan class=\"hljs-title function_\">replace\u003C/span>(\u003Cspan class=\"hljs-regexp\">/\\n\\n/g\u003C/span>, \u003Cspan class=\"hljs-string\">'</p><p>'\u003C/span>)\n            .\u003Cspan class=\"hljs-title function_\">replace\u003C/span>(\u003Cspan class=\"hljs-regexp\">/^(?!<p>)/\u003C/span>, \u003Cspan class=\"hljs-string\">'<p>'\u003C/span>)\n            .\u003Cspan class=\"hljs-title function_\">replace\u003C/span>(\u003Cspan class=\"hljs-regexp\">/(?<!<\\/p>)$/\u003C/span>, \u003Cspan class=\"hljs-string\">'</p>'\u003C/span>);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">escapeHtml\u003C/span>(\u003Cspan class=\"hljs-params\">text\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> div = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n        div.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = text;\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> div.\u003Cspan class=\"hljs-property\">innerHTML\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">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_\">substr\u003C/span>(\u003Cspan class=\"hljs-number\">2\u003C/span>, \u003Cspan class=\"hljs-number\">9\u003C/span>);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">getStats\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> {\n            ...\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">processingStats\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">registeredDirectives\u003C/span>: \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">from\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">directiveRegistry\u003C/span>.\u003Cspan class=\"hljs-title function_\">keys\u003C/span>()),\n            \u003Cspan class=\"hljs-attr\">directiveUsage\u003C/span>: \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">from\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">directiveRegistry\u003C/span>.\u003Cspan class=\"hljs-title function_\">entries\u003C/span>()).\u003Cspan class=\"hljs-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">[name, data]\u003C/span>) =>\u003C/span> ({\n                name,\n                \u003Cspan class=\"hljs-attr\">usageCount\u003C/span>: data.\u003Cspan class=\"hljs-property\">usageCount\u003C/span>\n            }))\n        };\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">// Initialize directive processor\u003C/span>\n\u003Cspan class=\"hljs-keyword\">const\u003C/span> directiveProcessor = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">MarkdownDirectiveProcessor\u003C/span>();\n\n\u003Cspan class=\"hljs-comment\">// CSS for directive styling\u003C/span>\n\u003Cspan class=\"hljs-keyword\">const\u003C/span> directiveStyles = \u003Cspan class=\"hljs-string\">`\n/* Directive Block Styles */\n.directive-block {\n    margin: 1.5rem 0;\n    border-radius: 0.375rem;\n    overflow: hidden;\n}\n\n.directive-info {\n    background: #e3f2fd;\n    border-left: 4px solid #2196f3;\n}\n\n.directive-warning {\n    background: #fff3cd;\n    border-left: 4px solid #ff9800;\n}\n\n.directive-example {\n    background: #f0f9ff;\n    border-left: 4px solid #0ea5e9;\n}\n\n.directive-definition {\n    background: #f8f9fa;\n    border: 1px solid #dee2e6;\n}\n\n.directive-header {\n    display: flex;\n    align-items: center;\n    padding: 0.75rem 1rem;\n    background: rgba(0,0,0,0.05);\n    font-weight: 600;\n}\n\n.directive-icon {\n    margin-right: 0.5rem;\n    font-size: 1.1em;\n}\n\n.directive-content {\n    padding: 1rem;\n}\n\n.directive-content p:last-child {\n    margin-bottom: 0;\n}\n\n/* Code Example Styles */\n.directive-code-example {\n    background: #f8f9fa;\n    border: 1px solid #dee2e6;\n}\n\n.code-filename {\n    background: #495057;\n    color: white;\n    padding: 0.5rem 1rem;\n    font-family: monospace;\n    font-size: 0.9rem;\n}\n\n.code-container {\n    overflow-x: auto;\n}\n\n.code-block {\n    margin: 0;\n    padding: 1rem;\n    background: #f8f9fa;\n    border: none;\n    font-family: 'Courier New', monospace;\n    line-height: 1.5;\n}\n\n/* Tab Styles */\n.directive-tabs {\n    border: 1px solid #dee2e6;\n    border-radius: 0.375rem;\n    overflow: hidden;\n}\n\n.tab-headers {\n    display: flex;\n    background: #f8f9fa;\n    border-bottom: 1px solid #dee2e6;\n}\n\n.tab-header {\n    background: none;\n    border: none;\n    padding: 0.75rem 1rem;\n    cursor: pointer;\n    border-bottom: 2px solid transparent;\n    transition: all 0.2s ease;\n}\n\n.tab-header:hover {\n    background: #e9ecef;\n}\n\n.tab-header.active {\n    background: white;\n    border-bottom-color: #007cba;\n    color: #007cba;\n    font-weight: 600;\n}\n\n.tab-contents {\n    position: relative;\n}\n\n.tab-content {\n    display: none;\n    padding: 1rem;\n}\n\n.tab-content.active {\n    display: block;\n}\n\n/* Inline Directive Styles */\n.directive-inline {\n    display: inline;\n}\n\n.directive-note {\n    padding: 0.2rem 0.4rem;\n    border-radius: 0.25rem;\n    font-size: 0.9rem;\n}\n\n.directive-note-info {\n    background: #cfe2ff;\n    color: #084298;\n}\n\n.directive-note-warning {\n    background: #fff3cd;\n    color: #664d03;\n}\n\n.directive-badge {\n    display: inline-block;\n    padding: 0.25rem 0.5rem;\n    font-size: 0.875rem;\n    font-weight: 600;\n    line-height: 1;\n    text-align: center;\n    white-space: nowrap;\n    vertical-align: baseline;\n    border-radius: 0.375rem;\n}\n\n.badge-primary {\n    color: white;\n    background-color: #007cba;\n}\n\n.badge-success {\n    color: white;\n    background-color: #28a745;\n}\n\n.badge-warning {\n    color: #212529;\n    background-color: #ffc107;\n}\n\n.badge-danger {\n    color: white;\n    background-color: #dc3545;\n}\n\n.badge-small {\n    padding: 0.125rem 0.375rem;\n    font-size: 0.75rem;\n}\n\n.badge-large {\n    padding: 0.375rem 0.75rem;\n    font-size: 1rem;\n}\n\n/* Definition Styles */\n.definition-term {\n    font-weight: 700;\n    font-size: 1.1em;\n    color: #495057;\n    margin-bottom: 0.5rem;\n}\n\n.definition-content {\n    color: #6c757d;\n}\n\n/* Error Styles */\n.directive-error-block {\n    background: #f8d7da;\n    color: #721c24;\n    padding: 1rem;\n    border: 1px solid #f5c6cb;\n    border-radius: 0.375rem;\n    margin: 1rem 0;\n}\n\n.directive-error {\n    color: #dc3545;\n    font-style: italic;\n}\n\n/* Responsive Design */\n@media (max-width: 768px) {\n    .directive-block {\n        margin: 1rem 0;\n    }\n    \n    .directive-header,\n    .directive-content {\n        padding: 0.75rem;\n    }\n    \n    .tab-headers {\n        flex-wrap: wrap;\n    }\n    \n    .tab-header {\n        min-width: 0;\n        flex: 1;\n    }\n}\n`\u003C/span>;\n\n\u003Cspan class=\"hljs-comment\">// JavaScript for interactive functionality\u003C/span>\n\u003Cspan class=\"hljs-keyword\">const\u003C/span> directiveInteractions = \u003Cspan class=\"hljs-string\">`\n// Tab functionality\ndocument.addEventListener('DOMContentLoaded', function() {\n    document.querySelectorAll('.directive-tabs').forEach(tabGroup => {\n        const headers = tabGroup.querySelectorAll('.tab-header');\n        const contents = tabGroup.querySelectorAll('.tab-content');\n        \n        headers.forEach(header => {\n            header.addEventListener('click', () => {\n                const tabIndex = header.getAttribute('data-tab');\n                \n                // Remove active class from all headers and contents\n                headers.forEach(h => h.classList.remove('active'));\n                contents.forEach(c => c.classList.remove('active'));\n                \n                // Add active class to clicked header and corresponding content\n                header.classList.add('active');\n                const activeContent = tabGroup.querySelector(\\`[data-tab="\\${tabIndex}"].tab-content\\`);\n                if (activeContent) {\n                    activeContent.classList.add('active');\n                }\n            });\n        });\n    });\n});\n`\u003C/span>;\n\n\u003Cspan class=\"hljs-comment\">// Inject styles and scripts\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> = directiveStyles;\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    \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\">textContent\u003C/span> = directiveInteractions;\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\u003C/code>\u003C/pre>\u003Ch2 id=\"advanced-extension-systems\">Advanced Extension Systems\u003C/h2>\n\u003Ch3 id=\"plugin-architecture-for-directives\">Plugin Architecture for Directives\u003C/h3>\n\u003Cp>Create modular, extensible directive systems:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-javascript\">\u003Cspan class=\"hljs-comment\">// markdown-directive-plugin-system.js\u003C/span>\n\u003Cspan class=\"hljs-keyword\">class\u003C/span> \u003Cspan class=\"hljs-title class_\">MarkdownDirectivePluginSystem\u003C/span> {\n    \u003Cspan class=\"hljs-title function_\">constructor\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">plugins\u003C/span> = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Map\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">hooks\u003C/span> = {\n            \u003Cspan class=\"hljs-attr\">beforeProcessing\u003C/span>: [],\n            \u003Cspan class=\"hljs-attr\">afterProcessing\u003C/span>: [],\n            \u003Cspan class=\"hljs-attr\">onDirectiveRegistered\u003C/span>: [],\n            \u003Cspan class=\"hljs-attr\">onDirectiveProcessed\u003C/span>: [],\n            \u003Cspan class=\"hljs-attr\">onError\u003C/span>: []\n        };\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">processor\u003C/span> = \u003Cspan class=\"hljs-literal\">null\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">config\u003C/span> = {\n            \u003Cspan class=\"hljs-attr\">debug\u003C/span>: \u003Cspan class=\"hljs-literal\">false\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">strictMode\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">allowDynamicRegistration\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>\n        };\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">registerPlugin\u003C/span>(\u003Cspan class=\"hljs-params\">name, plugin\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">plugins\u003C/span>.\u003Cspan class=\"hljs-title function_\">has\u003C/span>(name)) {\n            \u003Cspan class=\"hljs-keyword\">throw\u003C/span> \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Error\u003C/span>(\u003Cspan class=\"hljs-string\">`Plugin '\u003Cspan class=\"hljs-subst\">${name}\u003C/span>' is already registered`\u003C/span>);\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Validate plugin structure\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">validatePlugin\u003C/span>(plugin);\n        \n        \u003Cspan class=\"hljs-comment\">// Initialize plugin\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-keyword\">typeof\u003C/span> plugin.\u003Cspan class=\"hljs-property\">init\u003C/span> === \u003Cspan class=\"hljs-string\">'function'\u003C/span>) {\n            plugin.\u003Cspan class=\"hljs-title function_\">init\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>);\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Register plugin directives\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (plugin.\u003Cspan class=\"hljs-property\">directives\u003C/span>) {\n            \u003Cspan class=\"hljs-title class_\">Object\u003C/span>.\u003Cspan class=\"hljs-title function_\">entries\u003C/span>(plugin.\u003Cspan class=\"hljs-property\">directives\u003C/span>).\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">[directiveName, processor]\u003C/span>) =>\u003C/span> {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">registerDirective\u003C/span>(\u003Cspan class=\"hljs-string\">`\u003Cspan class=\"hljs-subst\">${name}\u003C/span>:\u003Cspan class=\"hljs-subst\">${directiveName}\u003C/span>`\u003C/span>, processor);\n            });\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Register plugin hooks\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (plugin.\u003Cspan class=\"hljs-property\">hooks\u003C/span>) {\n            \u003Cspan class=\"hljs-title class_\">Object\u003C/span>.\u003Cspan class=\"hljs-title function_\">entries\u003C/span>(plugin.\u003Cspan class=\"hljs-property\">hooks\u003C/span>).\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">[hookName, handler]\u003C/span>) =>\u003C/span> {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">addHook\u003C/span>(hookName, handler);\n            });\n        }\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">plugins\u003C/span>.\u003Cspan class=\"hljs-title function_\">set\u003C/span>(name, plugin);\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">emit\u003C/span>(\u003Cspan class=\"hljs-string\">'onDirectiveRegistered'\u003C/span>, { name, plugin });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">validatePlugin\u003C/span>(\u003Cspan class=\"hljs-params\">plugin\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-keyword\">typeof\u003C/span> plugin !== \u003Cspan class=\"hljs-string\">'object'\u003C/span> || plugin === \u003Cspan class=\"hljs-literal\">null\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">throw\u003C/span> \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Error\u003C/span>(\u003Cspan class=\"hljs-string\">'Plugin must be an object'\u003C/span>);\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!plugin.\u003Cspan class=\"hljs-property\">name\u003C/span> || \u003Cspan class=\"hljs-keyword\">typeof\u003C/span> plugin.\u003Cspan class=\"hljs-property\">name\u003C/span> !== \u003Cspan class=\"hljs-string\">'string'\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">throw\u003C/span> \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Error\u003C/span>(\u003Cspan class=\"hljs-string\">'Plugin must have a name property'\u003C/span>);\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!plugin.\u003Cspan class=\"hljs-property\">version\u003C/span> || \u003Cspan class=\"hljs-keyword\">typeof\u003C/span> plugin.\u003Cspan class=\"hljs-property\">version\u003C/span> !== \u003Cspan class=\"hljs-string\">'string'\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">throw\u003C/span> \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Error\u003C/span>(\u003Cspan class=\"hljs-string\">'Plugin must have a version property'\u003C/span>);\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (plugin.\u003Cspan class=\"hljs-property\">directives\u003C/span> && \u003Cspan class=\"hljs-keyword\">typeof\u003C/span> plugin.\u003Cspan class=\"hljs-property\">directives\u003C/span> !== \u003Cspan class=\"hljs-string\">'object'\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">throw\u003C/span> \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Error\u003C/span>(\u003Cspan class=\"hljs-string\">'Plugin directives must be an object'\u003C/span>);\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">registerDirective\u003C/span>(\u003Cspan class=\"hljs-params\">name, processor\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">processor\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">processor\u003C/span> = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">MarkdownDirectiveProcessor\u003C/span>();\n        }\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">processor\u003C/span>.\u003Cspan class=\"hljs-title function_\">registerDirective\u003C/span>(name, processor);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">addHook\u003C/span>(\u003Cspan class=\"hljs-params\">name, handler\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">hooks\u003C/span>[name]) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">hooks\u003C/span>[name] = [];\n        }\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">hooks\u003C/span>[name].\u003Cspan class=\"hljs-title function_\">push\u003C/span>(handler);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">emit\u003C/span>(\u003Cspan class=\"hljs-params\">hookName, data\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">hooks\u003C/span>[hookName]) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">hooks\u003C/span>[hookName].\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">handler\u003C/span> =>\u003C/span> {\n                \u003Cspan class=\"hljs-keyword\">try\u003C/span> {\n                    \u003Cspan class=\"hljs-title function_\">handler\u003C/span>(data);\n                } \u003Cspan class=\"hljs-keyword\">catch\u003C/span> (error) {\n                    \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">error\u003C/span>(\u003Cspan class=\"hljs-string\">`Error in hook \u003Cspan class=\"hljs-subst\">${hookName}\u003C/span>:`\u003C/span>, error);\n                }\n            });\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">processMarkdown\u003C/span>(\u003Cspan class=\"hljs-params\">content\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">try\u003C/span> {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">emit\u003C/span>(\u003Cspan class=\"hljs-string\">'beforeProcessing'\u003C/span>, { content });\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">processor\u003C/span>) {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">processor\u003C/span> = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">MarkdownDirectiveProcessor\u003C/span>();\n            }\n            \n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> result = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">processor\u003C/span>.\u003Cspan class=\"hljs-title function_\">processMarkdown\u003C/span>(content);\n            \n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">emit\u003C/span>(\u003Cspan class=\"hljs-string\">'afterProcessing'\u003C/span>, { content, result });\n            \n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> result;\n        } \u003Cspan class=\"hljs-keyword\">catch\u003C/span> (error) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">emit\u003C/span>(\u003Cspan class=\"hljs-string\">'onError'\u003C/span>, { error, content });\n            \u003Cspan class=\"hljs-keyword\">throw\u003C/span> error;\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">getPlugin\u003C/span>(\u003Cspan class=\"hljs-params\">name\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">plugins\u003C/span>.\u003Cspan class=\"hljs-title function_\">get\u003C/span>(name);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">listPlugins\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">from\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">plugins\u003C/span>.\u003Cspan class=\"hljs-title function_\">keys\u003C/span>());\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">unregisterPlugin\u003C/span>(\u003Cspan class=\"hljs-params\">name\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> plugin = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">plugins\u003C/span>.\u003Cspan class=\"hljs-title function_\">get\u003C/span>(name);\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (plugin) {\n            \u003Cspan class=\"hljs-comment\">// Call plugin cleanup if available\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-keyword\">typeof\u003C/span> plugin.\u003Cspan class=\"hljs-property\">cleanup\u003C/span> === \u003Cspan class=\"hljs-string\">'function'\u003C/span>) {\n                plugin.\u003Cspan class=\"hljs-title function_\">cleanup\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>);\n            }\n            \n            \u003Cspan class=\"hljs-comment\">// Remove plugin directives\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (plugin.\u003Cspan class=\"hljs-property\">directives\u003C/span>) {\n                \u003Cspan class=\"hljs-title class_\">Object\u003C/span>.\u003Cspan class=\"hljs-title function_\">keys\u003C/span>(plugin.\u003Cspan class=\"hljs-property\">directives\u003C/span>).\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">directiveName\u003C/span> =>\u003C/span> {\n                    \u003Cspan class=\"hljs-comment\">// Remove from processor if available\u003C/span>\n                    \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">processor\u003C/span>) {\n                        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">processor\u003C/span>.\u003Cspan class=\"hljs-property\">directiveRegistry\u003C/span>.\u003Cspan class=\"hljs-title function_\">delete\u003C/span>(\u003Cspan class=\"hljs-string\">`\u003Cspan class=\"hljs-subst\">${name}\u003C/span>:\u003Cspan class=\"hljs-subst\">${directiveName}\u003C/span>`\u003C/span>);\n                    }\n                });\n            }\n            \n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">plugins\u003C/span>.\u003Cspan class=\"hljs-title function_\">delete\u003C/span>(name);\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-literal\">true\u003C/span>;\n        }\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-literal\">false\u003C/span>;\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">// Example plugins\u003C/span>\n\u003Cspan class=\"hljs-keyword\">const\u003C/span> chartPlugin = {\n    \u003Cspan class=\"hljs-attr\">name\u003C/span>: \u003Cspan class=\"hljs-string\">'charts'\u003C/span>,\n    \u003Cspan class=\"hljs-attr\">version\u003C/span>: \u003Cspan class=\"hljs-string\">'1.0.0'\u003C/span>,\n    \u003Cspan class=\"hljs-attr\">description\u003C/span>: \u003Cspan class=\"hljs-string\">'Adds chart generation directives'\u003C/span>,\n    \n    \u003Cspan class=\"hljs-attr\">directives\u003C/span>: {\n        \u003Cspan class=\"hljs-string\">'bar-chart'\u003C/span>: \u003Cspan class=\"hljs-keyword\">function\u003C/span>(\u003Cspan class=\"hljs-params\">context\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> { content, params } = context;\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> data = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">parseChartData\u003C/span>(content);\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> chartId = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">generateId\u003C/span>();\n            \n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">`\n<div class="chart-container">\n    <canvas id="\u003Cspan class=\"hljs-subst\">${chartId}\u003C/span>" data-chart-type="bar" data-chart-data='\u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-built_in\">JSON\u003C/span>.stringify(data)}\u003C/span>' data-chart-options='\u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-built_in\">JSON\u003C/span>.stringify(params)}\u003C/span>'></canvas>\n</div>`\u003C/span>;\n        },\n        \n        \u003Cspan class=\"hljs-string\">'line-chart'\u003C/span>: \u003Cspan class=\"hljs-keyword\">function\u003C/span>(\u003Cspan class=\"hljs-params\">context\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> { content, params } = context;\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> data = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">parseChartData\u003C/span>(content);\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> chartId = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">generateId\u003C/span>();\n            \n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">`\n<div class="chart-container">\n    <canvas id="\u003Cspan class=\"hljs-subst\">${chartId}\u003C/span>" data-chart-type="line" data-chart-data='\u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-built_in\">JSON\u003C/span>.stringify(data)}\u003C/span>' data-chart-options='\u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-built_in\">JSON\u003C/span>.stringify(params)}\u003C/span>'></canvas>\n</div>`\u003C/span>;\n        },\n        \n        \u003Cspan class=\"hljs-string\">'pie-chart'\u003C/span>: \u003Cspan class=\"hljs-keyword\">function\u003C/span>(\u003Cspan class=\"hljs-params\">context\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> { content, params } = context;\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> data = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">parseChartData\u003C/span>(content);\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> chartId = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">generateId\u003C/span>();\n            \n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">`\n<div class="chart-container">\n    <canvas id="\u003Cspan class=\"hljs-subst\">${chartId}\u003C/span>" data-chart-type="pie" data-chart-data='\u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-built_in\">JSON\u003C/span>.stringify(data)}\u003C/span>' data-chart-options='\u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-built_in\">JSON\u003C/span>.stringify(params)}\u003C/span>'></canvas>\n</div>`\u003C/span>;\n        }\n    },\n    \n    \u003Cspan class=\"hljs-attr\">parseChartData\u003C/span>: \u003Cspan class=\"hljs-keyword\">function\u003C/span>(\u003Cspan class=\"hljs-params\">content\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Parse CSV-like data from content\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> lines = content.\u003Cspan class=\"hljs-title function_\">trim\u003C/span>().\u003Cspan class=\"hljs-title function_\">split\u003C/span>(\u003Cspan class=\"hljs-string\">'\\n'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> headers = lines[\u003Cspan class=\"hljs-number\">0\u003C/span>].\u003Cspan class=\"hljs-title function_\">split\u003C/span>(\u003Cspan class=\"hljs-string\">','\u003C/span>).\u003Cspan class=\"hljs-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">h\u003C/span> =>\u003C/span> h.\u003Cspan class=\"hljs-title function_\">trim\u003C/span>());\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> data = lines.\u003Cspan class=\"hljs-title function_\">slice\u003C/span>(\u003Cspan class=\"hljs-number\">1\u003C/span>).\u003Cspan class=\"hljs-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">line\u003C/span> =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> values = line.\u003Cspan class=\"hljs-title function_\">split\u003C/span>(\u003Cspan class=\"hljs-string\">','\u003C/span>).\u003Cspan class=\"hljs-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">v\u003C/span> =>\u003C/span> v.\u003Cspan class=\"hljs-title function_\">trim\u003C/span>());\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> row = {};\n            headers.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">header, index\u003C/span>) =>\u003C/span> {\n                row[header] = \u003Cspan class=\"hljs-built_in\">isNaN\u003C/span>(values[index]) ? values[index] : \u003Cspan class=\"hljs-built_in\">parseFloat\u003C/span>(values[index]);\n            });\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> row;\n        });\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> {\n            headers,\n            data\n        };\n    },\n    \n    \u003Cspan class=\"hljs-attr\">generateId\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-string\">'chart-'\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_\">substr\u003C/span>(\u003Cspan class=\"hljs-number\">2\u003C/span>, \u003Cspan class=\"hljs-number\">9\u003C/span>);\n    },\n    \n    \u003Cspan class=\"hljs-attr\">init\u003C/span>: \u003Cspan class=\"hljs-keyword\">function\u003C/span>(\u003Cspan class=\"hljs-params\">system\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">log\u003C/span>(\u003Cspan class=\"hljs-string\">'Chart plugin initialized'\u003C/span>);\n        \n        \u003Cspan class=\"hljs-comment\">// Load Chart.js if not already loaded\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-keyword\">typeof\u003C/span> \u003Cspan class=\"hljs-title class_\">Chart\u003C/span> === \u003Cspan class=\"hljs-string\">'undefined'\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">loadChartJS\u003C/span>();\n        }\n    },\n    \n    \u003Cspan class=\"hljs-attr\">loadChartJS\u003C/span>: \u003Cspan class=\"hljs-keyword\">function\u003C/span>(\u003Cspan class=\"hljs-params\">\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> = \u003Cspan class=\"hljs-string\">'https://cdn.jsdelivr.net/npm/chart.js'\u003C/span>;\n        script.\u003Cspan class=\"hljs-property\">onload\u003C/span> = \u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n            \u003Cspan class=\"hljs-comment\">// Initialize charts after Chart.js loads\u003C/span>\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">initializeCharts\u003C/span>();\n        };\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    \u003Cspan class=\"hljs-attr\">initializeCharts\u003C/span>: \u003Cspan class=\"hljs-keyword\">function\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'[data-chart-type]'\u003C/span>).\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">canvas\u003C/span> =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> chartType = canvas.\u003Cspan class=\"hljs-title function_\">getAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'data-chart-type'\u003C/span>);\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> chartData = \u003Cspan class=\"hljs-title class_\">JSON\u003C/span>.\u003Cspan class=\"hljs-title function_\">parse\u003C/span>(canvas.\u003Cspan class=\"hljs-title function_\">getAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'data-chart-data'\u003C/span>));\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> chartOptions = \u003Cspan class=\"hljs-title class_\">JSON\u003C/span>.\u003Cspan class=\"hljs-title function_\">parse\u003C/span>(canvas.\u003Cspan class=\"hljs-title function_\">getAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'data-chart-options'\u003C/span>) || \u003Cspan class=\"hljs-string\">'{}'\u003C/span>);\n            \n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">renderChart\u003C/span>(canvas, chartType, chartData, chartOptions);\n        });\n    },\n    \n    \u003Cspan class=\"hljs-attr\">renderChart\u003C/span>: \u003Cspan class=\"hljs-keyword\">function\u003C/span>(\u003Cspan class=\"hljs-params\">canvas, type, data, options\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> ctx = canvas.\u003Cspan class=\"hljs-title function_\">getContext\u003C/span>(\u003Cspan class=\"hljs-string\">'2d'\u003C/span>);\n        \n        \u003Cspan class=\"hljs-comment\">// Convert data format for Chart.js\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> chartData = {\n            \u003Cspan class=\"hljs-attr\">labels\u003C/span>: data.\u003Cspan class=\"hljs-property\">data\u003C/span>.\u003Cspan class=\"hljs-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">row\u003C/span> =>\u003C/span> row[data.\u003Cspan class=\"hljs-property\">headers\u003C/span>[\u003Cspan class=\"hljs-number\">0\u003C/span>]]),\n            \u003Cspan class=\"hljs-attr\">datasets\u003C/span>: [{\n                \u003Cspan class=\"hljs-attr\">label\u003C/span>: data.\u003Cspan class=\"hljs-property\">headers\u003C/span>[\u003Cspan class=\"hljs-number\">1\u003C/span>] || \u003Cspan class=\"hljs-string\">'Data'\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">data\u003C/span>: data.\u003Cspan class=\"hljs-property\">data\u003C/span>.\u003Cspan class=\"hljs-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">row\u003C/span> =>\u003C/span> row[data.\u003Cspan class=\"hljs-property\">headers\u003C/span>[\u003Cspan class=\"hljs-number\">1\u003C/span>]]),\n                \u003Cspan class=\"hljs-attr\">backgroundColor\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">generateColors\u003C/span>(data.\u003Cspan class=\"hljs-property\">data\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span>),\n                \u003Cspan class=\"hljs-attr\">borderColor\u003C/span>: options.\u003Cspan class=\"hljs-property\">borderColor\u003C/span> || \u003Cspan class=\"hljs-string\">'#007cba'\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">borderWidth\u003C/span>: options.\u003Cspan class=\"hljs-property\">borderWidth\u003C/span> || \u003Cspan class=\"hljs-number\">1\u003C/span>\n            }]\n        };\n        \n        \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Chart\u003C/span>(ctx, {\n            \u003Cspan class=\"hljs-attr\">type\u003C/span>: type,\n            \u003Cspan class=\"hljs-attr\">data\u003C/span>: chartData,\n            \u003Cspan class=\"hljs-attr\">options\u003C/span>: {\n                \u003Cspan class=\"hljs-attr\">responsive\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">plugins\u003C/span>: {\n                    \u003Cspan class=\"hljs-attr\">title\u003C/span>: {\n                        \u003Cspan class=\"hljs-attr\">display\u003C/span>: !!options.\u003Cspan class=\"hljs-property\">title\u003C/span>,\n                        \u003Cspan class=\"hljs-attr\">text\u003C/span>: options.\u003Cspan class=\"hljs-property\">title\u003C/span> || \u003Cspan class=\"hljs-string\">''\u003C/span>\n                    }\n                },\n                ...options\n            }\n        });\n    },\n    \n    \u003Cspan class=\"hljs-attr\">generateColors\u003C/span>: \u003Cspan class=\"hljs-keyword\">function\u003C/span>(\u003Cspan class=\"hljs-params\">count\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> colors = [\n            \u003Cspan class=\"hljs-string\">'#FF6384'\u003C/span>, \u003Cspan class=\"hljs-string\">'#36A2EB'\u003C/span>, \u003Cspan class=\"hljs-string\">'#FFCE56'\u003C/span>, \u003Cspan class=\"hljs-string\">'#4BC0C0'\u003C/span>,\n            \u003Cspan class=\"hljs-string\">'#9966FF'\u003C/span>, \u003Cspan class=\"hljs-string\">'#FF9F40'\u003C/span>, \u003Cspan class=\"hljs-string\">'#FF6384'\u003C/span>, \u003Cspan class=\"hljs-string\">'#C9CBCF'\u003C/span>\n        ];\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">from\u003C/span>({\u003Cspan class=\"hljs-attr\">length\u003C/span>: count}, \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">_, i\u003C/span>) =>\u003C/span> colors[i % colors.\u003Cspan class=\"hljs-property\">length\u003C/span>]);\n    }\n};\n\u003C/code>\u003C/pre>\u003Cpre>\u003Ccode class=\"hljs language-javascript\">\u003Cspan class=\"hljs-keyword\">const\u003C/span> interactivePlugin = {\n    \u003Cspan class=\"hljs-attr\">name\u003C/span>: \u003Cspan class=\"hljs-string\">'interactive'\u003C/span>,\n    \u003Cspan class=\"hljs-attr\">version\u003C/span>: \u003Cspan class=\"hljs-string\">'1.0.0'\u003C/span>,\n    \u003Cspan class=\"hljs-attr\">description\u003C/span>: \u003Cspan class=\"hljs-string\">'Adds interactive content directives'\u003C/span>,\n    \n    \u003Cspan class=\"hljs-attr\">directives\u003C/span>: {\n        \u003Cspan class=\"hljs-string\">'accordion'\u003C/span>: \u003Cspan class=\"hljs-keyword\">function\u003C/span>(\u003Cspan class=\"hljs-params\">context\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> { content, params } = context;\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> accordionId = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">generateId\u003C/span>();\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> items = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">parseAccordionItems\u003C/span>(content);\n            \n            \u003Cspan class=\"hljs-keyword\">let\u003C/span> html = \u003Cspan class=\"hljs-string\">`<div class="accordion" id="\u003Cspan class=\"hljs-subst\">${accordionId}\u003C/span>">`\u003C/span>;\n            \n            items.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">item, index\u003C/span>) =>\u003C/span> {\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> itemId = \u003Cspan class=\"hljs-string\">`\u003Cspan class=\"hljs-subst\">${accordionId}\u003C/span>-item-\u003Cspan class=\"hljs-subst\">${index}\u003C/span>`\u003C/span>;\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> expanded = params.\u003Cspan class=\"hljs-property\">expanded\u003C/span> && params.\u003Cspan class=\"hljs-property\">expanded\u003C/span>.\u003Cspan class=\"hljs-title function_\">includes\u003C/span>(index.\u003Cspan class=\"hljs-title function_\">toString\u003C/span>());\n                \n                html += \u003Cspan class=\"hljs-string\">`\n<div class="accordion-item">\n    <div class="accordion-header">\n        <button class="accordion-button\u003Cspan class=\"hljs-subst\">${expanded ? \u003Cspan class=\"hljs-string\">''\u003C/span> : \u003Cspan class=\"hljs-string\">' collapsed'\u003C/span>}\u003C/span>" \n                type="button" \n                data-toggle="collapse" \n                data-target="#\u003Cspan class=\"hljs-subst\">${itemId}\u003C/span>" \n                aria-expanded="\u003Cspan class=\"hljs-subst\">${expanded}\u003C/span>" \n                aria-controls="\u003Cspan class=\"hljs-subst\">${itemId}\u003C/span>">\n            \u003Cspan class=\"hljs-subst\">${item.title}\u003C/span>\n        </button>\n    </div>\n    <div id="\u003Cspan class=\"hljs-subst\">${itemId}\u003C/span>" class="accordion-collapse collapse\u003Cspan class=\"hljs-subst\">${expanded ? \u003Cspan class=\"hljs-string\">' show'\u003C/span> : \u003Cspan class=\"hljs-string\">''\u003C/span>}\u003C/span>" data-parent="#\u003Cspan class=\"hljs-subst\">${accordionId}\u003C/span>">\n        <div class="accordion-body">\n            \u003Cspan class=\"hljs-subst\">${item.content}\u003C/span>\n        </div>\n    </div>\n</div>`\u003C/span>;\n            });\n            \n            html += \u003Cspan class=\"hljs-string\">'</div>'\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> html;\n        },\n        \n        \u003Cspan class=\"hljs-string\">'collapsible'\u003C/span>: \u003Cspan class=\"hljs-keyword\">function\u003C/span>(\u003Cspan class=\"hljs-params\">context\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> { content, params } = context;\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> collapsibleId = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">generateId\u003C/span>();\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> title = params.\u003Cspan class=\"hljs-property\">title\u003C/span> || \u003Cspan class=\"hljs-string\">'Click to expand'\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> expanded = params.\u003Cspan class=\"hljs-property\">expanded\u003C/span> === \u003Cspan class=\"hljs-string\">'true'\u003C/span>;\n            \n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">`\n<div class="collapsible">\n    <button class="collapsible-toggle\u003Cspan class=\"hljs-subst\">${expanded ? \u003Cspan class=\"hljs-string\">' expanded'\u003C/span> : \u003Cspan class=\"hljs-string\">''\u003C/span>}\u003C/span>" \n            data-target="#\u003Cspan class=\"hljs-subst\">${collapsibleId}\u003C/span>" \n            aria-expanded="\u003Cspan class=\"hljs-subst\">${expanded}\u003C/span>">\n        <span class="toggle-icon">\u003Cspan class=\"hljs-subst\">${expanded ? \u003Cspan class=\"hljs-string\">'▼'\u003C/span> : \u003Cspan class=\"hljs-string\">'▶'\u003C/span>}\u003C/span></span>\n        \u003Cspan class=\"hljs-subst\">${title}\u003C/span>\n    </button>\n    <div id="\u003Cspan class=\"hljs-subst\">${collapsibleId}\u003C/span>" class="collapsible-content\u003Cspan class=\"hljs-subst\">${expanded ? \u003Cspan class=\"hljs-string\">' show'\u003C/span> : \u003Cspan class=\"hljs-string\">''\u003C/span>}\u003C/span>">\n        <div class="collapsible-body">\n            \u003Cspan class=\"hljs-subst\">${content}\u003C/span>\n        </div>\n    </div>\n</div>`\u003C/span>;\n        },\n        \n        \u003Cspan class=\"hljs-string\">'modal'\u003C/span>: \u003Cspan class=\"hljs-keyword\">function\u003C/span>(\u003Cspan class=\"hljs-params\">context\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> { content, params } = context;\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> modalId = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">generateId\u003C/span>();\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> title = params.\u003Cspan class=\"hljs-property\">title\u003C/span> || \u003Cspan class=\"hljs-string\">''\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> triggerText = params.\u003Cspan class=\"hljs-property\">trigger\u003C/span> || \u003Cspan class=\"hljs-string\">'Open Modal'\u003C/span>;\n            \n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">`\n<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#\u003Cspan class=\"hljs-subst\">${modalId}\u003C/span>">\n    \u003Cspan class=\"hljs-subst\">${triggerText}\u003C/span>\n</button>\n<div class="modal fade" id="\u003Cspan class=\"hljs-subst\">${modalId}\u003C/span>" tabindex="-1" aria-hidden="true">\n    <div class="modal-dialog">\n        <div class="modal-content">\n            \u003Cspan class=\"hljs-subst\">${title ? \u003Cspan class=\"hljs-string\">`<div class="modal-header">\n                <h5 class="modal-title">\u003Cspan class=\"hljs-subst\">${title}\u003C/span></h5>\n                <button type="button" class="btn-close" data-dismiss="modal"></button>\n            </div>`\u003C/span> : \u003Cspan class=\"hljs-string\">''\u003C/span>}\u003C/span>\n            <div class="modal-body">\n                \u003Cspan class=\"hljs-subst\">${content}\u003C/span>\n            </div>\n            <div class="modal-footer">\n                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>\n            </div>\n        </div>\n    </div>\n</div>`\u003C/span>;\n        }\n    },\n    \n    \u003Cspan class=\"hljs-attr\">parseAccordionItems\u003C/span>: \u003Cspan class=\"hljs-keyword\">function\u003C/span>(\u003Cspan class=\"hljs-params\">content\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> sections = content.\u003Cspan class=\"hljs-title function_\">split\u003C/span>(\u003Cspan class=\"hljs-regexp\">/^## /m\u003C/span>).\u003Cspan class=\"hljs-title function_\">filter\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">section\u003C/span> =>\u003C/span> section.\u003Cspan class=\"hljs-title function_\">trim\u003C/span>());\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> sections.\u003Cspan class=\"hljs-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">section\u003C/span> =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> lines = section.\u003Cspan class=\"hljs-title function_\">trim\u003C/span>().\u003Cspan class=\"hljs-title function_\">split\u003C/span>(\u003Cspan class=\"hljs-string\">'\\n'\u003C/span>);\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> title = lines[\u003Cspan class=\"hljs-number\">0\u003C/span>];\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> content = lines.\u003Cspan class=\"hljs-title function_\">slice\u003C/span>(\u003Cspan class=\"hljs-number\">1\u003C/span>).\u003Cspan class=\"hljs-title function_\">join\u003C/span>(\u003Cspan class=\"hljs-string\">'\\n'\u003C/span>).\u003Cspan class=\"hljs-title function_\">trim\u003C/span>();\n            \n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> { title, content };\n        });\n    },\n    \n    \u003Cspan class=\"hljs-attr\">generateId\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-string\">'interactive-'\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_\">substr\u003C/span>(\u003Cspan class=\"hljs-number\">2\u003C/span>, \u003Cspan class=\"hljs-number\">9\u003C/span>);\n    },\n    \n    \u003Cspan class=\"hljs-attr\">init\u003C/span>: \u003Cspan class=\"hljs-keyword\">function\u003C/span>(\u003Cspan class=\"hljs-params\">system\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">log\u003C/span>(\u003Cspan class=\"hljs-string\">'Interactive plugin initialized'\u003C/span>);\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">addEventListeners\u003C/span>();\n    },\n    \n    \u003Cspan class=\"hljs-attr\">addEventListeners\u003C/span>: \u003Cspan class=\"hljs-keyword\">function\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'click'\u003C/span>, \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">e\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-comment\">// Handle collapsible toggles\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (e.\u003Cspan class=\"hljs-property\">target\u003C/span>.\u003Cspan class=\"hljs-title function_\">matches\u003C/span>(\u003Cspan class=\"hljs-string\">'.collapsible-toggle'\u003C/span>)) {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">toggleCollapsible\u003C/span>(e.\u003Cspan class=\"hljs-property\">target\u003C/span>);\n            }\n            \n            \u003Cspan class=\"hljs-comment\">// Handle accordion buttons\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (e.\u003Cspan class=\"hljs-property\">target\u003C/span>.\u003Cspan class=\"hljs-title function_\">matches\u003C/span>(\u003Cspan class=\"hljs-string\">'.accordion-button'\u003C/span>)) {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">toggleAccordion\u003C/span>(e.\u003Cspan class=\"hljs-property\">target\u003C/span>);\n            }\n        });\n    },\n    \n    \u003Cspan class=\"hljs-attr\">toggleCollapsible\u003C/span>: \u003Cspan class=\"hljs-keyword\">function\u003C/span>(\u003Cspan class=\"hljs-params\">button\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> targetId = button.\u003Cspan class=\"hljs-title function_\">getAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'data-target'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> content = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(targetId);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> icon = button.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'.toggle-icon'\u003C/span>);\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (content.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">contains\u003C/span>(\u003Cspan class=\"hljs-string\">'show'\u003C/span>)) {\n            content.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">remove\u003C/span>(\u003Cspan class=\"hljs-string\">'show'\u003C/span>);\n            button.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">remove\u003C/span>(\u003Cspan class=\"hljs-string\">'expanded'\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            icon.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = \u003Cspan class=\"hljs-string\">'▶'\u003C/span>;\n        } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n            content.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">add\u003C/span>(\u003Cspan class=\"hljs-string\">'show'\u003C/span>);\n            button.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">add\u003C/span>(\u003Cspan class=\"hljs-string\">'expanded'\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            icon.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = \u003Cspan class=\"hljs-string\">'▼'\u003C/span>;\n        }\n    },\n    \n    \u003Cspan class=\"hljs-attr\">toggleAccordion\u003C/span>: \u003Cspan class=\"hljs-keyword\">function\u003C/span>(\u003Cspan class=\"hljs-params\">button\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> targetId = button.\u003Cspan class=\"hljs-title function_\">getAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'data-target'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> content = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(targetId);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> accordion = button.\u003Cspan class=\"hljs-title function_\">closest\u003C/span>(\u003Cspan class=\"hljs-string\">'.accordion'\u003C/span>);\n        \n        \u003Cspan class=\"hljs-comment\">// Close other items in the same accordion\u003C/span>\n        accordion.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'.accordion-collapse.show'\u003C/span>).\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">item\u003C/span> =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (item !== content) {\n                item.\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-keyword\">const\u003C/span> otherButton = accordion.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">`[data-target="#\u003Cspan class=\"hljs-subst\">${item.id}\u003C/span>"]`\u003C/span>);\n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (otherButton) {\n                    otherButton.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">add\u003C/span>(\u003Cspan class=\"hljs-string\">'collapsed'\u003C/span>);\n                    otherButton.\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        \n        \u003Cspan class=\"hljs-comment\">// Toggle current item\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (content.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">contains\u003C/span>(\u003Cspan class=\"hljs-string\">'show'\u003C/span>)) {\n            content.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">remove\u003C/span>(\u003Cspan class=\"hljs-string\">'show'\u003C/span>);\n            button.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">add\u003C/span>(\u003Cspan class=\"hljs-string\">'collapsed'\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        } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n            content.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">add\u003C/span>(\u003Cspan class=\"hljs-string\">'show'\u003C/span>);\n            button.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">remove\u003C/span>(\u003Cspan class=\"hljs-string\">'collapsed'\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        }\n    }\n};\n\n\u003Cspan class=\"hljs-comment\">// Initialize plugin system\u003C/span>\n\u003Cspan class=\"hljs-keyword\">const\u003C/span> pluginSystem = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">MarkdownDirectivePluginSystem\u003C/span>();\n\n\u003Cspan class=\"hljs-comment\">// Register plugins\u003C/span>\npluginSystem.\u003Cspan class=\"hljs-title function_\">registerPlugin\u003C/span>(\u003Cspan class=\"hljs-string\">'charts'\u003C/span>, chartPlugin);\npluginSystem.\u003Cspan class=\"hljs-title function_\">registerPlugin\u003C/span>(\u003Cspan class=\"hljs-string\">'interactive'\u003C/span>, interactivePlugin);\n\n\u003Cspan class=\"hljs-comment\">// Export for use\u003C/span>\n\u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-property\">markdownPluginSystem\u003C/span> = pluginSystem;\n\u003C/code>\u003C/pre>\u003Ch2 id=\"static-site-generator-integration\">Static Site Generator Integration\u003C/h2>\n\u003Ch3 id=\"jekyll-liquid-extension\">Jekyll Liquid Extension\u003C/h3>\n\u003Cp>Create Jekyll-compatible directive processing:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-liquid\">\n<!-- _plugins/directive_processor.rb -->\nrequire 'liquid'\n\nmodule Jekyll\n  class DirectiveProcessor < Liquid::Block\n    def initialize(tag_name, params, tokens)\n      super\n      @directive_name = tag_name\n      @params = parse_params(params)\n    end\n\n    def render(context)\n      content = super\n      \n      case @directive_name\n      when 'info'\n        render_info_block(content, @params)\n      when 'warning'\n        render_warning_block(content, @params)\n      when 'code_example'\n        render_code_example(content, @params)\n      when 'definition'\n        render_definition(content, @params)\n      else\n        content\n      end\n    end\n\n    private\n\n    def parse_params(param_string)\n      params = {}\n      return params if param_string.nil?\n\n      # Parse key="value" pairs\n      param_string.scan(/(\\w+)="([^"]*)"/) do |key, value|\n        params[key] = value\n      end\n\n      # Parse key=value pairs\n      param_string.scan(/(\\w+)=(\\w+)/) do |key, value|\n        params[key] = value unless params.key?(key)\n      end\n\n      params\n    end\n\n    def render_info_block(content, params)\n      title = params['title'] || ''\n      icon = params['icon'] || 'ℹ️'\n      \n      <<~HTML\n        <div class="directive-block directive-info">\n          #{title.empty? ? '' : %(<div class="directive-header">\n            <span class="directive-icon">#{icon}</span>\n            <span class="directive-title">#{title}</span>\n          </div>)}\n          <div class="directive-content">\n            #{markdownify(content)}\n          </div>\n        </div>\n      HTML\n    end\n\n    def render_warning_block(content, params)\n      title = params['title'] || 'Warning'\n      icon = params['icon'] || '⚠️'\n      \n      <<~HTML\n        <div class="directive-block directive-warning">\n          <div class="directive-header">\n            <span class="directive-icon">#{icon}</span>\n            <span class="directive-title">#{title}</span>\n          </div>\n          <div class="directive-content">\n            #{markdownify(content)}\n          </div>\n        </div>\n      HTML\n    end\n\n    def render_code_example(content, params)\n      language = params['language'] || 'text'\n      filename = params['filename'] || ''\n      \n      <<~HTML\n        <div class="directive-block directive-code-example">\n          #{filename.empty? ? '' : %(<div class="code-filename">#{filename}</div>)}\n          <div class="code-container">\n            <pre class="code-block language-#{language}"><code>#{content.strip}</code></pre>\n          </div>\n        </div>\n      HTML\n    end\n\n    def render_definition(content, params)\n      term = params['term'] || ''\n      \n      <<~HTML\n        <div class="directive-block directive-definition">\n          <div class="definition-term">#{term}</div>\n          <div class="definition-content">\n            #{markdownify(content)}\n          </div>\n        </div>\n      HTML\n    end\n\n    def markdownify(content)\n      Jekyll::Converters::Markdown.new({}).convert(content)\n    end\n  end\nend\n\n# Register directive tags\nLiquid::Template.register_tag('info', Jekyll::DirectiveProcessor)\nLiquid::Template.register_tag('warning', Jekyll::DirectiveProcessor)\nLiquid::Template.register_tag('code_example', Jekyll::DirectiveProcessor)\nLiquid::Template.register_tag('definition', Jekyll::DirectiveProcessor)\n\n<!-- Usage in Markdown files: -->\n{% info title="Important Information" %}\nThis is important information that readers should notice.\nIt supports **markdown formatting** and `inline code`.\n{% endinfo %}\n\n{% warning title="Critical Warning" %}\nThis is a critical warning with important safety information.\n{% endwarning %}\n\n{% code_example language="javascript" filename="example.js" %}\nfunction exampleFunction() {\n    console.log("This is an example");\n}\n{% endcode_example %}\n\n{% definition term="API Endpoint" %}\nAn API endpoint is a specific URL where an API can be accessed by a client application.\n{% enddefinition %}\n\u003C/code>\u003C/pre>\u003Ch3 id=\"hugo-shortcode-system\">Hugo Shortcode System\u003C/h3>\n\u003Cp>Advanced shortcode implementations for Hugo:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-go\">\u003Cspan class=\"hljs-comment\">// layouts/shortcodes/directive.html\u003C/span>\n{{ $\u003Cspan class=\"hljs-keyword\">type\u003C/span> := .Get \u003Cspan class=\"hljs-string\">"type"\u003C/span> | \u003Cspan class=\"hljs-keyword\">default\u003C/span> \u003Cspan class=\"hljs-string\">"info"\u003C/span> }}\n{{ $title := .Get \u003Cspan class=\"hljs-string\">"title"\u003C/span> }}\n{{ $icon := .Get \u003Cspan class=\"hljs-string\">"icon"\u003C/span> }}\n\n<div class=\u003Cspan class=\"hljs-string\">"directive-block directive-{{ $type }}"\u003C/span>>\n  {{ \u003Cspan class=\"hljs-keyword\">if\u003C/span> $title }}\n  <div class=\u003Cspan class=\"hljs-string\">"directive-header"\u003C/span>>\n    {{ \u003Cspan class=\"hljs-keyword\">if\u003C/span> $icon }}\n    <span class=\u003Cspan class=\"hljs-string\">"directive-icon"\u003C/span>>{{ $icon }}</span>\n    {{ \u003Cspan class=\"hljs-keyword\">else\u003C/span> }}\n    {{ \u003Cspan class=\"hljs-keyword\">if\u003C/span> eq $\u003Cspan class=\"hljs-keyword\">type\u003C/span> \u003Cspan class=\"hljs-string\">"info"\u003C/span> }}<span class=\u003Cspan class=\"hljs-string\">"directive-icon"\u003C/span>>ℹ️</span>{{ end }}\n    {{ \u003Cspan class=\"hljs-keyword\">if\u003C/span> eq $\u003Cspan class=\"hljs-keyword\">type\u003C/span> \u003Cspan class=\"hljs-string\">"warning"\u003C/span> }}<span class=\u003Cspan class=\"hljs-string\">"directive-icon"\u003C/span>>⚠️</span>{{ end }}\n    {{ \u003Cspan class=\"hljs-keyword\">if\u003C/span> eq $\u003Cspan class=\"hljs-keyword\">type\u003C/span> \u003Cspan class=\"hljs-string\">"example"\u003C/span> }}<span class=\u003Cspan class=\"hljs-string\">"directive-icon"\u003C/span>>💡</span>{{ end }}\n    {{ end }}\n    <span class=\u003Cspan class=\"hljs-string\">"directive-title"\u003C/span>>{{ $title }}</span>\n  </div>\n  {{ end }}\n  <div class=\u003Cspan class=\"hljs-string\">"directive-content"\u003C/span>>\n    {{ .Inner | markdownify }}\n  </div>\n</div>\n\u003C/code>\u003C/pre>\u003Cpre>\u003Ccode class=\"hljs language-go\">\u003Cspan class=\"hljs-comment\">// layouts/shortcodes/tabs.html\u003C/span>\n{{ $tabsId := printf \u003Cspan class=\"hljs-string\">"tabs-%d"\u003C/span> (rand \u003Cspan class=\"hljs-number\">1000\u003C/span>) }}\n<div class=\u003Cspan class=\"hljs-string\">"directive-tabs"\u003C/span> data-tabs-id=\u003Cspan class=\"hljs-string\">"{{ $tabsId }}"\u003C/span>>\n  <div class=\u003Cspan class=\"hljs-string\">"tab-headers"\u003C/span>>\n    {{ \u003Cspan class=\"hljs-keyword\">range\u003C/span> $index, $tab := .Params.tabs }}\n    <button class=\u003Cspan class=\"hljs-string\">"tab-header{{ if eq $index 0 }} active{{ end }}"\u003C/span> data-tab=\u003Cspan class=\"hljs-string\">"{{ $index }}"\u003C/span>>\n      {{ $tab.title }}\n    </button>\n    {{ end }}\n  </div>\n  <div class=\u003Cspan class=\"hljs-string\">"tab-contents"\u003C/span>>\n    {{ \u003Cspan class=\"hljs-keyword\">range\u003C/span> $index, $tab := .Params.tabs }}\n    <div class=\u003Cspan class=\"hljs-string\">"tab-content{{ if eq $index 0 }} active{{ end }}"\u003C/span> data-tab=\u003Cspan class=\"hljs-string\">"{{ $index }}"\u003C/span>>\n      {{ $tab.content | markdownify }}\n    </div>\n    {{ end }}\n  </div>\n</div>\n\u003C/code>\u003C/pre>\u003Cp>Usage in Hugo Markdown:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">{{< directive type="info" title="Getting Started" >}}\nThis is an information block with \u003Cspan class=\"hljs-strong\">**markdown**\u003C/span> support.\n{{< /directive >}}\n\n{{< directive type="warning" title="Important Notice" >}}\nThis is a warning with critical information.\n{{< /directive >}}\n\n{{< tabs >}}\n{{< tab title="JavaScript" >}}\n\u003Cspan class=\"hljs-code\">```javascript\nconsole.log("Hello World");\u003C/span>\n\u003C/code>\u003C/pre>\u003Cp>{{< /tab >}}\u003Cbr>{{< tab title="Python" >}}\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-python\">\u003Cspan class=\"hljs-built_in\">print\u003C/span>(\u003Cspan class=\"hljs-string\">"Hello World"\u003C/span>)\n\u003C/code>\u003C/pre>\u003Cp>{{< /tab >}}\u003Cbr>{{< /tabs >}}\u003C/p>\n\u003Cpre>\u003Ccode>\n\n## Security and Performance Considerations\n\n### Secure Directive Processing\n\nImplement security measures for custom directives:\n\n\n```javascript\n// secure-directive-processor.js - Security-focused directive processing\nclass SecureDirectiveProcessor {\n    constructor(options = {}) {\n        this.securityConfig = {\n            allowedTags: ['div', 'span', 'p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'code', 'pre', 'strong', 'em'],\n            allowedAttributes: ['class', 'id', 'data-*', 'aria-*'],\n            allowedProtocols: ['http:', 'https:', 'mailto:'],\n            maxDirectiveDepth: 5,\n            maxContentLength: 50000,\n            sanitizeHTML: true,\n            ...options.security\n        };\n        \n        this.performanceConfig = {\n            maxDirectivesPerDocument: 500,\n            processingTimeout: 5000,\n            enableCaching: true,\n            cacheSize: 1000,\n            ...options.performance\n        };\n        \n        this.cache = new Map();\n        this.stats = {\n            processed: 0,\n            cached: 0,\n            errors: 0,\n            securityViolations: 0\n        };\n    }\n    \n    processContent(content) {\n        try {\n            // Pre-processing security checks\n            if (!this.validateContent(content)) {\n                throw new Error('Content validation failed');\n            }\n            \n            // Check cache first\n            const cacheKey = this.generateCacheKey(content);\n            if (this.performanceConfig.enableCaching && this.cache.has(cacheKey)) {\n                this.stats.cached++;\n                return this.cache.get(cacheKey);\n            }\n            \n            // Process with timeout\n            const result = this.processWithTimeout(content);\n            \n            // Cache result\n            if (this.performanceConfig.enableCaching) {\n                this.cacheResult(cacheKey, result);\n            }\n            \n            this.stats.processed++;\n            return result;\n            \n        } catch (error) {\n            this.stats.errors++;\n            console.error('Directive processing error:', error);\n            return this.createErrorResponse(error);\n        }\n    }\n    \n    validateContent(content) {\n        // Length validation\n        if (content.length > this.securityConfig.maxContentLength) {\n            this.stats.securityViolations++;\n            return false;\n        }\n        \n        // Check for suspicious patterns\n        const suspiciousPatterns = [\n            /<script\\b[^<]*(?:(?!<\\/script>)<[^<]*)*<\\/script>/gi,\n            /javascript:/gi,\n            /on\\w+\\s*=/gi,\n            /data:(?!image\\/[png|jpg|jpeg|gif|svg])/gi\n        ];\n        \n        for (const pattern of suspiciousPatterns) {\n            if (pattern.test(content)) {\n                this.stats.securityViolations++;\n                return false;\n            }\n        }\n        \n        return true;\n    }\n    \n    processWithTimeout(content) {\n        return new Promise((resolve, reject) => {\n            const timeout = setTimeout(() => {\n                reject(new Error('Processing timeout exceeded'));\n            }, this.performanceConfig.processingTimeout);\n            \n            try {\n                const result = this.processDirectives(content);\n                clearTimeout(timeout);\n                resolve(result);\n            } catch (error) {\n                clearTimeout(timeout);\n                reject(error);\n            }\n        });\n    }\n    \n    processDirectives(content) {\n        // Count directives to prevent abuse\n        const directiveCount = (content.match(/:::\\w+/g) || []).length;\n        if (directiveCount > this.performanceConfig.maxDirectivesPerDocument) {\n            throw new Error('Too many directives in document');\n        }\n        \n        // Process with depth tracking\n        return this.processWithDepthTracking(content, 0);\n    }\n    \n    processWithDepthTracking(content, depth) {\n        if (depth > this.securityConfig.maxDirectiveDepth) {\n            throw new Error('Maximum directive nesting depth exceeded');\n        }\n        \n        // Process directives at current level\n        const directivePattern = /:::(\\w+)(?:\\s+([^\\n]*))?\\n([\\s\\S]*?)\\n:::/g;\n        \n        return content.replace(directivePattern, (match, type, params, innerContent) => {\n            // Validate directive type\n            if (!this.isAllowedDirective(type)) {\n                this.stats.securityViolations++;\n                return this.createSecurityError(`Directive type '${type}' not allowed`);\n            }\n            \n            // Sanitize parameters\n            const sanitizedParams = this.sanitizeParameters(params);\n            \n            // Process nested content\n            const processedContent = this.processWithDepthTracking(innerContent, depth + 1);\n            \n            // Generate directive HTML\n            const html = this.generateDirectiveHTML(type, sanitizedParams, processedContent);\n            \n            // Sanitize output HTML\n            return this.sanitizeHTML(html);\n        });\n    }\n    \n    isAllowedDirective(type) {\n        const allowedDirectives = [\n            'info', 'warning', 'example', 'definition', \n            'code-example', 'tab-group', 'tab'\n        ];\n        return allowedDirectives.includes(type);\n    }\n    \n    sanitizeParameters(paramString) {\n        if (!paramString) return {};\n        \n        const params = {};\n        const paramPattern = /(\\w+)="([^"]*)"/g;\n        let match;\n        \n        while ((match = paramPattern.exec(paramString)) !== null) {\n            const key = match[1];\n            const value = match[2];\n            \n            // Validate parameter name\n            if (!/^\\w+$/.test(key)) {\n                continue;\n            }\n            \n            // Sanitize parameter value\n            params[key] = this.sanitizeParameterValue(value);\n        }\n        \n        return params;\n    }\n    \n    sanitizeParameterValue(value) {\n        // Remove potentially dangerous content\n        return value\n            .replace(/[<>'"]/g, '')\n            .replace(/javascript:/gi, '')\n            .replace(/on\\w+/gi, '')\n            .substring(0, 200); // Limit length\n    }\n    \n    sanitizeHTML(html) {\n        if (!this.securityConfig.sanitizeHTML) {\n            return html;\n        }\n        \n        // Basic HTML sanitization\n        const div = document.createElement('div');\n        div.innerHTML = html;\n        \n        // Remove disallowed tags\n        this.removeDisallowedElements(div);\n        \n        // Sanitize attributes\n        this.sanitizeAttributes(div);\n        \n        return div.innerHTML;\n    }\n    \n    removeDisallowedElements(container) {\n        const elements = container.querySelectorAll('*');\n        elements.forEach(element => {\n            if (!this.securityConfig.allowedTags.includes(element.tagName.toLowerCase())) {\n                element.remove();\n            }\n        });\n    }\n    \n    sanitizeAttributes(container) {\n        const elements = container.querySelectorAll('*');\n        elements.forEach(element => {\n            const attributesToRemove = [];\n            \n            for (const attr of element.attributes) {\n                if (!this.isAllowedAttribute(attr.name)) {\n                    attributesToRemove.push(attr.name);\n                } else if (attr.name === 'href' || attr.name === 'src') {\n                    if (!this.isAllowedURL(attr.value)) {\n                        attributesToRemove.push(attr.name);\n                    }\n                }\n            }\n            \n            attributesToRemove.forEach(attrName => {\n                element.removeAttribute(attrName);\n            });\n        });\n    }\n    \n    isAllowedAttribute(attrName) {\n        return this.securityConfig.allowedAttributes.some(allowed => {\n            if (allowed.endsWith('*')) {\n                return attrName.startsWith(allowed.slice(0, -1));\n            }\n            return attrName === allowed;\n        });\n    }\n    \n    isAllowedURL(url) {\n        try {\n            const parsed = new URL(url, window.location.href);\n            return this.securityConfig.allowedProtocols.includes(parsed.protocol);\n        } catch {\n            return false;\n        }\n    }\n    \n    generateDirectiveHTML(type, params, content) {\n        // Use safe HTML generation methods\n        switch (type) {\n            case 'info':\n                return this.generateInfoDirective(params, content);\n            case 'warning':\n                return this.generateWarningDirective(params, content);\n            default:\n                return content;\n        }\n    }\n    \n    generateInfoDirective(params, content) {\n        const title = params.title || '';\n        return `\n<div class="directive-block directive-info">\n    ${title ? `<div class="directive-header">\n        <span class="directive-title">${this.escapeHTML(title)}</span>\n    </div>` : ''}\n    <div class="directive-content">${content}</div>\n</div>`;\n    }\n    \n    generateWarningDirective(params, content) {\n        const title = params.title || 'Warning';\n        return `\n<div class="directive-block directive-warning">\n    <div class="directive-header">\n        <span class="directive-title">${this.escapeHTML(title)}</span>\n    </div>\n    <div class="directive-content">${content}</div>\n</div>`;\n    }\n    \n    escapeHTML(text) {\n        const div = document.createElement('div');\n        div.textContent = text;\n        return div.innerHTML;\n    }\n    \n    generateCacheKey(content) {\n        // Simple hash function for cache keys\n        let hash = 0;\n        for (let i = 0; i < content.length; i++) {\n            const char = content.charCodeAt(i);\n            hash = ((hash << 5) - hash) + char;\n            hash = hash & hash; // Convert to 32bit integer\n        }\n        return hash.toString();\n    }\n    \n    cacheResult(key, result) {\n        if (this.cache.size >= this.performanceConfig.cacheSize) {\n            // Remove oldest entry\n            const firstKey = this.cache.keys().next().value;\n            this.cache.delete(firstKey);\n        }\n        \n        this.cache.set(key, result);\n    }\n    \n    createErrorResponse(error) {\n        return `<div class="directive-error">Error processing directives: ${this.escapeHTML(error.message)}</div>`;\n    }\n    \n    createSecurityError(message) {\n        return `<div class="directive-security-error">Security violation: ${this.escapeHTML(message)}</div>`;\n    }\n    \n    getStats() {\n        return {\n            ...this.stats,\n            cacheSize: this.cache.size,\n            cacheHitRate: this.stats.cached / (this.stats.processed + this.stats.cached)\n        };\n    }\n    \n    clearCache() {\n        this.cache.clear();\n    }\n}\n\n// Initialize secure processor\nconst secureProcessor = new SecureDirectiveProcessor({\n    security: {\n        allowedTags: ['div', 'span', 'p', 'code', 'pre', 'strong', 'em', 'h1', 'h2', 'h3', 'h4'],\n        allowedAttributes: ['class', 'id', 'data-*', 'aria-*'],\n        maxDirectiveDepth: 3,\n        maxContentLength: 100000\n    },\n    performance: {\n        maxDirectivesPerDocument: 200,\n        processingTimeout: 3000,\n        enableCaching: true\n    }\n});\n\u003C/code>\u003C/pre>\u003Ch2 id=\"integration-with-modern-documentation-systems\">Integration with Modern Documentation Systems\u003C/h2>\n\u003Cp>Custom directive systems integrate seamlessly with comprehensive content management platforms. When combined with \u003Ca href=\"/blog/markdown-automation-workflows-complete-guide\">automation workflows and content processing\u003C/a>, custom directives enable sophisticated build processes that can validate content, generate interactive components, and maintain consistency across large documentation projects.\u003C/p>\n\u003Cp>For advanced content architectures, directive systems work effectively with \u003Ca href=\"/blog/markdown-progressive-web-app-documentation-complete-guide\">Progressive Web App documentation platforms\u003C/a> to provide offline functionality, cached interactive components, and enhanced user experiences for technical documentation systems.\u003C/p>\n\u003Cp>When building comprehensive documentation ecosystems, custom directives complement \u003Ca href=\"/blog/markdown-table-performance-optimization-large-datasets-guide\">advanced table management and data presentation systems\u003C/a> by enabling contextual content blocks, interactive data visualizations, and sophisticated information organization patterns.\u003C/p>\n\u003Ch2 id=\"conclusion\">Conclusion\u003C/h2>\n\u003Cp>Custom Markdown directives and block extensions transform static content into dynamic, interactive documentation platforms that maintain Markdown's simplicity while providing powerful extensibility. By implementing systematic directive processors, creating reusable content components, and establishing secure extension architectures, technical teams can build sophisticated content management systems that scale with project requirements while maintaining consistency and performance.\u003C/p>\n\u003Cp>The key to successful directive implementation lies in balancing functionality with security, establishing clear syntax conventions, and creating maintainable processing systems that can evolve with changing requirements. Whether you're building technical documentation, educational content, or interactive guides, the directive techniques covered in this guide provide the foundation for creating rich, engaging content experiences.\u003C/p>\n\u003Cp>Remember to prioritize security in directive processing, implement comprehensive error handling, and establish clear guidelines for directive usage within your team. With proper implementation of custom Markdown directive systems, your documentation can achieve new levels of interactivity and user engagement while preserving the clean, readable format that makes Markdown an effective content creation tool.\u003C/p>\n",[15,19,22,25,28,31],{"id":16,"text":17,"level":18},"why-use-custom-directives-and-block-extensions","Why Use Custom Directives and Block Extensions?",2,{"id":20,"text":21,"level":18},"foundation-directive-systems","Foundation Directive Systems",{"id":23,"text":24,"level":18},"advanced-extension-systems","Advanced Extension Systems",{"id":26,"text":27,"level":18},"static-site-generator-integration","Static Site Generator Integration",{"id":29,"text":30,"level":18},"integration-with-modern-documentation-systems","Integration with Modern Documentation Systems",{"id":32,"text":33,"level":18},"conclusion","Conclusion",[],[36,44,52],{"slug":37,"title":38,"description":39,"excerpt":40,"date":41,"category":9,"author":10,"keywords":42,"readingMinutes":43},"markdown-custom-directives-and-extensions-complete-guide","Markdown Custom Directives and Extensions: Complete Guide for Advanced Content Management and Interactive Features","Master Markdown custom directives and extensions for advanced content management systems. Learn implementation techniques, integration patterns, and security considerations for interactive Markdown features.","Markdown custom directives and extensions enable advanced content management by extending standard Markdown syntax with specialized features, interactive components, and domain-specific…","2025-10-31","markdown custom directives, markdown extensions, custom markdown syntax, markdown plugins, advanced markdown features, markdown content management, interactive markdown, markdown preprocessing, custom markdown components, markdown macros",26,{"slug":45,"title":46,"description":47,"excerpt":48,"date":49,"category":9,"author":10,"keywords":50,"readingMinutes":51},"markdown-custom-html-components-complete-guide","Markdown Custom HTML Components and Extensions: Complete Guide for Dynamic Content Creation and Interactive Documentation","Master Markdown custom HTML components, shortcodes, and extensions for interactive documentation, dynamic content generation, and enhanced reader experiences. Learn component development, templating, and integration strategies.","Advanced Markdown custom HTML components and extensions enable the creation of dynamic, interactive documentation that transcends traditional static content limitations through sophisticated…","2025-10-03","markdown custom components, markdown html extensions, markdown shortcodes, interactive markdown, dynamic markdown content, custom markdown elements, markdown templating, markdown component development",33,{"slug":53,"title":54,"description":55,"excerpt":56,"date":57,"category":9,"author":10,"keywords":58,"readingMinutes":59},"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","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,1792184946236]