[{"data":1,"prerenderedAt":68},["Reactive",2],{"blog-post-markdown-custom-directives-and-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":43,"related":44},"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","Tutorial","Matthew Rathbone","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,"\u003Cp>Markdown custom directives and extensions enable advanced content management by extending standard Markdown syntax with specialized features, interactive components, and domain-specific functionality. While basic Markdown provides excellent foundational formatting capabilities, custom directives allow technical teams to create sophisticated content systems with reusable components, conditional rendering, and dynamic content generation tailored to specific organizational needs and workflow requirements.\u003C/p>\n\u003Ch2 id=\"why-master-markdown-custom-directives\">Why Master Markdown Custom Directives?\u003C/h2>\n\u003Cp>Professional custom directive implementation provides essential benefits for advanced content systems:\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>Enhanced Functionality\u003C/strong>: Extend Markdown beyond basic formatting with interactive components and specialized features\u003C/li>\n\u003Cli>\u003Cstrong>Content Reusability\u003C/strong>: Create reusable content blocks and templates that maintain consistency across large documentation systems\u003C/li>\n\u003Cli>\u003Cstrong>Domain-Specific Language\u003C/strong>: Develop custom syntax that matches your organization's specific content management requirements\u003C/li>\n\u003Cli>\u003Cstrong>Integration Flexibility\u003C/strong>: Seamlessly integrate with existing content management systems and development workflows\u003C/li>\n\u003Cli>\u003Cstrong>Performance Optimization\u003C/strong>: Implement efficient content processing and rendering strategies for complex interactive features\u003C/li>\n\u003C/ul>\n\u003Ch2 id=\"foundation-custom-directive-concepts\">Foundation Custom Directive Concepts\u003C/h2>\n\u003Ch3 id=\"understanding-directive-syntax-patterns\">Understanding Directive Syntax Patterns\u003C/h3>\n\u003Cp>Common patterns for implementing custom Markdown directives:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\"><!-- Block-level directives -->\n:::info\nThis is an information callout block with custom styling and behavior.\n:::\n\n<!-- Inline directives -->\nThis text contains a :badge[Important]{color=red} inline directive.\n\n<!-- Attribute-based directives -->\n{.custom-class #custom-id data-component="interactive"}\nThis paragraph has custom attributes applied.\n\n<!-- Shortcode-style directives -->\n{{< alert type="warning" >}}\nThis is a shortcode-style warning alert.\n{{< /alert >}}\n\n<!-- Fence-style directives -->\n\u003C/code>\u003C/pre>\u003Cpre>\u003Ccode class=\"hljs language-chart\">type: bar\ndata: [10, 20, 30, 40]\ntitle: Sample Chart Data\n\u003C/code>\u003C/pre>\u003C!-- Comment-based processing directives -->\n\u003C!-- INCLUDE: shared-content.md -->\n\u003C!-- TEMPLATE: button-component.html -->\n\u003C!-- CONDITIONAL: user-role=admin -->\n\u003Cpre>\u003Ccode>\n### Core Directive Processing Architecture\n\n```javascript\n// directive-processor.js - Foundation for custom directive processing\nconst unified = require('unified');\nconst remarkParse = require('remark-parse');\nconst remarkStringify = require('remark-stringify');\nconst { visit } = require('unist-util-visit');\n\nclass MarkdownDirectiveProcessor {\n    constructor(options = {}) {\n        this.options = {\n            enableCustomSyntax: options.enableCustomSyntax !== false,\n            allowUnsafeDirectives: options.allowUnsafeDirectives || false,\n            customDirectives: options.customDirectives || new Map(),\n            preprocessors: options.preprocessors || [],\n            postprocessors: options.postprocessors || [],\n            ...options\n        };\n        \n        this.processor = this.createProcessor();\n        this.directiveHandlers = new Map();\n        this.setupDefaultDirectives();\n    }\n    \n    createProcessor() {\n        return unified()\n            .use(remarkParse)\n            .use(this.createDirectivePlugin())\n            .use(remarkStringify);\n    }\n    \n    createDirectivePlugin() {\n        const self = this;\n        \n        return function directivePlugin() {\n            return function transformer(tree, file) {\n                // Process preprocessors first\n                for (const preprocessor of self.options.preprocessors) {\n                    tree = preprocessor(tree, file) || tree;\n                }\n                \n                // Process custom directives\n                self.processDirectives(tree, file);\n                \n                // Process postprocessors\n                for (const postprocessor of self.options.postprocessors) {\n                    tree = postprocessor(tree, file) || tree;\n                }\n                \n                return tree;\n            };\n        };\n    }\n    \n    processDirectives(tree, file) {\n        // Process block-level directives (container syntax)\n        visit(tree, 'containerDirective', (node, index, parent) => {\n            this.handleDirective(node, 'container', index, parent, file);\n        });\n        \n        // Process leaf directives (single-line)\n        visit(tree, 'leafDirective', (node, index, parent) => {\n            this.handleDirective(node, 'leaf', index, parent, file);\n        });\n        \n        // Process text directives (inline)\n        visit(tree, 'textDirective', (node, index, parent) => {\n            this.handleDirective(node, 'text', index, parent, file);\n        });\n        \n        // Process custom fence blocks\n        visit(tree, 'code', (node, index, parent) => {\n            if (node.lang && this.directiveHandlers.has(`fence:${node.lang}`)) {\n                this.handleDirective({\n                    type: 'fenceDirective',\n                    name: node.lang,\n                    value: node.value,\n                    attributes: {}\n                }, 'fence', index, parent, file);\n            }\n        });\n        \n        // Process comment-based directives\n        visit(tree, 'html', (node, index, parent) => {\n            const commentMatch = node.value.match(/<!--\\s*(\\w+):\\s*(.+?)\\s*-->/);\n            if (commentMatch) {\n                this.handleDirective({\n                    type: 'commentDirective',\n                    name: commentMatch[1].toLowerCase(),\n                    value: commentMatch[2],\n                    attributes: {}\n                }, 'comment', index, parent, file);\n            }\n        });\n    }\n    \n    handleDirective(node, directiveType, index, parent, file) {\n        const directiveName = node.name.toLowerCase();\n        const handlerKey = `${directiveType}:${directiveName}`;\n        \n        if (this.directiveHandlers.has(handlerKey)) {\n            try {\n                const handler = this.directiveHandlers.get(handlerKey);\n                const result = handler(node, {\n                    type: directiveType,\n                    index,\n                    parent,\n                    file,\n                    processor: this\n                });\n                \n                if (result && parent && typeof index === 'number') {\n                    parent.children[index] = result;\n                }\n            } catch (error) {\n                console.error(`Error processing directive ${directiveName}:`, error);\n                \n                // Create error node\n                parent.children[index] = {\n                    type: 'paragraph',\n                    children: [{\n                        type: 'text',\n                        value: `[Directive Error: ${directiveName} - ${error.message}]`\n                    }]\n                };\n            }\n        }\n    }\n    \n    registerDirective(name, type, handler) {\n        const key = `${type}:${name.toLowerCase()}`;\n        this.directiveHandlers.set(key, handler);\n    }\n    \n    setupDefaultDirectives() {\n        // Alert/callout directives\n        this.registerDirective('info', 'container', this.createAlertHandler('info'));\n        this.registerDirective('warning', 'container', this.createAlertHandler('warning'));\n        this.registerDirective('error', 'container', this.createAlertHandler('error'));\n        this.registerDirective('success', 'container', this.createAlertHandler('success'));\n        \n        // Inline formatting directives\n        this.registerDirective('badge', 'text', this.createBadgeHandler());\n        this.registerDirective('highlight', 'text', this.createHighlightHandler());\n        \n        // Content inclusion directives\n        this.registerDirective('include', 'comment', this.createIncludeHandler());\n        this.registerDirective('template', 'comment', this.createTemplateHandler());\n        \n        // Interactive component directives\n        this.registerDirective('button', 'leaf', this.createButtonHandler());\n        this.registerDirective('tabs', 'container', this.createTabsHandler());\n        \n        // Data visualization directives\n        this.registerDirective('chart', 'fence', this.createChartHandler());\n        this.registerDirective('diagram', 'fence', this.createDiagramHandler());\n    }\n    \n    createAlertHandler(alertType) {\n        return (node, context) => {\n            const title = node.attributes?.title || null;\n            const className = `alert alert-${alertType}`;\n            \n            return {\n                type: 'paragraph',\n                data: {\n                    hName: 'div',\n                    hProperties: {\n                        className: [className],\n                        'data-alert-type': alertType\n                    }\n                },\n                children: [\n                    ...(title ? [{\n                        type: 'strong',\n                        children: [{ type: 'text', value: title }]\n                    }, { type: 'text', value: '\\n' }] : []),\n                    ...node.children\n                ]\n            };\n        };\n    }\n    \n    createBadgeHandler() {\n        return (node, context) => {\n            const color = node.attributes?.color || 'primary';\n            const size = node.attributes?.size || 'normal';\n            \n            return {\n                type: 'text',\n                data: {\n                    hName: 'span',\n                    hProperties: {\n                        className: [`badge badge-${color} badge-${size}`],\n                        'data-badge': true\n                    }\n                },\n                value: node.children[0]?.value || ''\n            };\n        };\n    }\n    \n    createHighlightHandler() {\n        return (node, context) => {\n            const color = node.attributes?.color || 'yellow';\n            \n            return {\n                type: 'text',\n                data: {\n                    hName: 'mark',\n                    hProperties: {\n                        className: [`highlight highlight-${color}`],\n                        'data-highlight': true\n                    }\n                },\n                value: node.children[0]?.value || ''\n            };\n        };\n    }\n    \n    createIncludeHandler() {\n        return (node, context) => {\n            const filePath = node.value.trim();\n            \n            try {\n                const fs = require('fs');\n                const path = require('path');\n                \n                // Security check - only allow relative paths\n                if (path.isAbsolute(filePath) || filePath.includes('..')) {\n                    throw new Error('Absolute paths and parent directory access not allowed');\n                }\n                \n                const fullPath = path.resolve(context.file.dirname || process.cwd(), filePath);\n                const includedContent = fs.readFileSync(fullPath, 'utf8');\n                \n                // Parse included content\n                const includedTree = this.processor.parse(includedContent);\n                \n                return {\n                    type: 'root',\n                    children: includedTree.children\n                };\n            } catch (error) {\n                return {\n                    type: 'paragraph',\n                    children: [{\n                        type: 'text',\n                        value: `[Include Error: ${filePath} - ${error.message}]`\n                    }]\n                };\n            }\n        };\n    }\n    \n    createTemplateHandler() {\n        return (node, context) => {\n            const templateName = node.value.trim();\n            \n            // Template processing would integrate with your template engine\n            return {\n                type: 'paragraph',\n                data: {\n                    hName: 'div',\n                    hProperties: {\n                        className: ['template-placeholder'],\n                        'data-template': templateName\n                    }\n                },\n                children: [{\n                    type: 'text',\n                    value: `[Template: ${templateName}]`\n                }]\n            };\n        };\n    }\n    \n    createButtonHandler() {\n        return (node, context) => {\n            const text = node.children[0]?.value || 'Button';\n            const variant = node.attributes?.variant || 'primary';\n            const size = node.attributes?.size || 'medium';\n            const href = node.attributes?.href;\n            const onclick = node.attributes?.onclick;\n            \n            const element = href ? 'a' : 'button';\n            const properties = {\n                className: [`btn btn-${variant} btn-${size}`],\n                'data-button': true\n            };\n            \n            if (href) {\n                properties.href = href;\n            }\n            \n            if (onclick && this.options.allowUnsafeDirectives) {\n                properties.onclick = onclick;\n            }\n            \n            return {\n                type: 'text',\n                data: {\n                    hName: element,\n                    hProperties: properties\n                },\n                value: text\n            };\n        };\n    }\n    \n    createTabsHandler() {\n        return (node, context) => {\n            const tabs = [];\n            const tabContent = [];\n            \n            // Process tab children\n            visit(node, 'containerDirective', (tabNode) => {\n                if (tabNode.name === 'tab') {\n                    const title = tabNode.attributes?.title || `Tab ${tabs.length + 1}`;\n                    tabs.push(title);\n                    tabContent.push(tabNode.children);\n                }\n            });\n            \n            return {\n                type: 'paragraph',\n                data: {\n                    hName: 'div',\n                    hProperties: {\n                        className: ['tabs-container'],\n                        'data-tabs': JSON.stringify(tabs)\n                    }\n                },\n                children: [{\n                    type: 'text',\n                    value: `[Interactive Tabs Component: ${tabs.join(', ')}]`\n                }]\n            };\n        };\n    }\n    \n    createChartHandler() {\n        return (node, context) => {\n            try {\n                const config = this.parseChartConfig(node.value);\n                \n                return {\n                    type: 'paragraph',\n                    data: {\n                        hName: 'div',\n                        hProperties: {\n                            className: ['chart-container'],\n                            'data-chart-config': JSON.stringify(config)\n                        }\n                    },\n                    children: [{\n                        type: 'text',\n                        value: `[Chart: ${config.type || 'unknown'}]`\n                    }]\n                };\n            } catch (error) {\n                return {\n                    type: 'paragraph',\n                    children: [{\n                        type: 'text',\n                        value: `[Chart Error: ${error.message}]`\n                    }]\n                };\n            }\n        };\n    }\n    \n    createDiagramHandler() {\n        return (node, context) => {\n            const diagramType = node.attributes?.type || 'flowchart';\n            \n            return {\n                type: 'paragraph',\n                data: {\n                    hName: 'div',\n                    hProperties: {\n                        className: ['diagram-container'],\n                        'data-diagram-type': diagramType,\n                        'data-diagram-content': node.value\n                    }\n                },\n                children: [{\n                    type: 'text',\n                    value: `[Diagram: ${diagramType}]`\n                }]\n            };\n        };\n    }\n    \n    parseChartConfig(configString) {\n        const config = {};\n        const lines = configString.trim().split('\\n');\n        \n        for (const line of lines) {\n            const [key, ...valueParts] = line.split(':');\n            if (key && valueParts.length > 0) {\n                const value = valueParts.join(':').trim();\n                \n                // Try to parse as JSON for arrays/objects\n                try {\n                    config[key.trim()] = JSON.parse(value);\n                } catch {\n                    config[key.trim()] = value;\n                }\n            }\n        }\n        \n        return config;\n    }\n    \n    async process(markdown, file = {}) {\n        try {\n            const result = await this.processor.process({\n                value: markdown,\n                path: file.path,\n                dirname: file.dirname\n            });\n            \n            return result.toString();\n        } catch (error) {\n            console.error('Markdown processing error:', error);\n            throw error;\n        }\n    }\n    \n    addPreprocessor(preprocessor) {\n        this.options.preprocessors.push(preprocessor);\n    }\n    \n    addPostprocessor(postprocessor) {\n        this.options.postprocessors.push(postprocessor);\n    }\n    \n    getRegisteredDirectives() {\n        return Array.from(this.directiveHandlers.keys()).map(key => {\n            const [type, name] = key.split(':');\n            return { type, name };\n        });\n    }\n}\n\nmodule.exports = MarkdownDirectiveProcessor;\n\u003C/code>\u003C/pre>\u003Ch2 id=\"advanced-directive-implementation-patterns\">Advanced Directive Implementation Patterns\u003C/h2>\n\u003Ch3 id=\"interactive-component-directives\">Interactive Component Directives\u003C/h3>\n\u003Cpre>\u003Ccode class=\"hljs language-javascript\">\u003Cspan class=\"hljs-comment\">// interactive-directives.js - Advanced interactive component system\u003C/span>\n\u003Cspan class=\"hljs-keyword\">class\u003C/span> \u003Cspan class=\"hljs-title class_\">InteractiveDirectiveSystem\u003C/span> {\n    \u003Cspan class=\"hljs-title function_\">constructor\u003C/span>(\u003Cspan class=\"hljs-params\">processor\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">processor\u003C/span> = processor;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">componentRegistry\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-title function_\">setupInteractiveDirectives\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">setupInteractiveDirectives\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Collapsible content directive\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">processor\u003C/span>.\u003Cspan class=\"hljs-title function_\">registerDirective\u003C/span>(\u003Cspan class=\"hljs-string\">'details'\u003C/span>, \u003Cspan class=\"hljs-string\">'container'\u003C/span>, \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">node, context\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> summary = node.\u003Cspan class=\"hljs-property\">attributes\u003C/span>?.\u003Cspan class=\"hljs-property\">summary\u003C/span> || \u003Cspan class=\"hljs-string\">'Details'\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> open = node.\u003Cspan class=\"hljs-property\">attributes\u003C/span>?.\u003Cspan class=\"hljs-property\">open\u003C/span> === \u003Cspan class=\"hljs-string\">'true'\u003C/span>;\n            \n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> {\n                \u003Cspan class=\"hljs-attr\">type\u003C/span>: \u003Cspan class=\"hljs-string\">'paragraph'\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">data\u003C/span>: {\n                    \u003Cspan class=\"hljs-attr\">hName\u003C/span>: \u003Cspan class=\"hljs-string\">'details'\u003C/span>,\n                    \u003Cspan class=\"hljs-attr\">hProperties\u003C/span>: {\n                        \u003Cspan class=\"hljs-attr\">className\u003C/span>: [\u003Cspan class=\"hljs-string\">'collapsible-content'\u003C/span>],\n                        \u003Cspan class=\"hljs-attr\">open\u003C/span>: open || \u003Cspan class=\"hljs-literal\">undefined\u003C/span>\n                    }\n                },\n                \u003Cspan class=\"hljs-attr\">children\u003C/span>: [\n                    {\n                        \u003Cspan class=\"hljs-attr\">type\u003C/span>: \u003Cspan class=\"hljs-string\">'text'\u003C/span>,\n                        \u003Cspan class=\"hljs-attr\">data\u003C/span>: {\n                            \u003Cspan class=\"hljs-attr\">hName\u003C/span>: \u003Cspan class=\"hljs-string\">'summary'\u003C/span>,\n                            \u003Cspan class=\"hljs-attr\">hProperties\u003C/span>: { \u003Cspan class=\"hljs-attr\">className\u003C/span>: [\u003Cspan class=\"hljs-string\">'collapsible-summary'\u003C/span>] }\n                        },\n                        \u003Cspan class=\"hljs-attr\">value\u003C/span>: summary\n                    },\n                    ...node.\u003Cspan class=\"hljs-property\">children\u003C/span>\n                ]\n            };\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// Code playground directive\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">processor\u003C/span>.\u003Cspan class=\"hljs-title function_\">registerDirective\u003C/span>(\u003Cspan class=\"hljs-string\">'playground'\u003C/span>, \u003Cspan class=\"hljs-string\">'fence'\u003C/span>, \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">node, context\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> language = node.\u003Cspan class=\"hljs-property\">name\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> code = node.\u003Cspan class=\"hljs-property\">value\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> editable = node.\u003Cspan class=\"hljs-property\">attributes\u003C/span>?.\u003Cspan class=\"hljs-property\">editable\u003C/span> !== \u003Cspan class=\"hljs-string\">'false'\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> runnable = node.\u003Cspan class=\"hljs-property\">attributes\u003C/span>?.\u003Cspan class=\"hljs-property\">runnable\u003C/span> === \u003Cspan class=\"hljs-string\">'true'\u003C/span>;\n            \n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> playgroundConfig = {\n                language,\n                code,\n                editable,\n                runnable,\n                \u003Cspan class=\"hljs-attr\">theme\u003C/span>: node.\u003Cspan class=\"hljs-property\">attributes\u003C/span>?.\u003Cspan class=\"hljs-property\">theme\u003C/span> || \u003Cspan class=\"hljs-string\">'light'\u003C/span>\n            };\n            \n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> {\n                \u003Cspan class=\"hljs-attr\">type\u003C/span>: \u003Cspan class=\"hljs-string\">'paragraph'\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">data\u003C/span>: {\n                    \u003Cspan class=\"hljs-attr\">hName\u003C/span>: \u003Cspan class=\"hljs-string\">'div'\u003C/span>,\n                    \u003Cspan class=\"hljs-attr\">hProperties\u003C/span>: {\n                        \u003Cspan class=\"hljs-attr\">className\u003C/span>: [\u003Cspan class=\"hljs-string\">'code-playground'\u003C/span>],\n                        \u003Cspan class=\"hljs-string\">'data-playground-config'\u003C/span>: \u003Cspan class=\"hljs-title class_\">JSON\u003C/span>.\u003Cspan class=\"hljs-title function_\">stringify\u003C/span>(playgroundConfig)\n                    }\n                },\n                \u003Cspan class=\"hljs-attr\">children\u003C/span>: [{\n                    \u003Cspan class=\"hljs-attr\">type\u003C/span>: \u003Cspan class=\"hljs-string\">'text'\u003C/span>,\n                    \u003Cspan class=\"hljs-attr\">value\u003C/span>: \u003Cspan class=\"hljs-string\">`[Code Playground: \u003Cspan class=\"hljs-subst\">${language}\u003C/span>]`\u003C/span>\n                }]\n            };\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// Form input directive\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">processor\u003C/span>.\u003Cspan class=\"hljs-title function_\">registerDirective\u003C/span>(\u003Cspan class=\"hljs-string\">'input'\u003C/span>, \u003Cspan class=\"hljs-string\">'leaf'\u003C/span>, \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">node, context\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> type = node.\u003Cspan class=\"hljs-property\">attributes\u003C/span>?.\u003Cspan class=\"hljs-property\">type\u003C/span> || \u003Cspan class=\"hljs-string\">'text'\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> name = node.\u003Cspan class=\"hljs-property\">attributes\u003C/span>?.\u003Cspan class=\"hljs-property\">name\u003C/span> || \u003Cspan class=\"hljs-string\">'input'\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> placeholder = node.\u003Cspan class=\"hljs-property\">attributes\u003C/span>?.\u003Cspan class=\"hljs-property\">placeholder\u003C/span> || \u003Cspan class=\"hljs-string\">''\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> required = node.\u003Cspan class=\"hljs-property\">attributes\u003C/span>?.\u003Cspan class=\"hljs-property\">required\u003C/span> === \u003Cspan class=\"hljs-string\">'true'\u003C/span>;\n            \n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> {\n                \u003Cspan class=\"hljs-attr\">type\u003C/span>: \u003Cspan class=\"hljs-string\">'text'\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">data\u003C/span>: {\n                    \u003Cspan class=\"hljs-attr\">hName\u003C/span>: \u003Cspan class=\"hljs-string\">'input'\u003C/span>,\n                    \u003Cspan class=\"hljs-attr\">hProperties\u003C/span>: {\n                        type,\n                        name,\n                        placeholder,\n                        \u003Cspan class=\"hljs-attr\">required\u003C/span>: required || \u003Cspan class=\"hljs-literal\">undefined\u003C/span>,\n                        \u003Cspan class=\"hljs-attr\">className\u003C/span>: [\u003Cspan class=\"hljs-string\">'form-input'\u003C/span>]\n                    }\n                },\n                \u003Cspan class=\"hljs-attr\">value\u003C/span>: \u003Cspan class=\"hljs-string\">''\u003C/span>\n            };\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// Progress bar directive\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">processor\u003C/span>.\u003Cspan class=\"hljs-title function_\">registerDirective\u003C/span>(\u003Cspan class=\"hljs-string\">'progress'\u003C/span>, \u003Cspan class=\"hljs-string\">'leaf'\u003C/span>, \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">node, context\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> value = \u003Cspan class=\"hljs-built_in\">parseInt\u003C/span>(node.\u003Cspan class=\"hljs-property\">attributes\u003C/span>?.\u003Cspan class=\"hljs-property\">value\u003C/span> || \u003Cspan class=\"hljs-string\">'0'\u003C/span>);\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> max = \u003Cspan class=\"hljs-built_in\">parseInt\u003C/span>(node.\u003Cspan class=\"hljs-property\">attributes\u003C/span>?.\u003Cspan class=\"hljs-property\">max\u003C/span> || \u003Cspan class=\"hljs-string\">'100'\u003C/span>);\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> label = node.\u003Cspan class=\"hljs-property\">attributes\u003C/span>?.\u003Cspan class=\"hljs-property\">label\u003C/span> || \u003Cspan class=\"hljs-string\">`\u003Cspan class=\"hljs-subst\">${value}\u003C/span>%`\u003C/span>;\n            \n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> {\n                \u003Cspan class=\"hljs-attr\">type\u003C/span>: \u003Cspan class=\"hljs-string\">'paragraph'\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">data\u003C/span>: {\n                    \u003Cspan class=\"hljs-attr\">hName\u003C/span>: \u003Cspan class=\"hljs-string\">'div'\u003C/span>,\n                    \u003Cspan class=\"hljs-attr\">hProperties\u003C/span>: {\n                        \u003Cspan class=\"hljs-attr\">className\u003C/span>: [\u003Cspan class=\"hljs-string\">'progress-container'\u003C/span>]\n                    }\n                },\n                \u003Cspan class=\"hljs-attr\">children\u003C/span>: [\n                    {\n                        \u003Cspan class=\"hljs-attr\">type\u003C/span>: \u003Cspan class=\"hljs-string\">'text'\u003C/span>,\n                        \u003Cspan class=\"hljs-attr\">data\u003C/span>: {\n                            \u003Cspan class=\"hljs-attr\">hName\u003C/span>: \u003Cspan class=\"hljs-string\">'progress'\u003C/span>,\n                            \u003Cspan class=\"hljs-attr\">hProperties\u003C/span>: {\n                                value,\n                                max,\n                                \u003Cspan class=\"hljs-attr\">className\u003C/span>: [\u003Cspan class=\"hljs-string\">'progress-bar'\u003C/span>]\n                            }\n                        },\n                        \u003Cspan class=\"hljs-attr\">value\u003C/span>: \u003Cspan class=\"hljs-string\">''\u003C/span>\n                    },\n                    {\n                        \u003Cspan class=\"hljs-attr\">type\u003C/span>: \u003Cspan class=\"hljs-string\">'text'\u003C/span>,\n                        \u003Cspan class=\"hljs-attr\">data\u003C/span>: {\n                            \u003Cspan class=\"hljs-attr\">hName\u003C/span>: \u003Cspan class=\"hljs-string\">'span'\u003C/span>,\n                            \u003Cspan class=\"hljs-attr\">hProperties\u003C/span>: {\n                                \u003Cspan class=\"hljs-attr\">className\u003C/span>: [\u003Cspan class=\"hljs-string\">'progress-label'\u003C/span>]\n                            }\n                        },\n                        \u003Cspan class=\"hljs-attr\">value\u003C/span>: label\n                    }\n                ]\n            };\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// Video embed directive\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">processor\u003C/span>.\u003Cspan class=\"hljs-title function_\">registerDirective\u003C/span>(\u003Cspan class=\"hljs-string\">'video'\u003C/span>, \u003Cspan class=\"hljs-string\">'leaf'\u003C/span>, \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">node, context\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> src = node.\u003Cspan class=\"hljs-property\">attributes\u003C/span>?.\u003Cspan class=\"hljs-property\">src\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> poster = node.\u003Cspan class=\"hljs-property\">attributes\u003C/span>?.\u003Cspan class=\"hljs-property\">poster\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> controls = node.\u003Cspan class=\"hljs-property\">attributes\u003C/span>?.\u003Cspan class=\"hljs-property\">controls\u003C/span> !== \u003Cspan class=\"hljs-string\">'false'\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> autoplay = node.\u003Cspan class=\"hljs-property\">attributes\u003C/span>?.\u003Cspan class=\"hljs-property\">autoplay\u003C/span> === \u003Cspan class=\"hljs-string\">'true'\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> muted = node.\u003Cspan class=\"hljs-property\">attributes\u003C/span>?.\u003Cspan class=\"hljs-property\">muted\u003C/span> === \u003Cspan class=\"hljs-string\">'true'\u003C/span>;\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!src) {\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> {\n                    \u003Cspan class=\"hljs-attr\">type\u003C/span>: \u003Cspan class=\"hljs-string\">'paragraph'\u003C/span>,\n                    \u003Cspan class=\"hljs-attr\">children\u003C/span>: [{\n                        \u003Cspan class=\"hljs-attr\">type\u003C/span>: \u003Cspan class=\"hljs-string\">'text'\u003C/span>,\n                        \u003Cspan class=\"hljs-attr\">value\u003C/span>: \u003Cspan class=\"hljs-string\">'[Video Error: No source specified]'\u003C/span>\n                    }]\n                };\n            }\n            \n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> properties = {\n                src,\n                \u003Cspan class=\"hljs-attr\">controls\u003C/span>: controls || \u003Cspan class=\"hljs-literal\">undefined\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">autoplay\u003C/span>: autoplay || \u003Cspan class=\"hljs-literal\">undefined\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">muted\u003C/span>: muted || \u003Cspan class=\"hljs-literal\">undefined\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">className\u003C/span>: [\u003Cspan class=\"hljs-string\">'embedded-video'\u003C/span>]\n            };\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (poster) {\n                properties.\u003Cspan class=\"hljs-property\">poster\u003C/span> = poster;\n            }\n            \n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> {\n                \u003Cspan class=\"hljs-attr\">type\u003C/span>: \u003Cspan class=\"hljs-string\">'text'\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">data\u003C/span>: {\n                    \u003Cspan class=\"hljs-attr\">hName\u003C/span>: \u003Cspan class=\"hljs-string\">'video'\u003C/span>,\n                    \u003Cspan class=\"hljs-attr\">hProperties\u003C/span>: properties\n                },\n                \u003Cspan class=\"hljs-attr\">value\u003C/span>: \u003Cspan class=\"hljs-string\">''\u003C/span>\n            };\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// Card layout directive\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">processor\u003C/span>.\u003Cspan class=\"hljs-title function_\">registerDirective\u003C/span>(\u003Cspan class=\"hljs-string\">'card'\u003C/span>, \u003Cspan class=\"hljs-string\">'container'\u003C/span>, \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">node, context\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> title = node.\u003Cspan class=\"hljs-property\">attributes\u003C/span>?.\u003Cspan class=\"hljs-property\">title\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> image = node.\u003Cspan class=\"hljs-property\">attributes\u003C/span>?.\u003Cspan class=\"hljs-property\">image\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> variant = node.\u003Cspan class=\"hljs-property\">attributes\u003C/span>?.\u003Cspan class=\"hljs-property\">variant\u003C/span> || \u003Cspan class=\"hljs-string\">'default'\u003C/span>;\n            \n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> cardChildren = [];\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (image) {\n                cardChildren.\u003Cspan class=\"hljs-title function_\">push\u003C/span>({\n                    \u003Cspan class=\"hljs-attr\">type\u003C/span>: \u003Cspan class=\"hljs-string\">'text'\u003C/span>,\n                    \u003Cspan class=\"hljs-attr\">data\u003C/span>: {\n                        \u003Cspan class=\"hljs-attr\">hName\u003C/span>: \u003Cspan class=\"hljs-string\">'img'\u003C/span>,\n                        \u003Cspan class=\"hljs-attr\">hProperties\u003C/span>: {\n                            \u003Cspan class=\"hljs-attr\">src\u003C/span>: image,\n                            \u003Cspan class=\"hljs-attr\">className\u003C/span>: [\u003Cspan class=\"hljs-string\">'card-image'\u003C/span>],\n                            \u003Cspan class=\"hljs-attr\">alt\u003C/span>: title || \u003Cspan class=\"hljs-string\">'Card image'\u003C/span>\n                        }\n                    },\n                    \u003Cspan class=\"hljs-attr\">value\u003C/span>: \u003Cspan class=\"hljs-string\">''\u003C/span>\n                });\n            }\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (title) {\n                cardChildren.\u003Cspan class=\"hljs-title function_\">push\u003C/span>({\n                    \u003Cspan class=\"hljs-attr\">type\u003C/span>: \u003Cspan class=\"hljs-string\">'text'\u003C/span>,\n                    \u003Cspan class=\"hljs-attr\">data\u003C/span>: {\n                        \u003Cspan class=\"hljs-attr\">hName\u003C/span>: \u003Cspan class=\"hljs-string\">'h3'\u003C/span>,\n                        \u003Cspan class=\"hljs-attr\">hProperties\u003C/span>: {\n                            \u003Cspan class=\"hljs-attr\">className\u003C/span>: [\u003Cspan class=\"hljs-string\">'card-title'\u003C/span>]\n                        }\n                    },\n                    \u003Cspan class=\"hljs-attr\">value\u003C/span>: title\n                });\n            }\n            \n            cardChildren.\u003Cspan class=\"hljs-title function_\">push\u003C/span>({\n                \u003Cspan class=\"hljs-attr\">type\u003C/span>: \u003Cspan class=\"hljs-string\">'paragraph'\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">data\u003C/span>: {\n                    \u003Cspan class=\"hljs-attr\">hName\u003C/span>: \u003Cspan class=\"hljs-string\">'div'\u003C/span>,\n                    \u003Cspan class=\"hljs-attr\">hProperties\u003C/span>: {\n                        \u003Cspan class=\"hljs-attr\">className\u003C/span>: [\u003Cspan class=\"hljs-string\">'card-content'\u003C/span>]\n                    }\n                },\n                \u003Cspan class=\"hljs-attr\">children\u003C/span>: node.\u003Cspan class=\"hljs-property\">children\u003C/span>\n            });\n            \n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> {\n                \u003Cspan class=\"hljs-attr\">type\u003C/span>: \u003Cspan class=\"hljs-string\">'paragraph'\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">data\u003C/span>: {\n                    \u003Cspan class=\"hljs-attr\">hName\u003C/span>: \u003Cspan class=\"hljs-string\">'div'\u003C/span>,\n                    \u003Cspan class=\"hljs-attr\">hProperties\u003C/span>: {\n                        \u003Cspan class=\"hljs-attr\">className\u003C/span>: [\u003Cspan class=\"hljs-string\">`card card-\u003Cspan class=\"hljs-subst\">${variant}\u003C/span>`\u003C/span>]\n                    }\n                },\n                \u003Cspan class=\"hljs-attr\">children\u003C/span>: cardChildren\n            };\n        });\n    }\n    \n    \u003Cspan class=\"hljs-comment\">// Register custom component renderer\u003C/span>\n    \u003Cspan class=\"hljs-title function_\">registerComponent\u003C/span>(\u003Cspan class=\"hljs-params\">name, renderer\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">componentRegistry\u003C/span>.\u003Cspan class=\"hljs-title function_\">set\u003C/span>(name, renderer);\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, \u003Cspan class=\"hljs-string\">'container'\u003C/span>, \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">node, context\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">try\u003C/span> {\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-title function_\">renderer\u003C/span>(node, context);\n            } \u003Cspan class=\"hljs-keyword\">catch\u003C/span> (error) {\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> {\n                    \u003Cspan class=\"hljs-attr\">type\u003C/span>: \u003Cspan class=\"hljs-string\">'paragraph'\u003C/span>,\n                    \u003Cspan class=\"hljs-attr\">children\u003C/span>: [{\n                        \u003Cspan class=\"hljs-attr\">type\u003C/span>: \u003Cspan class=\"hljs-string\">'text'\u003C/span>,\n                        \u003Cspan class=\"hljs-attr\">value\u003C/span>: \u003Cspan class=\"hljs-string\">`[Component Error: \u003Cspan class=\"hljs-subst\">${name}\u003C/span> - \u003Cspan class=\"hljs-subst\">${error.message}\u003C/span>]`\u003C/span>\n                    }]\n                };\n            }\n        });\n    }\n    \n    \u003Cspan class=\"hljs-comment\">// Validate component configuration\u003C/span>\n    \u003Cspan class=\"hljs-title function_\">validateComponent\u003C/span>(\u003Cspan class=\"hljs-params\">name, config\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> component = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">componentRegistry\u003C/span>.\u003Cspan class=\"hljs-title function_\">get\u003C/span>(name);\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!component) {\n            \u003Cspan class=\"hljs-keyword\">throw\u003C/span> \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Error\u003C/span>(\u003Cspan class=\"hljs-string\">`Component \u003Cspan class=\"hljs-subst\">${name}\u003C/span> not registered`\u003C/span>);\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (component.\u003Cspan class=\"hljs-property\">validate\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> component.\u003Cspan class=\"hljs-title function_\">validate\u003C/span>(config);\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-literal\">true\u003C/span>;\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">// Example usage with custom components\u003C/span>\n\u003Cspan class=\"hljs-keyword\">const\u003C/span> processor = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">MarkdownDirectiveProcessor\u003C/span>();\n\u003Cspan class=\"hljs-keyword\">const\u003C/span> interactiveSystem = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">InteractiveDirectiveSystem\u003C/span>(processor);\n\n\u003Cspan class=\"hljs-comment\">// Register custom gallery component\u003C/span>\ninteractiveSystem.\u003Cspan class=\"hljs-title function_\">registerComponent\u003C/span>(\u003Cspan class=\"hljs-string\">'gallery'\u003C/span>, \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">node, context\u003C/span>) =>\u003C/span> {\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> images = [];\n    \n    \u003Cspan class=\"hljs-comment\">// Extract image information from children\u003C/span>\n    \u003Cspan class=\"hljs-title function_\">visit\u003C/span>(node, \u003Cspan class=\"hljs-string\">'image'\u003C/span>, \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">imageNode\u003C/span>) =>\u003C/span> {\n        images.\u003Cspan class=\"hljs-title function_\">push\u003C/span>({\n            \u003Cspan class=\"hljs-attr\">src\u003C/span>: imageNode.\u003Cspan class=\"hljs-property\">url\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">alt\u003C/span>: imageNode.\u003Cspan class=\"hljs-property\">alt\u003C/span> || \u003Cspan class=\"hljs-string\">''\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">title\u003C/span>: imageNode.\u003Cspan class=\"hljs-property\">title\u003C/span> || \u003Cspan class=\"hljs-string\">''\u003C/span>\n        });\n    });\n    \n    \u003Cspan class=\"hljs-keyword\">return\u003C/span> {\n        \u003Cspan class=\"hljs-attr\">type\u003C/span>: \u003Cspan class=\"hljs-string\">'paragraph'\u003C/span>,\n        \u003Cspan class=\"hljs-attr\">data\u003C/span>: {\n            \u003Cspan class=\"hljs-attr\">hName\u003C/span>: \u003Cspan class=\"hljs-string\">'div'\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">hProperties\u003C/span>: {\n                \u003Cspan class=\"hljs-attr\">className\u003C/span>: [\u003Cspan class=\"hljs-string\">'image-gallery'\u003C/span>],\n                \u003Cspan class=\"hljs-string\">'data-gallery-config'\u003C/span>: \u003Cspan class=\"hljs-title class_\">JSON\u003C/span>.\u003Cspan class=\"hljs-title function_\">stringify\u003C/span>({\n                    images,\n                    \u003Cspan class=\"hljs-attr\">layout\u003C/span>: node.\u003Cspan class=\"hljs-property\">attributes\u003C/span>?.\u003Cspan class=\"hljs-property\">layout\u003C/span> || \u003Cspan class=\"hljs-string\">'grid'\u003C/span>,\n                    \u003Cspan class=\"hljs-attr\">columns\u003C/span>: \u003Cspan class=\"hljs-built_in\">parseInt\u003C/span>(node.\u003Cspan class=\"hljs-property\">attributes\u003C/span>?.\u003Cspan class=\"hljs-property\">columns\u003C/span> || \u003Cspan class=\"hljs-string\">'3'\u003C/span>)\n                })\n            }\n        },\n        \u003Cspan class=\"hljs-attr\">children\u003C/span>: [{\n            \u003Cspan class=\"hljs-attr\">type\u003C/span>: \u003Cspan class=\"hljs-string\">'text'\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">value\u003C/span>: \u003Cspan class=\"hljs-string\">`[Image Gallery: \u003Cspan class=\"hljs-subst\">${images.length}\u003C/span> images]`\u003C/span>\n        }]\n    };\n});\n\n\u003Cspan class=\"hljs-variable language_\">module\u003C/span>.\u003Cspan class=\"hljs-property\">exports\u003C/span> = \u003Cspan class=\"hljs-title class_\">InteractiveDirectiveSystem\u003C/span>;\n\u003C/code>\u003C/pre>\u003Ch3 id=\"conditional-content-and-dynamic-processing\">Conditional Content and Dynamic Processing\u003C/h3>\n\u003Cpre>\u003Ccode class=\"hljs language-javascript\">\u003Cspan class=\"hljs-comment\">// conditional-directives.js - Conditional content and dynamic processing\u003C/span>\n\u003Cspan class=\"hljs-keyword\">class\u003C/span> \u003Cspan class=\"hljs-title class_\">ConditionalDirectiveSystem\u003C/span> {\n    \u003Cspan class=\"hljs-title function_\">constructor\u003C/span>(\u003Cspan class=\"hljs-params\">processor, context = {}\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">processor\u003C/span> = processor;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">context\u003C/span> = context; \u003Cspan class=\"hljs-comment\">// User context, environment variables, etc.\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">setupConditionalDirectives\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">setupConditionalDirectives\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Conditional content directive\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">processor\u003C/span>.\u003Cspan class=\"hljs-title function_\">registerDirective\u003C/span>(\u003Cspan class=\"hljs-string\">'if'\u003C/span>, \u003Cspan class=\"hljs-string\">'container'\u003C/span>, \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">node, context\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> condition = node.\u003Cspan class=\"hljs-property\">attributes\u003C/span>?.\u003Cspan class=\"hljs-property\">condition\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> negate = node.\u003Cspan class=\"hljs-property\">attributes\u003C/span>?.\u003Cspan class=\"hljs-property\">negate\u003C/span> === \u003Cspan class=\"hljs-string\">'true'\u003C/span>;\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!condition) {\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">createErrorNode\u003C/span>(\u003Cspan class=\"hljs-string\">'if directive requires a condition attribute'\u003C/span>);\n            }\n            \n            \u003Cspan class=\"hljs-keyword\">try\u003C/span> {\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> result = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.evaluateCondition(condition);\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> showContent = negate ? !result : result;\n                \n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (showContent) {\n                    \u003Cspan class=\"hljs-keyword\">return\u003C/span> {\n                        \u003Cspan class=\"hljs-attr\">type\u003C/span>: \u003Cspan class=\"hljs-string\">'root'\u003C/span>,\n                        \u003Cspan class=\"hljs-attr\">children\u003C/span>: node.\u003Cspan class=\"hljs-property\">children\u003C/span>\n                    };\n                } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n                    \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-literal\">null\u003C/span>; \u003Cspan class=\"hljs-comment\">// Content is hidden\u003C/span>\n                }\n            } \u003Cspan class=\"hljs-keyword\">catch\u003C/span> (error) {\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">createErrorNode\u003C/span>(\u003Cspan class=\"hljs-string\">`Condition evaluation error: \u003Cspan class=\"hljs-subst\">${error.message}\u003C/span>`\u003C/span>);\n            }\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// Environment-based content directive\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">processor\u003C/span>.\u003Cspan class=\"hljs-title function_\">registerDirective\u003C/span>(\u003Cspan class=\"hljs-string\">'env'\u003C/span>, \u003Cspan class=\"hljs-string\">'container'\u003C/span>, \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">node, context\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> env = node.\u003Cspan class=\"hljs-property\">attributes\u003C/span>?.\u003Cspan class=\"hljs-property\">env\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> currentEnv = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">context\u003C/span>.\u003Cspan class=\"hljs-property\">environment\u003C/span> || \u003Cspan class=\"hljs-string\">'production'\u003C/span>;\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!env) {\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">createErrorNode\u003C/span>(\u003Cspan class=\"hljs-string\">'env directive requires an env attribute'\u003C/span>);\n            }\n            \n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> envList = env.\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\">e\u003C/span> =>\u003C/span> e.\u003Cspan class=\"hljs-title function_\">trim\u003C/span>());\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (envList.\u003Cspan class=\"hljs-title function_\">includes\u003C/span>(currentEnv)) {\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> {\n                    \u003Cspan class=\"hljs-attr\">type\u003C/span>: \u003Cspan class=\"hljs-string\">'root'\u003C/span>,\n                    \u003Cspan class=\"hljs-attr\">children\u003C/span>: node.\u003Cspan class=\"hljs-property\">children\u003C/span>\n                };\n            }\n            \n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-literal\">null\u003C/span>; \u003Cspan class=\"hljs-comment\">// Content hidden for this environment\u003C/span>\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// User role-based content directive\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">processor\u003C/span>.\u003Cspan class=\"hljs-title function_\">registerDirective\u003C/span>(\u003Cspan class=\"hljs-string\">'role'\u003C/span>, \u003Cspan class=\"hljs-string\">'container'\u003C/span>, \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">node, context\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> requiredRoles = node.\u003Cspan class=\"hljs-property\">attributes\u003C/span>?.\u003Cspan class=\"hljs-property\">roles\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\">r\u003C/span> =>\u003C/span> r.\u003Cspan class=\"hljs-title function_\">trim\u003C/span>()) || [];\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> userRoles = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">context\u003C/span>.\u003Cspan class=\"hljs-property\">userRoles\u003C/span> || [];\n            \n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> hasRequiredRole = requiredRoles.\u003Cspan class=\"hljs-title function_\">some\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">role\u003C/span> =>\u003C/span> userRoles.\u003Cspan class=\"hljs-title function_\">includes\u003C/span>(role));\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (hasRequiredRole) {\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> {\n                    \u003Cspan class=\"hljs-attr\">type\u003C/span>: \u003Cspan class=\"hljs-string\">'root'\u003C/span>,\n                    \u003Cspan class=\"hljs-attr\">children\u003C/span>: node.\u003Cspan class=\"hljs-property\">children\u003C/span>\n                };\n            }\n            \n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-literal\">null\u003C/span>; \u003Cspan class=\"hljs-comment\">// Content hidden for this user\u003C/span>\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// Feature flag directive\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">processor\u003C/span>.\u003Cspan class=\"hljs-title function_\">registerDirective\u003C/span>(\u003Cspan class=\"hljs-string\">'feature'\u003C/span>, \u003Cspan class=\"hljs-string\">'container'\u003C/span>, \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">node, context\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> featureName = node.\u003Cspan class=\"hljs-property\">attributes\u003C/span>?.\u003Cspan class=\"hljs-property\">name\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> enabledFeatures = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">context\u003C/span>.\u003Cspan class=\"hljs-property\">features\u003C/span> || {};\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!featureName) {\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">createErrorNode\u003C/span>(\u003Cspan class=\"hljs-string\">'feature directive requires a name attribute'\u003C/span>);\n            }\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (enabledFeatures[featureName]) {\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> {\n                    \u003Cspan class=\"hljs-attr\">type\u003C/span>: \u003Cspan class=\"hljs-string\">'root'\u003C/span>,\n                    \u003Cspan class=\"hljs-attr\">children\u003C/span>: node.\u003Cspan class=\"hljs-property\">children\u003C/span>\n                };\n            }\n            \n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-literal\">null\u003C/span>; \u003Cspan class=\"hljs-comment\">// Feature not enabled\u003C/span>\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// Dynamic content replacement directive\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">processor\u003C/span>.\u003Cspan class=\"hljs-title function_\">registerDirective\u003C/span>(\u003Cspan class=\"hljs-string\">'replace'\u003C/span>, \u003Cspan class=\"hljs-string\">'text'\u003C/span>, \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">node, context\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> key = node.\u003Cspan class=\"hljs-property\">attributes\u003C/span>?.\u003Cspan class=\"hljs-property\">key\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> defaultValue = node.\u003Cspan class=\"hljs-property\">attributes\u003C/span>?.\u003Cspan class=\"hljs-property\">default\u003C/span> || \u003Cspan class=\"hljs-string\">''\u003C/span>;\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!key) {\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">createErrorNode\u003C/span>(\u003Cspan class=\"hljs-string\">'replace directive requires a key attribute'\u003C/span>);\n            }\n            \n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> value = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">getContextValue\u003C/span>(key) || defaultValue;\n            \n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> {\n                \u003Cspan class=\"hljs-attr\">type\u003C/span>: \u003Cspan class=\"hljs-string\">'text'\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">value\u003C/span>: \u003Cspan class=\"hljs-title class_\">String\u003C/span>(value)\n            };\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// Loop directive for repeating content\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">processor\u003C/span>.\u003Cspan class=\"hljs-title function_\">registerDirective\u003C/span>(\u003Cspan class=\"hljs-string\">'each'\u003C/span>, \u003Cspan class=\"hljs-string\">'container'\u003C/span>, \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">node, context\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> items = node.\u003Cspan class=\"hljs-property\">attributes\u003C/span>?.\u003Cspan class=\"hljs-property\">items\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> itemVar = node.\u003Cspan class=\"hljs-property\">attributes\u003C/span>?.\u003Cspan class=\"hljs-property\">as\u003C/span> || \u003Cspan class=\"hljs-string\">'item'\u003C/span>;\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!items) {\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">createErrorNode\u003C/span>(\u003Cspan class=\"hljs-string\">'each directive requires an items attribute'\u003C/span>);\n            }\n            \n            \u003Cspan class=\"hljs-keyword\">try\u003C/span> {\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> itemArray = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">getContextValue\u003C/span>(items) || [];\n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!\u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">isArray\u003C/span>(itemArray)) {\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\">'Items must be an array'\u003C/span>);\n                }\n                \n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> repeatedContent = [];\n                \n                \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">let\u003C/span> i = \u003Cspan class=\"hljs-number\">0\u003C/span>; i < itemArray.\u003Cspan class=\"hljs-property\">length\u003C/span>; i++) {\n                    \u003Cspan class=\"hljs-keyword\">const\u003C/span> item = itemArray[i];\n                    \u003Cspan class=\"hljs-keyword\">const\u003C/span> itemContext = {\n                        ...\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">context\u003C/span>,\n                        [itemVar]: item,\n                        [\u003Cspan class=\"hljs-string\">`\u003Cspan class=\"hljs-subst\">${itemVar}\u003C/span>Index`\u003C/span>]: i,\n                        [\u003Cspan class=\"hljs-string\">`\u003Cspan class=\"hljs-subst\">${itemVar}\u003C/span>First`\u003C/span>]: i === \u003Cspan class=\"hljs-number\">0\u003C/span>,\n                        [\u003Cspan class=\"hljs-string\">`\u003Cspan class=\"hljs-subst\">${itemVar}\u003C/span>Last`\u003C/span>]: i === itemArray.\u003Cspan class=\"hljs-property\">length\u003C/span> - \u003Cspan class=\"hljs-number\">1\u003C/span>\n                    };\n                    \n                    \u003Cspan class=\"hljs-comment\">// Process template with item context\u003C/span>\n                    \u003Cspan class=\"hljs-keyword\">const\u003C/span> processedChildren = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">processTemplate\u003C/span>(node.\u003Cspan class=\"hljs-property\">children\u003C/span>, itemContext);\n                    repeatedContent.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(...processedChildren);\n                }\n                \n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> {\n                    \u003Cspan class=\"hljs-attr\">type\u003C/span>: \u003Cspan class=\"hljs-string\">'root'\u003C/span>,\n                    \u003Cspan class=\"hljs-attr\">children\u003C/span>: repeatedContent\n                };\n            } \u003Cspan class=\"hljs-keyword\">catch\u003C/span> (error) {\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">createErrorNode\u003C/span>(\u003Cspan class=\"hljs-string\">`Loop processing error: \u003Cspan class=\"hljs-subst\">${error.message}\u003C/span>`\u003C/span>);\n            }\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// Switch/case directive\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">processor\u003C/span>.\u003Cspan class=\"hljs-title function_\">registerDirective\u003C/span>(\u003Cspan class=\"hljs-string\">'switch'\u003C/span>, \u003Cspan class=\"hljs-string\">'container'\u003C/span>, \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">node, context\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> value = node.\u003Cspan class=\"hljs-property\">attributes\u003C/span>?.\u003Cspan class=\"hljs-property\">value\u003C/span>;\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!value) {\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">createErrorNode\u003C/span>(\u003Cspan class=\"hljs-string\">'switch directive requires a value attribute'\u003C/span>);\n            }\n            \n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> switchValue = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">getContextValue\u003C/span>(value);\n            \u003Cspan class=\"hljs-keyword\">let\u003C/span> matchedCase = \u003Cspan class=\"hljs-literal\">null\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">let\u003C/span> defaultCase = \u003Cspan class=\"hljs-literal\">null\u003C/span>;\n            \n            \u003Cspan class=\"hljs-comment\">// Find matching case or default\u003C/span>\n            \u003Cspan class=\"hljs-title function_\">visit\u003C/span>(node, \u003Cspan class=\"hljs-string\">'containerDirective'\u003C/span>, \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">caseNode\u003C/span>) =>\u003C/span> {\n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (caseNode.\u003Cspan class=\"hljs-property\">name\u003C/span> === \u003Cspan class=\"hljs-string\">'case'\u003C/span>) {\n                    \u003Cspan class=\"hljs-keyword\">const\u003C/span> caseValue = caseNode.\u003Cspan class=\"hljs-property\">attributes\u003C/span>?.\u003Cspan class=\"hljs-property\">value\u003C/span>;\n                    \u003Cspan class=\"hljs-keyword\">if\u003C/span> (caseValue === \u003Cspan class=\"hljs-title class_\">String\u003C/span>(switchValue)) {\n                        matchedCase = caseNode;\n                    }\n                } \u003Cspan class=\"hljs-keyword\">else\u003C/span> \u003Cspan class=\"hljs-keyword\">if\u003C/span> (caseNode.\u003Cspan class=\"hljs-property\">name\u003C/span> === \u003Cspan class=\"hljs-string\">'default'\u003C/span>) {\n                    defaultCase = caseNode;\n                }\n            });\n            \n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> selectedCase = matchedCase || defaultCase;\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (selectedCase) {\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> {\n                    \u003Cspan class=\"hljs-attr\">type\u003C/span>: \u003Cspan class=\"hljs-string\">'root'\u003C/span>,\n                    \u003Cspan class=\"hljs-attr\">children\u003C/span>: selectedCase.\u003Cspan class=\"hljs-property\">children\u003C/span>\n                };\n            }\n            \n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-literal\">null\u003C/span>; \u003Cspan class=\"hljs-comment\">// No matching case\u003C/span>\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">evaluateCondition\u003C/span>(\u003Cspan class=\"hljs-params\">condition\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Simple condition evaluation - extend for more complex logic\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> operators = {\n            \u003Cspan class=\"hljs-string\">'=='\u003C/span>: \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">a, b\u003C/span>) =>\u003C/span> a == b,\n            \u003Cspan class=\"hljs-string\">'==='\u003C/span>: \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">a, b\u003C/span>) =>\u003C/span> a === b,\n            \u003Cspan class=\"hljs-string\">'!='\u003C/span>: \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">a, b\u003C/span>) =>\u003C/span> a != b,\n            \u003Cspan class=\"hljs-string\">'!=='\u003C/span>: \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">a, b\u003C/span>) =>\u003C/span> a !== b,\n            \u003Cspan class=\"hljs-string\">'>'\u003C/span>: \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">a, b\u003C/span>) =>\u003C/span> a > b,\n            \u003Cspan class=\"hljs-string\">'>='\u003C/span>: \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">a, b\u003C/span>) =>\u003C/span> a >= b,\n            \u003Cspan class=\"hljs-string\">'<'\u003C/span>: \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">a, b\u003C/span>) =>\u003C/span> a < b,\n            \u003Cspan class=\"hljs-string\">'<='\u003C/span>: \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">a, b\u003C/span>) =>\u003C/span> a <= b,\n            \u003Cspan class=\"hljs-string\">'includes'\u003C/span>: \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">a, b\u003C/span>) =>\u003C/span> \u003Cspan class=\"hljs-title class_\">String\u003C/span>(a).\u003Cspan class=\"hljs-title function_\">includes\u003C/span>(\u003Cspan class=\"hljs-title class_\">String\u003C/span>(b)),\n            \u003Cspan class=\"hljs-string\">'startswith'\u003C/span>: \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">a, b\u003C/span>) =>\u003C/span> \u003Cspan class=\"hljs-title class_\">String\u003C/span>(a).\u003Cspan class=\"hljs-title function_\">startsWith\u003C/span>(\u003Cspan class=\"hljs-title class_\">String\u003C/span>(b)),\n            \u003Cspan class=\"hljs-string\">'endswith'\u003C/span>: \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">a, b\u003C/span>) =>\u003C/span> \u003Cspan class=\"hljs-title class_\">String\u003C/span>(a).\u003Cspan class=\"hljs-title function_\">endsWith\u003C/span>(\u003Cspan class=\"hljs-title class_\">String\u003C/span>(b))\n        };\n        \n        \u003Cspan class=\"hljs-comment\">// Parse condition: "context.key operator value"\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> conditionRegex = \u003Cspan class=\"hljs-regexp\">/^(\\w+(?:\\.\\w+)*)\\s*(==|===|!=|!==|>=|<=|>|<|includes|startswith|endswith)\\s*(.+)$/\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> match = condition.\u003Cspan class=\"hljs-title function_\">match\u003C/span>(conditionRegex);\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!match) {\n            \u003Cspan class=\"hljs-comment\">// Simple boolean check\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-title class_\">Boolean\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">getContextValue\u003C/span>(condition));\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> [, keyPath, operator, value] = match;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> contextValue = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">getContextValue\u003C/span>(keyPath);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> comparisonValue = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">parseValue\u003C/span>(value);\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> operatorFn = operators[operator];\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!operatorFn) {\n            \u003Cspan class=\"hljs-keyword\">throw\u003C/span> \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Error\u003C/span>(\u003Cspan class=\"hljs-string\">`Unknown operator: \u003Cspan class=\"hljs-subst\">${operator}\u003C/span>`\u003C/span>);\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-title function_\">operatorFn\u003C/span>(contextValue, comparisonValue);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">getContextValue\u003C/span>(\u003Cspan class=\"hljs-params\">keyPath\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> keys = keyPath.\u003Cspan class=\"hljs-title function_\">split\u003C/span>(\u003Cspan class=\"hljs-string\">'.'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> value = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">context\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">const\u003C/span> key \u003Cspan class=\"hljs-keyword\">of\u003C/span> keys) {\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (value && \u003Cspan class=\"hljs-keyword\">typeof\u003C/span> value === \u003Cspan class=\"hljs-string\">'object'\u003C/span> && key \u003Cspan class=\"hljs-keyword\">in\u003C/span> value) {\n                value = value[key];\n            } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-literal\">undefined\u003C/span>;\n            }\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> value;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">parseValue\u003C/span>(\u003Cspan class=\"hljs-params\">value\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Try to parse as JSON first\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">try\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-title class_\">JSON\u003C/span>.\u003Cspan class=\"hljs-title function_\">parse\u003C/span>(value);\n        } \u003Cspan class=\"hljs-keyword\">catch\u003C/span> {\n            \u003Cspan class=\"hljs-comment\">// Return as string if not valid JSON\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> value.\u003Cspan class=\"hljs-title function_\">replace\u003C/span>(\u003Cspan class=\"hljs-regexp\">/^["']|["']$/g\u003C/span>, \u003Cspan class=\"hljs-string\">''\u003C/span>); \u003Cspan class=\"hljs-comment\">// Remove quotes\u003C/span>\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">processTemplate\u003C/span>(\u003Cspan class=\"hljs-params\">children, itemContext\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Process template variables in text nodes\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> processed = [];\n        \n        \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">const\u003C/span> child \u003Cspan class=\"hljs-keyword\">of\u003C/span> children) {\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (child.\u003Cspan class=\"hljs-property\">type\u003C/span> === \u003Cspan class=\"hljs-string\">'text'\u003C/span>) {\n                processed.\u003Cspan class=\"hljs-title function_\">push\u003C/span>({\n                    ...child,\n                    \u003Cspan class=\"hljs-attr\">value\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">replaceVariables\u003C/span>(child.\u003Cspan class=\"hljs-property\">value\u003C/span>, itemContext)\n                });\n            } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n                processed.\u003Cspan class=\"hljs-title function_\">push\u003C/span>({\n                    ...child,\n                    \u003Cspan class=\"hljs-attr\">children\u003C/span>: child.\u003Cspan class=\"hljs-property\">children\u003C/span> ? \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">processTemplate\u003C/span>(child.\u003Cspan class=\"hljs-property\">children\u003C/span>, itemContext) : []\n                });\n            }\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> processed;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">replaceVariables\u003C/span>(\u003Cspan class=\"hljs-params\">text, context\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> text.\u003Cspan class=\"hljs-title function_\">replace\u003C/span>(\u003Cspan class=\"hljs-regexp\">/\\{\\{(\\w+(?:\\.\\w+)*)\\}\\}/g\u003C/span>, \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">match, keyPath\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> value = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">getContextValueFromObject\u003C/span>(keyPath, context);\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> value !== \u003Cspan class=\"hljs-literal\">undefined\u003C/span> ? \u003Cspan class=\"hljs-title class_\">String\u003C/span>(value) : match;\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">getContextValueFromObject\u003C/span>(\u003Cspan class=\"hljs-params\">keyPath, context\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> keys = keyPath.\u003Cspan class=\"hljs-title function_\">split\u003C/span>(\u003Cspan class=\"hljs-string\">'.'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> value = context;\n        \n        \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">const\u003C/span> key \u003Cspan class=\"hljs-keyword\">of\u003C/span> keys) {\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (value && \u003Cspan class=\"hljs-keyword\">typeof\u003C/span> value === \u003Cspan class=\"hljs-string\">'object'\u003C/span> && key \u003Cspan class=\"hljs-keyword\">in\u003C/span> value) {\n                value = value[key];\n            } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-literal\">undefined\u003C/span>;\n            }\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> value;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">createErrorNode\u003C/span>(\u003Cspan class=\"hljs-params\">message\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> {\n            \u003Cspan class=\"hljs-attr\">type\u003C/span>: \u003Cspan class=\"hljs-string\">'paragraph'\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">children\u003C/span>: [{\n                \u003Cspan class=\"hljs-attr\">type\u003C/span>: \u003Cspan class=\"hljs-string\">'text'\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">value\u003C/span>: \u003Cspan class=\"hljs-string\">`[Directive Error: \u003Cspan class=\"hljs-subst\">${message}\u003C/span>]`\u003C/span>\n            }]\n        };\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">updateContext\u003C/span>(\u003Cspan class=\"hljs-params\">newContext\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">context\u003C/span> = { ...\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">context\u003C/span>, ...newContext };\n    }\n}\n\n\u003Cspan class=\"hljs-variable language_\">module\u003C/span>.\u003Cspan class=\"hljs-property\">exports\u003C/span> = \u003Cspan class=\"hljs-title class_\">ConditionalDirectiveSystem\u003C/span>;\n\u003C/code>\u003C/pre>\u003Ch2 id=\"security-and-performance-considerations\">Security and Performance Considerations\u003C/h2>\n\u003Ch3 id=\"secure-directive-processing\">Secure Directive Processing\u003C/h3>\n\u003Cpre>\u003Ccode class=\"hljs language-javascript\">\u003Cspan class=\"hljs-comment\">// secure-directives.js - Security-focused directive processing\u003C/span>\n\u003Cspan class=\"hljs-keyword\">const\u003C/span> \u003Cspan class=\"hljs-title class_\">DOMPurify\u003C/span> = \u003Cspan class=\"hljs-built_in\">require\u003C/span>(\u003Cspan class=\"hljs-string\">'isomorphic-dompurify'\u003C/span>);\n\u003Cspan class=\"hljs-keyword\">const\u003C/span> { \u003Cspan class=\"hljs-variable constant_\">JSDOM\u003C/span> } = \u003Cspan class=\"hljs-built_in\">require\u003C/span>(\u003Cspan class=\"hljs-string\">'jsdom'\u003C/span>);\n\n\u003Cspan class=\"hljs-keyword\">class\u003C/span> \u003Cspan class=\"hljs-title class_\">SecureDirectiveProcessor\u003C/span> {\n    \u003Cspan class=\"hljs-title function_\">constructor\u003C/span>(\u003Cspan class=\"hljs-params\">processor, options = {}\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">processor\u003C/span> = processor;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span> = {\n            \u003Cspan class=\"hljs-attr\">allowedDirectives\u003C/span>: options.\u003Cspan class=\"hljs-property\">allowedDirectives\u003C/span> || [],\n            \u003Cspan class=\"hljs-attr\">blockedDirectives\u003C/span>: options.\u003Cspan class=\"hljs-property\">blockedDirectives\u003C/span> || [],\n            \u003Cspan class=\"hljs-attr\">maxProcessingTime\u003C/span>: options.\u003Cspan class=\"hljs-property\">maxProcessingTime\u003C/span> || \u003Cspan class=\"hljs-number\">5000\u003C/span>, \u003Cspan class=\"hljs-comment\">// 5 seconds\u003C/span>\n            \u003Cspan class=\"hljs-attr\">maxContentLength\u003C/span>: options.\u003Cspan class=\"hljs-property\">maxContentLength\u003C/span> || \u003Cspan class=\"hljs-number\">1024\u003C/span> * \u003Cspan class=\"hljs-number\">1024\u003C/span>, \u003Cspan class=\"hljs-comment\">// 1MB\u003C/span>\n            \u003Cspan class=\"hljs-attr\">sanitizeOutput\u003C/span>: options.\u003Cspan class=\"hljs-property\">sanitizeOutput\u003C/span> !== \u003Cspan class=\"hljs-literal\">false\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">allowUnsafeEval\u003C/span>: options.\u003Cspan class=\"hljs-property\">allowUnsafeEval\u003C/span> || \u003Cspan class=\"hljs-literal\">false\u003C/span>,\n            ...options\n        };\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">setupSecurityMeasures\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">setupSecurityMeasures\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Override processor methods with security checks\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> originalRegisterDirective = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">processor\u003C/span>.\u003Cspan class=\"hljs-property\">registerDirective\u003C/span>.\u003Cspan class=\"hljs-title function_\">bind\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">processor\u003C/span>);\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">processor\u003C/span>.\u003Cspan class=\"hljs-property\">registerDirective\u003C/span> = \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">name, type, handler\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">isDirectiveAllowed\u003C/span>(name)) {\n                \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">warn\u003C/span>(\u003Cspan class=\"hljs-string\">`Directive \u003Cspan class=\"hljs-subst\">${name}\u003C/span> is not allowed`\u003C/span>);\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n            }\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">isDirectiveBlocked\u003C/span>(name)) {\n                \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">warn\u003C/span>(\u003Cspan class=\"hljs-string\">`Directive \u003Cspan class=\"hljs-subst\">${name}\u003C/span> is explicitly blocked`\u003C/span>);\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n            }\n            \n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> secureHandler = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">wrapHandlerWithSecurity\u003C/span>(handler, name);\n            \u003Cspan class=\"hljs-title function_\">originalRegisterDirective\u003C/span>(name, type, secureHandler);\n        };\n        \n        \u003Cspan class=\"hljs-comment\">// Override process method with additional security\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> originalProcess = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">processor\u003C/span>.\u003Cspan class=\"hljs-property\">process\u003C/span>.\u003Cspan class=\"hljs-title function_\">bind\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">processor\u003C/span>);\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">processor\u003C/span>.\u003Cspan class=\"hljs-property\">process\u003C/span> = \u003Cspan class=\"hljs-keyword\">async\u003C/span> (markdown, file) => {\n            \u003Cspan class=\"hljs-comment\">// Content length check\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (markdown.\u003Cspan class=\"hljs-property\">length\u003C/span> > \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">maxContentLength\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\">`Content too large: \u003Cspan class=\"hljs-subst\">${markdown.length}\u003C/span> bytes exceeds limit of \u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.options.maxContentLength}\u003C/span> bytes`\u003C/span>);\n            }\n            \n            \u003Cspan class=\"hljs-comment\">// Processing timeout\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> processPromise = \u003Cspan class=\"hljs-title function_\">originalProcess\u003C/span>(markdown, file);\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> timeoutPromise = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Promise\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">_, reject\u003C/span>) =>\u003C/span> {\n                \u003Cspan class=\"hljs-built_in\">setTimeout\u003C/span>(\u003Cspan class=\"hljs-function\">() =>\u003C/span> \u003Cspan class=\"hljs-title function_\">reject\u003C/span>(\u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Error\u003C/span>(\u003Cspan class=\"hljs-string\">'Processing timeout'\u003C/span>)), \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">maxProcessingTime\u003C/span>);\n            });\n            \n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> result = \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-title class_\">Promise\u003C/span>.\u003Cspan class=\"hljs-title function_\">race\u003C/span>([processPromise, timeoutPromise]);\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">sanitizeOutput\u003C/span>) {\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">sanitizeHtml\u003C/span>(result);\n            }\n            \n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> result;\n        };\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">isDirectiveAllowed\u003C/span>(\u003Cspan class=\"hljs-params\">name\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">allowedDirectives\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span> === \u003Cspan class=\"hljs-number\">0\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-literal\">true\u003C/span>; \u003Cspan class=\"hljs-comment\">// Allow all if no restrictions\u003C/span>\n        }\n        \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-property\">allowedDirectives\u003C/span>.\u003Cspan class=\"hljs-title function_\">includes\u003C/span>(name);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">isDirectiveBlocked\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\">options\u003C/span>.\u003Cspan class=\"hljs-property\">blockedDirectives\u003C/span>.\u003Cspan class=\"hljs-title function_\">includes\u003C/span>(name);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">wrapHandlerWithSecurity\u003C/span>(\u003Cspan class=\"hljs-params\">handler, directiveName\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">node, context\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">try\u003C/span> {\n                \u003Cspan class=\"hljs-comment\">// Validate node structure\u003C/span>\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">validateNode\u003C/span>(node, directiveName);\n                \n                \u003Cspan class=\"hljs-comment\">// Execute handler with timeout\u003C/span>\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> startTime = \u003Cspan class=\"hljs-title class_\">Date\u003C/span>.\u003Cspan class=\"hljs-title function_\">now\u003C/span>();\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> result = \u003Cspan class=\"hljs-title function_\">handler\u003C/span>(node, context);\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> endTime = \u003Cspan class=\"hljs-title class_\">Date\u003C/span>.\u003Cspan class=\"hljs-title function_\">now\u003C/span>();\n                \n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (endTime - startTime > \u003Cspan class=\"hljs-number\">1000\u003C/span>) { \u003Cspan class=\"hljs-comment\">// 1 second warning\u003C/span>\n                    \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">warn\u003C/span>(\u003Cspan class=\"hljs-string\">`Directive \u003Cspan class=\"hljs-subst\">${directiveName}\u003C/span> took \u003Cspan class=\"hljs-subst\">${endTime - startTime}\u003C/span>ms to process`\u003C/span>);\n                }\n                \n                \u003Cspan class=\"hljs-comment\">// Validate result\u003C/span>\n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (result) {\n                    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">validateDirectiveOutput\u003C/span>(result, directiveName);\n                }\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_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">error\u003C/span>(\u003Cspan class=\"hljs-string\">`Security error in directive \u003Cspan class=\"hljs-subst\">${directiveName}\u003C/span>:`\u003C/span>, error);\n                \n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> {\n                    \u003Cspan class=\"hljs-attr\">type\u003C/span>: \u003Cspan class=\"hljs-string\">'paragraph'\u003C/span>,\n                    \u003Cspan class=\"hljs-attr\">children\u003C/span>: [{\n                        \u003Cspan class=\"hljs-attr\">type\u003C/span>: \u003Cspan class=\"hljs-string\">'text'\u003C/span>,\n                        \u003Cspan class=\"hljs-attr\">value\u003C/span>: \u003Cspan class=\"hljs-string\">`[Security Error: \u003Cspan class=\"hljs-subst\">${directiveName}\u003C/span>]`\u003C/span>\n                    }]\n                };\n            }\n        };\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">validateNode\u003C/span>(\u003Cspan class=\"hljs-params\">node, directiveName\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Check for suspicious attributes\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (node.\u003Cspan class=\"hljs-property\">attributes\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">const\u003C/span> [key, value] \u003Cspan class=\"hljs-keyword\">of\u003C/span> \u003Cspan class=\"hljs-title class_\">Object\u003C/span>.\u003Cspan class=\"hljs-title function_\">entries\u003C/span>(node.\u003Cspan class=\"hljs-property\">attributes\u003C/span>)) {\n                \u003Cspan class=\"hljs-comment\">// Block script-related attributes\u003C/span>\n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> ([\u003Cspan class=\"hljs-string\">'onclick'\u003C/span>, \u003Cspan class=\"hljs-string\">'onload'\u003C/span>, \u003Cspan class=\"hljs-string\">'onerror'\u003C/span>, \u003Cspan class=\"hljs-string\">'onmouseover'\u003C/span>].\u003Cspan class=\"hljs-title function_\">includes\u003C/span>(key.\u003Cspan class=\"hljs-title function_\">toLowerCase\u003C/span>())) {\n                    \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">allowUnsafeEval\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\">`Unsafe attribute \u003Cspan class=\"hljs-subst\">${key}\u003C/span> not allowed in directive \u003Cspan class=\"hljs-subst\">${directiveName}\u003C/span>`\u003C/span>);\n                    }\n                }\n                \n                \u003Cspan class=\"hljs-comment\">// Check for suspicious values\u003C/span>\n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-keyword\">typeof\u003C/span> value === \u003Cspan class=\"hljs-string\">'string'\u003C/span> && \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">containsSuspiciousContent\u003C/span>(value)) {\n                    \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">warn\u003C/span>(\u003Cspan class=\"hljs-string\">`Potentially unsafe content in attribute \u003Cspan class=\"hljs-subst\">${key}\u003C/span> of directive \u003Cspan class=\"hljs-subst\">${directiveName}\u003C/span>`\u003C/span>);\n                }\n            }\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Validate children content\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (node.\u003Cspan class=\"hljs-property\">children\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">validateChildren\u003C/span>(node.\u003Cspan class=\"hljs-property\">children\u003C/span>, directiveName);\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">validateChildren\u003C/span>(\u003Cspan class=\"hljs-params\">children, directiveName\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> visit = \u003Cspan class=\"hljs-built_in\">require\u003C/span>(\u003Cspan class=\"hljs-string\">'unist-util-visit'\u003C/span>);\n        \n        \u003Cspan class=\"hljs-title function_\">visit\u003C/span>({ \u003Cspan class=\"hljs-attr\">type\u003C/span>: \u003Cspan class=\"hljs-string\">'root'\u003C/span>, children }, \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">child\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (child.\u003Cspan class=\"hljs-property\">type\u003C/span> === \u003Cspan class=\"hljs-string\">'html'\u003C/span>) {\n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">isHtmlSafe\u003C/span>(child.\u003Cspan class=\"hljs-property\">value\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\">`Unsafe HTML detected in directive \u003Cspan class=\"hljs-subst\">${directiveName}\u003C/span>`\u003C/span>);\n                }\n            }\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (child.\u003Cspan class=\"hljs-property\">value\u003C/span> && \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">containsSuspiciousContent\u003C/span>(child.\u003Cspan class=\"hljs-property\">value\u003C/span>)) {\n                \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">warn\u003C/span>(\u003Cspan class=\"hljs-string\">`Potentially suspicious content in directive \u003Cspan class=\"hljs-subst\">${directiveName}\u003C/span>`\u003C/span>);\n            }\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">containsSuspiciousContent\u003C/span>(\u003Cspan class=\"hljs-params\">content\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> suspiciousPatterns = [\n            \u003Cspan class=\"hljs-regexp\">/<script[^>]*>/i\u003C/span>,\n            \u003Cspan class=\"hljs-regexp\">/javascript:/i\u003C/span>,\n            \u003Cspan class=\"hljs-regexp\">/data:text\\/html/i\u003C/span>,\n            \u003Cspan class=\"hljs-regexp\">/vbscript:/i\u003C/span>,\n            \u003Cspan class=\"hljs-regexp\">/on\\w+\\s*=/i\u003C/span>,\n            \u003Cspan class=\"hljs-regexp\">/eval\\s*\\(/i\u003C/span>,\n            \u003Cspan class=\"hljs-regexp\">/Function\\s*\\(/i\u003C/span>\n        ];\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> suspiciousPatterns.\u003Cspan class=\"hljs-title function_\">some\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">pattern\u003C/span> =>\u003C/span> pattern.\u003Cspan class=\"hljs-title function_\">test\u003C/span>(content));\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">isHtmlSafe\u003C/span>(\u003Cspan class=\"hljs-params\">html\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Basic HTML safety check\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> dangerousTags = [\u003Cspan class=\"hljs-string\">'script'\u003C/span>, \u003Cspan class=\"hljs-string\">'iframe'\u003C/span>, \u003Cspan class=\"hljs-string\">'object'\u003C/span>, \u003Cspan class=\"hljs-string\">'embed'\u003C/span>, \u003Cspan class=\"hljs-string\">'form'\u003C/span>];\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> tagPattern = \u003Cspan class=\"hljs-regexp\">/<(\\w+)[^>]*>/gi\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> match;\n        \n        \u003Cspan class=\"hljs-keyword\">while\u003C/span> ((match = tagPattern.\u003Cspan class=\"hljs-title function_\">exec\u003C/span>(html)) !== \u003Cspan class=\"hljs-literal\">null\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (dangerousTags.\u003Cspan class=\"hljs-title function_\">includes\u003C/span>(match[\u003Cspan class=\"hljs-number\">1\u003C/span>].\u003Cspan class=\"hljs-title function_\">toLowerCase\u003C/span>())) {\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-literal\">false\u003C/span>;\n            }\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-literal\">true\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">validateDirectiveOutput\u003C/span>(\u003Cspan class=\"hljs-params\">output, directiveName\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!output || \u003Cspan class=\"hljs-keyword\">typeof\u003C/span> output !== \u003Cspan class=\"hljs-string\">'object'\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Check for suspicious data properties\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (output.\u003Cspan class=\"hljs-property\">data\u003C/span> && output.\u003Cspan class=\"hljs-property\">data\u003C/span>.\u003Cspan class=\"hljs-property\">hProperties\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> props = output.\u003Cspan class=\"hljs-property\">data\u003C/span>.\u003Cspan class=\"hljs-property\">hProperties\u003C/span>;\n            \n            \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">const\u003C/span> [key, value] \u003Cspan class=\"hljs-keyword\">of\u003C/span> \u003Cspan class=\"hljs-title class_\">Object\u003C/span>.\u003Cspan class=\"hljs-title function_\">entries\u003C/span>(props)) {\n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (key.\u003Cspan class=\"hljs-title function_\">startsWith\u003C/span>(\u003Cspan class=\"hljs-string\">'on'\u003C/span>) && !\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">allowUnsafeEval\u003C/span>) {\n                    \u003Cspan class=\"hljs-keyword\">delete\u003C/span> props[key];\n                    \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">warn\u003C/span>(\u003Cspan class=\"hljs-string\">`Removed unsafe property \u003Cspan class=\"hljs-subst\">${key}\u003C/span> from directive \u003Cspan class=\"hljs-subst\">${directiveName}\u003C/span> output`\u003C/span>);\n                }\n            }\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Recursively validate children\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (output.\u003Cspan class=\"hljs-property\">children\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">validateChildren\u003C/span>(output.\u003Cspan class=\"hljs-property\">children\u003C/span>, directiveName);\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">sanitizeHtml\u003C/span>(\u003Cspan class=\"hljs-params\">html\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-keyword\">typeof\u003C/span> html !== \u003Cspan class=\"hljs-string\">'string'\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> html;\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">try\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> \u003Cspan class=\"hljs-variable language_\">window\u003C/span> = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title function_\">JSDOM\u003C/span>(\u003Cspan class=\"hljs-string\">''\u003C/span>).\u003Cspan class=\"hljs-property\">window\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> purify = \u003Cspan class=\"hljs-title class_\">DOMPurify\u003C/span>(\u003Cspan class=\"hljs-variable language_\">window\u003C/span>);\n            \n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> config = {\n                \u003Cspan class=\"hljs-attr\">ALLOWED_TAGS\u003C/span>: [\n                    \u003Cspan class=\"hljs-string\">'p'\u003C/span>, \u003Cspan class=\"hljs-string\">'div'\u003C/span>, \u003Cspan class=\"hljs-string\">'span'\u003C/span>, \u003Cspan class=\"hljs-string\">'h1'\u003C/span>, \u003Cspan class=\"hljs-string\">'h2'\u003C/span>, \u003Cspan class=\"hljs-string\">'h3'\u003C/span>, \u003Cspan class=\"hljs-string\">'h4'\u003C/span>, \u003Cspan class=\"hljs-string\">'h5'\u003C/span>, \u003Cspan class=\"hljs-string\">'h6'\u003C/span>,\n                    \u003Cspan class=\"hljs-string\">'ul'\u003C/span>, \u003Cspan class=\"hljs-string\">'ol'\u003C/span>, \u003Cspan class=\"hljs-string\">'li'\u003C/span>, \u003Cspan class=\"hljs-string\">'a'\u003C/span>, \u003Cspan class=\"hljs-string\">'img'\u003C/span>, \u003Cspan class=\"hljs-string\">'code'\u003C/span>, \u003Cspan class=\"hljs-string\">'pre'\u003C/span>, \u003Cspan class=\"hljs-string\">'blockquote'\u003C/span>,\n                    \u003Cspan class=\"hljs-string\">'table'\u003C/span>, \u003Cspan class=\"hljs-string\">'thead'\u003C/span>, \u003Cspan class=\"hljs-string\">'tbody'\u003C/span>, \u003Cspan class=\"hljs-string\">'tr'\u003C/span>, \u003Cspan class=\"hljs-string\">'th'\u003C/span>, \u003Cspan class=\"hljs-string\">'td'\u003C/span>, \u003Cspan class=\"hljs-string\">'br'\u003C/span>, \u003Cspan class=\"hljs-string\">'hr'\u003C/span>,\n                    \u003Cspan class=\"hljs-string\">'strong'\u003C/span>, \u003Cspan class=\"hljs-string\">'em'\u003C/span>, \u003Cspan class=\"hljs-string\">'u'\u003C/span>, \u003Cspan class=\"hljs-string\">'s'\u003C/span>, \u003Cspan class=\"hljs-string\">'mark'\u003C/span>, \u003Cspan class=\"hljs-string\">'details'\u003C/span>, \u003Cspan class=\"hljs-string\">'summary'\u003C/span>\n                ],\n                \u003Cspan class=\"hljs-attr\">ALLOWED_ATTR\u003C/span>: [\n                    \u003Cspan class=\"hljs-string\">'href'\u003C/span>, \u003Cspan class=\"hljs-string\">'src'\u003C/span>, \u003Cspan class=\"hljs-string\">'alt'\u003C/span>, \u003Cspan class=\"hljs-string\">'title'\u003C/span>, \u003Cspan class=\"hljs-string\">'class'\u003C/span>, \u003Cspan class=\"hljs-string\">'id'\u003C/span>, \u003Cspan class=\"hljs-string\">'data-*'\u003C/span>,\n                    \u003Cspan class=\"hljs-string\">'target'\u003C/span>, \u003Cspan class=\"hljs-string\">'rel'\u003C/span>, \u003Cspan class=\"hljs-string\">'width'\u003C/span>, \u003Cspan class=\"hljs-string\">'height'\u003C/span>\n                ],\n                \u003Cspan class=\"hljs-attr\">ALLOW_DATA_ATTR\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>\n            };\n            \n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> purify.\u003Cspan class=\"hljs-title function_\">sanitize\u003C/span>(html, config);\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\">'HTML sanitization error:'\u003C/span>, error);\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> html; \u003Cspan class=\"hljs-comment\">// Return original on error\u003C/span>\n        }\n    }\n    \n    \u003Cspan class=\"hljs-comment\">// Rate limiting for directive processing\u003C/span>\n    \u003Cspan class=\"hljs-title function_\">createRateLimiter\u003C/span>(\u003Cspan class=\"hljs-params\">maxRequests = \u003Cspan class=\"hljs-number\">100\u003C/span>, windowMs = \u003Cspan class=\"hljs-number\">60000\u003C/span>\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> requests = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Map\u003C/span>();\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">directiveName\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> now = \u003Cspan class=\"hljs-title class_\">Date\u003C/span>.\u003Cspan class=\"hljs-title function_\">now\u003C/span>();\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> key = directiveName;\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!requests.\u003Cspan class=\"hljs-title function_\">has\u003C/span>(key)) {\n                requests.\u003Cspan class=\"hljs-title function_\">set\u003C/span>(key, []);\n            }\n            \n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> directiveRequests = requests.\u003Cspan class=\"hljs-title function_\">get\u003C/span>(key);\n            \n            \u003Cspan class=\"hljs-comment\">// Clean old requests\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> validRequests = directiveRequests.\u003Cspan class=\"hljs-title function_\">filter\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">time\u003C/span> =>\u003C/span> now - time < windowMs);\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (validRequests.\u003Cspan class=\"hljs-property\">length\u003C/span> >= maxRequests) {\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\">`Rate limit exceeded for directive \u003Cspan class=\"hljs-subst\">${directiveName}\u003C/span>`\u003C/span>);\n            }\n            \n            validRequests.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(now);\n            requests.\u003Cspan class=\"hljs-title function_\">set\u003C/span>(key, validRequests);\n        };\n    }\n}\n\n\u003Cspan class=\"hljs-variable language_\">module\u003C/span>.\u003Cspan class=\"hljs-property\">exports\u003C/span> = \u003Cspan class=\"hljs-title class_\">SecureDirectiveProcessor\u003C/span>;\n\u003C/code>\u003C/pre>\u003Ch2 id=\"integration-with-modern-development-workflows\">Integration with Modern Development Workflows\u003C/h2>\n\u003Cp>Markdown custom directives integrate seamlessly with comprehensive content management systems. When combined with \u003Ca href=\"/blog/markdown-content-validation-automated-quality-assurance-complete-guide\">automated content validation and quality assurance systems\u003C/a>, custom directives enable sophisticated content processing pipelines that maintain quality and consistency while providing advanced interactive features for complex documentation and content platforms.\u003C/p>\n\u003Cp>For advanced content presentation, custom directives work effectively with \u003Ca href=\"/blog/markdown-responsive-images-complete-guide\">responsive design and mobile optimization techniques\u003C/a> to create adaptive content experiences that render consistently across devices while leveraging device-specific capabilities through conditional directive processing.\u003C/p>\n\u003Cp>When building comprehensive documentation platforms, custom directives complement \u003Ca href=\"/blog/markdown-search-indexing-optimization-complete-guide\">search optimization and indexing systems\u003C/a> to create searchable, interactive content that maintains SEO performance while providing rich user interactions and dynamic content generation capabilities.\u003C/p>\n\u003Ch2 id=\"real-world-implementation-examples\">Real-World Implementation Examples\u003C/h2>\n\u003Ch3 id=\"documentation-platform-integration\">Documentation Platform Integration\u003C/h3>\n\u003Cpre>\u003Ccode class=\"hljs language-javascript\">\u003Cspan class=\"hljs-comment\">// docs-platform-integration.js - Complete documentation platform with custom directives\u003C/span>\n\u003Cspan class=\"hljs-keyword\">class\u003C/span> \u003Cspan class=\"hljs-title class_\">DocumentationPlatform\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\">baseUrl\u003C/span>: options.\u003Cspan class=\"hljs-property\">baseUrl\u003C/span> || \u003Cspan class=\"hljs-string\">''\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">apiEndpoint\u003C/span>: options.\u003Cspan class=\"hljs-property\">apiEndpoint\u003C/span> || \u003Cspan class=\"hljs-string\">'/api'\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">enableInteractive\u003C/span>: options.\u003Cspan class=\"hljs-property\">enableInteractive\u003C/span> !== \u003Cspan class=\"hljs-literal\">false\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">userContext\u003C/span>: options.\u003Cspan class=\"hljs-property\">userContext\u003C/span> || {},\n            ...options\n        };\n        \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            \u003Cspan class=\"hljs-attr\">allowUnsafeDirectives\u003C/span>: \u003Cspan class=\"hljs-literal\">false\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        });\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">setupDocumentationDirectives\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">setupDocumentationDirectives\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// API documentation directive\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">processor\u003C/span>.\u003Cspan class=\"hljs-title function_\">registerDirective\u003C/span>(\u003Cspan class=\"hljs-string\">'api'\u003C/span>, \u003Cspan class=\"hljs-string\">'container'\u003C/span>, \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">node, context\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> method = node.\u003Cspan class=\"hljs-property\">attributes\u003C/span>?.\u003Cspan class=\"hljs-property\">method\u003C/span>?.\u003Cspan class=\"hljs-title function_\">toUpperCase\u003C/span>() || \u003Cspan class=\"hljs-string\">'GET'\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> endpoint = node.\u003Cspan class=\"hljs-property\">attributes\u003C/span>?.\u003Cspan class=\"hljs-property\">endpoint\u003C/span> || \u003Cspan class=\"hljs-string\">''\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> title = node.\u003Cspan class=\"hljs-property\">attributes\u003C/span>?.\u003Cspan class=\"hljs-property\">title\u003C/span> || \u003Cspan class=\"hljs-string\">`\u003Cspan class=\"hljs-subst\">${method}\u003C/span> \u003Cspan class=\"hljs-subst\">${endpoint}\u003C/span>`\u003C/span>;\n            \n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> {\n                \u003Cspan class=\"hljs-attr\">type\u003C/span>: \u003Cspan class=\"hljs-string\">'paragraph'\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">data\u003C/span>: {\n                    \u003Cspan class=\"hljs-attr\">hName\u003C/span>: \u003Cspan class=\"hljs-string\">'div'\u003C/span>,\n                    \u003Cspan class=\"hljs-attr\">hProperties\u003C/span>: {\n                        \u003Cspan class=\"hljs-attr\">className\u003C/span>: [\u003Cspan class=\"hljs-string\">'api-documentation'\u003C/span>],\n                        \u003Cspan class=\"hljs-string\">'data-api-method'\u003C/span>: method,\n                        \u003Cspan class=\"hljs-string\">'data-api-endpoint'\u003C/span>: endpoint\n                    }\n                },\n                \u003Cspan class=\"hljs-attr\">children\u003C/span>: [\n                    {\n                        \u003Cspan class=\"hljs-attr\">type\u003C/span>: \u003Cspan class=\"hljs-string\">'text'\u003C/span>,\n                        \u003Cspan class=\"hljs-attr\">data\u003C/span>: {\n                            \u003Cspan class=\"hljs-attr\">hName\u003C/span>: \u003Cspan class=\"hljs-string\">'h4'\u003C/span>,\n                            \u003Cspan class=\"hljs-attr\">hProperties\u003C/span>: { \u003Cspan class=\"hljs-attr\">className\u003C/span>: [\u003Cspan class=\"hljs-string\">'api-title'\u003C/span>] }\n                        },\n                        \u003Cspan class=\"hljs-attr\">value\u003C/span>: title\n                    },\n                    {\n                        \u003Cspan class=\"hljs-attr\">type\u003C/span>: \u003Cspan class=\"hljs-string\">'paragraph'\u003C/span>,\n                        \u003Cspan class=\"hljs-attr\">data\u003C/span>: {\n                            \u003Cspan class=\"hljs-attr\">hName\u003C/span>: \u003Cspan class=\"hljs-string\">'div'\u003C/span>,\n                            \u003Cspan class=\"hljs-attr\">hProperties\u003C/span>: { \u003Cspan class=\"hljs-attr\">className\u003C/span>: [\u003Cspan class=\"hljs-string\">'api-method-badge'\u003C/span>, \u003Cspan class=\"hljs-string\">`method-\u003Cspan class=\"hljs-subst\">${method.toLowerCase()}\u003C/span>`\u003C/span>] }\n                        },\n                        \u003Cspan class=\"hljs-attr\">children\u003C/span>: [{ \u003Cspan class=\"hljs-attr\">type\u003C/span>: \u003Cspan class=\"hljs-string\">'text'\u003C/span>, \u003Cspan class=\"hljs-attr\">value\u003C/span>: method }]\n                    },\n                    {\n                        \u003Cspan class=\"hljs-attr\">type\u003C/span>: \u003Cspan class=\"hljs-string\">'paragraph'\u003C/span>,\n                        \u003Cspan class=\"hljs-attr\">data\u003C/span>: {\n                            \u003Cspan class=\"hljs-attr\">hName\u003C/span>: \u003Cspan class=\"hljs-string\">'code'\u003C/span>,\n                            \u003Cspan class=\"hljs-attr\">hProperties\u003C/span>: { \u003Cspan class=\"hljs-attr\">className\u003C/span>: [\u003Cspan class=\"hljs-string\">'api-endpoint'\u003C/span>] }\n                        },\n                        \u003Cspan class=\"hljs-attr\">children\u003C/span>: [{ \u003Cspan class=\"hljs-attr\">type\u003C/span>: \u003Cspan class=\"hljs-string\">'text'\u003C/span>, \u003Cspan class=\"hljs-attr\">value\u003C/span>: endpoint }]\n                    },\n                    ...node.\u003Cspan class=\"hljs-property\">children\u003C/span>\n                ]\n            };\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// Interactive code example directive\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">processor\u003C/span>.\u003Cspan class=\"hljs-title function_\">registerDirective\u003C/span>(\u003Cspan class=\"hljs-string\">'example'\u003C/span>, \u003Cspan class=\"hljs-string\">'fence'\u003C/span>, \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">node, context\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> language = node.\u003Cspan class=\"hljs-property\">name\u003C/span> || \u003Cspan class=\"hljs-string\">'javascript'\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> runnable = node.\u003Cspan class=\"hljs-property\">attributes\u003C/span>?.\u003Cspan class=\"hljs-property\">runnable\u003C/span> === \u003Cspan class=\"hljs-string\">'true'\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> editable = node.\u003Cspan class=\"hljs-property\">attributes\u003C/span>?.\u003Cspan class=\"hljs-property\">editable\u003C/span> === \u003Cspan class=\"hljs-string\">'true'\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> showOutput = node.\u003Cspan class=\"hljs-property\">attributes\u003C/span>?.\u003Cspan class=\"hljs-property\">output\u003C/span> === \u003Cspan class=\"hljs-string\">'true'\u003C/span>;\n            \n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> exampleConfig = {\n                language,\n                \u003Cspan class=\"hljs-attr\">code\u003C/span>: node.\u003Cspan class=\"hljs-property\">value\u003C/span>,\n                runnable,\n                editable,\n                showOutput,\n                \u003Cspan class=\"hljs-attr\">id\u003C/span>: \u003Cspan class=\"hljs-string\">`example-\u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-built_in\">Date\u003C/span>.now()}\u003C/span>-\u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-built_in\">Math\u003C/span>.random().toString(\u003Cspan class=\"hljs-number\">36\u003C/span>).substr(\u003Cspan class=\"hljs-number\">2\u003C/span>, \u003Cspan class=\"hljs-number\">9\u003C/span>)}\u003C/span>`\u003C/span>\n            };\n            \n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> {\n                \u003Cspan class=\"hljs-attr\">type\u003C/span>: \u003Cspan class=\"hljs-string\">'paragraph'\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">data\u003C/span>: {\n                    \u003Cspan class=\"hljs-attr\">hName\u003C/span>: \u003Cspan class=\"hljs-string\">'div'\u003C/span>,\n                    \u003Cspan class=\"hljs-attr\">hProperties\u003C/span>: {\n                        \u003Cspan class=\"hljs-attr\">className\u003C/span>: [\u003Cspan class=\"hljs-string\">'interactive-example'\u003C/span>],\n                        \u003Cspan class=\"hljs-string\">'data-example-config'\u003C/span>: \u003Cspan class=\"hljs-title class_\">JSON\u003C/span>.\u003Cspan class=\"hljs-title function_\">stringify\u003C/span>(exampleConfig)\n                    }\n                },\n                \u003Cspan class=\"hljs-attr\">children\u003C/span>: [{\n                    \u003Cspan class=\"hljs-attr\">type\u003C/span>: \u003Cspan class=\"hljs-string\">'text'\u003C/span>,\n                    \u003Cspan class=\"hljs-attr\">value\u003C/span>: \u003Cspan class=\"hljs-string\">`[Interactive Example: \u003Cspan class=\"hljs-subst\">${language}\u003C/span>]`\u003C/span>\n                }]\n            };\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// Tabbed content directive\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">processor\u003C/span>.\u003Cspan class=\"hljs-title function_\">registerDirective\u003C/span>(\u003Cspan class=\"hljs-string\">'tabs'\u003C/span>, \u003Cspan class=\"hljs-string\">'container'\u003C/span>, \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">node, context\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> tabs = [];\n            \u003Cspan class=\"hljs-keyword\">let\u003C/span> currentTab = \u003Cspan class=\"hljs-literal\">null\u003C/span>;\n            \n            \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">const\u003C/span> child \u003Cspan class=\"hljs-keyword\">of\u003C/span> node.\u003Cspan class=\"hljs-property\">children\u003C/span>) {\n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (child.\u003Cspan class=\"hljs-property\">type\u003C/span> === \u003Cspan class=\"hljs-string\">'containerDirective'\u003C/span> && child.\u003Cspan class=\"hljs-property\">name\u003C/span> === \u003Cspan class=\"hljs-string\">'tab'\u003C/span>) {\n                    \u003Cspan class=\"hljs-keyword\">if\u003C/span> (currentTab) {\n                        tabs.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(currentTab);\n                    }\n                    \n                    currentTab = {\n                        \u003Cspan class=\"hljs-attr\">title\u003C/span>: child.\u003Cspan class=\"hljs-property\">attributes\u003C/span>?.\u003Cspan class=\"hljs-property\">title\u003C/span> || \u003Cspan class=\"hljs-string\">`Tab \u003Cspan class=\"hljs-subst\">${tabs.length + \u003Cspan class=\"hljs-number\">1\u003C/span>}\u003C/span>`\u003C/span>,\n                        \u003Cspan class=\"hljs-attr\">id\u003C/span>: child.\u003Cspan class=\"hljs-property\">attributes\u003C/span>?.\u003Cspan class=\"hljs-property\">id\u003C/span> || \u003Cspan class=\"hljs-string\">`tab-\u003Cspan class=\"hljs-subst\">${tabs.length}\u003C/span>`\u003C/span>,\n                        \u003Cspan class=\"hljs-attr\">content\u003C/span>: child.\u003Cspan class=\"hljs-property\">children\u003C/span>\n                    };\n                } \u003Cspan class=\"hljs-keyword\">else\u003C/span> \u003Cspan class=\"hljs-keyword\">if\u003C/span> (currentTab) {\n                    currentTab.\u003Cspan class=\"hljs-property\">content\u003C/span>.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(child);\n                }\n            }\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (currentTab) {\n                tabs.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(currentTab);\n            }\n            \n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> {\n                \u003Cspan class=\"hljs-attr\">type\u003C/span>: \u003Cspan class=\"hljs-string\">'paragraph'\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">data\u003C/span>: {\n                    \u003Cspan class=\"hljs-attr\">hName\u003C/span>: \u003Cspan class=\"hljs-string\">'div'\u003C/span>,\n                    \u003Cspan class=\"hljs-attr\">hProperties\u003C/span>: {\n                        \u003Cspan class=\"hljs-attr\">className\u003C/span>: [\u003Cspan class=\"hljs-string\">'tabbed-content'\u003C/span>],\n                        \u003Cspan class=\"hljs-string\">'data-tabs'\u003C/span>: \u003Cspan class=\"hljs-title class_\">JSON\u003C/span>.\u003Cspan class=\"hljs-title function_\">stringify\u003C/span>(tabs.\u003Cspan class=\"hljs-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">tab\u003C/span> =>\u003C/span> ({ \u003Cspan class=\"hljs-attr\">title\u003C/span>: tab.\u003Cspan class=\"hljs-property\">title\u003C/span>, \u003Cspan class=\"hljs-attr\">id\u003C/span>: tab.\u003Cspan class=\"hljs-property\">id\u003C/span> })))\n                    }\n                },\n                \u003Cspan class=\"hljs-attr\">children\u003C/span>: tabs.\u003Cspan class=\"hljs-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">tab\u003C/span> =>\u003C/span> ({\n                    \u003Cspan class=\"hljs-attr\">type\u003C/span>: \u003Cspan class=\"hljs-string\">'paragraph'\u003C/span>,\n                    \u003Cspan class=\"hljs-attr\">data\u003C/span>: {\n                        \u003Cspan class=\"hljs-attr\">hName\u003C/span>: \u003Cspan class=\"hljs-string\">'div'\u003C/span>,\n                        \u003Cspan class=\"hljs-attr\">hProperties\u003C/span>: {\n                            \u003Cspan class=\"hljs-attr\">className\u003C/span>: [\u003Cspan class=\"hljs-string\">'tab-panel'\u003C/span>],\n                            \u003Cspan class=\"hljs-string\">'data-tab-id'\u003C/span>: tab.\u003Cspan class=\"hljs-property\">id\u003C/span>\n                        }\n                    },\n                    \u003Cspan class=\"hljs-attr\">children\u003C/span>: tab.\u003Cspan class=\"hljs-property\">content\u003C/span>\n                }))\n            };\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// Version-specific content directive\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">processor\u003C/span>.\u003Cspan class=\"hljs-title function_\">registerDirective\u003C/span>(\u003Cspan class=\"hljs-string\">'version'\u003C/span>, \u003Cspan class=\"hljs-string\">'container'\u003C/span>, \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">node, context\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> minVersion = node.\u003Cspan class=\"hljs-property\">attributes\u003C/span>?.\u003Cspan class=\"hljs-property\">min\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> maxVersion = node.\u003Cspan class=\"hljs-property\">attributes\u003C/span>?.\u003Cspan class=\"hljs-property\">max\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> currentVersion = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">userContext\u003C/span>.\u003Cspan class=\"hljs-property\">version\u003C/span> || \u003Cspan class=\"hljs-string\">'1.0.0'\u003C/span>;\n            \n            \u003Cspan class=\"hljs-keyword\">let\u003C/span> showContent = \u003Cspan class=\"hljs-literal\">true\u003C/span>;\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (minVersion && \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">compareVersions\u003C/span>(currentVersion, minVersion) < \u003Cspan class=\"hljs-number\">0\u003C/span>) {\n                showContent = \u003Cspan class=\"hljs-literal\">false\u003C/span>;\n            }\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (maxVersion && \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">compareVersions\u003C/span>(currentVersion, maxVersion) > \u003Cspan class=\"hljs-number\">0\u003C/span>) {\n                showContent = \u003Cspan class=\"hljs-literal\">false\u003C/span>;\n            }\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (showContent) {\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> {\n                    \u003Cspan class=\"hljs-attr\">type\u003C/span>: \u003Cspan class=\"hljs-string\">'paragraph'\u003C/span>,\n                    \u003Cspan class=\"hljs-attr\">data\u003C/span>: {\n                        \u003Cspan class=\"hljs-attr\">hName\u003C/span>: \u003Cspan class=\"hljs-string\">'div'\u003C/span>,\n                        \u003Cspan class=\"hljs-attr\">hProperties\u003C/span>: {\n                            \u003Cspan class=\"hljs-attr\">className\u003C/span>: [\u003Cspan class=\"hljs-string\">'version-specific'\u003C/span>],\n                            \u003Cspan class=\"hljs-string\">'data-min-version'\u003C/span>: minVersion,\n                            \u003Cspan class=\"hljs-string\">'data-max-version'\u003C/span>: maxVersion\n                        }\n                    },\n                    \u003Cspan class=\"hljs-attr\">children\u003C/span>: node.\u003Cspan class=\"hljs-property\">children\u003C/span>\n                };\n            }\n            \n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-literal\">null\u003C/span>; \u003Cspan class=\"hljs-comment\">// Hide content for this version\u003C/span>\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// Cross-reference directive\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">processor\u003C/span>.\u003Cspan class=\"hljs-title function_\">registerDirective\u003C/span>(\u003Cspan class=\"hljs-string\">'xref'\u003C/span>, \u003Cspan class=\"hljs-string\">'text'\u003C/span>, \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">node, context\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> target = node.\u003Cspan class=\"hljs-property\">attributes\u003C/span>?.\u003Cspan class=\"hljs-property\">target\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> type = node.\u003Cspan class=\"hljs-property\">attributes\u003C/span>?.\u003Cspan class=\"hljs-property\">type\u003C/span> || \u003Cspan class=\"hljs-string\">'page'\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> text = node.\u003Cspan class=\"hljs-property\">children\u003C/span>[\u003Cspan class=\"hljs-number\">0\u003C/span>]?.\u003Cspan class=\"hljs-property\">value\u003C/span> || target;\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!target) {\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> {\n                    \u003Cspan class=\"hljs-attr\">type\u003C/span>: \u003Cspan class=\"hljs-string\">'text'\u003C/span>,\n                    \u003Cspan class=\"hljs-attr\">value\u003C/span>: \u003Cspan class=\"hljs-string\">'[Cross-reference error: no target]'\u003C/span>\n                };\n            }\n            \n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> href = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">resolveReference\u003C/span>(target, type);\n            \n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> {\n                \u003Cspan class=\"hljs-attr\">type\u003C/span>: \u003Cspan class=\"hljs-string\">'text'\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">data\u003C/span>: {\n                    \u003Cspan class=\"hljs-attr\">hName\u003C/span>: \u003Cspan class=\"hljs-string\">'a'\u003C/span>,\n                    \u003Cspan class=\"hljs-attr\">hProperties\u003C/span>: {\n                        href,\n                        \u003Cspan class=\"hljs-attr\">className\u003C/span>: [\u003Cspan class=\"hljs-string\">'cross-reference'\u003C/span>, \u003Cspan class=\"hljs-string\">`xref-\u003Cspan class=\"hljs-subst\">${type}\u003C/span>`\u003C/span>],\n                        \u003Cspan class=\"hljs-string\">'data-xref-target'\u003C/span>: target\n                    }\n                },\n                \u003Cspan class=\"hljs-attr\">value\u003C/span>: text\n            };\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// Glossary term directive\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">processor\u003C/span>.\u003Cspan class=\"hljs-title function_\">registerDirective\u003C/span>(\u003Cspan class=\"hljs-string\">'term'\u003C/span>, \u003Cspan class=\"hljs-string\">'text'\u003C/span>, \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">node, context\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> term = node.\u003Cspan class=\"hljs-property\">children\u003C/span>[\u003Cspan class=\"hljs-number\">0\u003C/span>]?.\u003Cspan class=\"hljs-property\">value\u003C/span> || \u003Cspan class=\"hljs-string\">''\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> definition = node.\u003Cspan class=\"hljs-property\">attributes\u003C/span>?.\u003Cspan class=\"hljs-property\">definition\u003C/span>;\n            \n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> {\n                \u003Cspan class=\"hljs-attr\">type\u003C/span>: \u003Cspan class=\"hljs-string\">'text'\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">data\u003C/span>: {\n                    \u003Cspan class=\"hljs-attr\">hName\u003C/span>: \u003Cspan class=\"hljs-string\">'abbr'\u003C/span>,\n                    \u003Cspan class=\"hljs-attr\">hProperties\u003C/span>: {\n                        \u003Cspan class=\"hljs-attr\">className\u003C/span>: [\u003Cspan class=\"hljs-string\">'glossary-term'\u003C/span>],\n                        \u003Cspan class=\"hljs-attr\">title\u003C/span>: definition,\n                        \u003Cspan class=\"hljs-string\">'data-term'\u003C/span>: term\n                    }\n                },\n                \u003Cspan class=\"hljs-attr\">value\u003C/span>: term\n            };\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// Changelog entry directive\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">processor\u003C/span>.\u003Cspan class=\"hljs-title function_\">registerDirective\u003C/span>(\u003Cspan class=\"hljs-string\">'changelog'\u003C/span>, \u003Cspan class=\"hljs-string\">'container'\u003C/span>, \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">node, context\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> version = node.\u003Cspan class=\"hljs-property\">attributes\u003C/span>?.\u003Cspan class=\"hljs-property\">version\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> date = node.\u003Cspan class=\"hljs-property\">attributes\u003C/span>?.\u003Cspan class=\"hljs-property\">date\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> type = node.\u003Cspan class=\"hljs-property\">attributes\u003C/span>?.\u003Cspan class=\"hljs-property\">type\u003C/span> || \u003Cspan class=\"hljs-string\">'general'\u003C/span>; \u003Cspan class=\"hljs-comment\">// general, breaking, feature, fix\u003C/span>\n            \n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> {\n                \u003Cspan class=\"hljs-attr\">type\u003C/span>: \u003Cspan class=\"hljs-string\">'paragraph'\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">data\u003C/span>: {\n                    \u003Cspan class=\"hljs-attr\">hName\u003C/span>: \u003Cspan class=\"hljs-string\">'div'\u003C/span>,\n                    \u003Cspan class=\"hljs-attr\">hProperties\u003C/span>: {\n                        \u003Cspan class=\"hljs-attr\">className\u003C/span>: [\u003Cspan class=\"hljs-string\">'changelog-entry'\u003C/span>, \u003Cspan class=\"hljs-string\">`changelog-\u003Cspan class=\"hljs-subst\">${type}\u003C/span>`\u003C/span>],\n                        \u003Cspan class=\"hljs-string\">'data-version'\u003C/span>: version,\n                        \u003Cspan class=\"hljs-string\">'data-date'\u003C/span>: date\n                    }\n                },\n                \u003Cspan class=\"hljs-attr\">children\u003C/span>: [\n                    {\n                        \u003Cspan class=\"hljs-attr\">type\u003C/span>: \u003Cspan class=\"hljs-string\">'text'\u003C/span>,\n                        \u003Cspan class=\"hljs-attr\">data\u003C/span>: {\n                            \u003Cspan class=\"hljs-attr\">hName\u003C/span>: \u003Cspan class=\"hljs-string\">'h5'\u003C/span>,\n                            \u003Cspan class=\"hljs-attr\">hProperties\u003C/span>: { \u003Cspan class=\"hljs-attr\">className\u003C/span>: [\u003Cspan class=\"hljs-string\">'changelog-header'\u003C/span>] }\n                        },\n                        \u003Cspan class=\"hljs-attr\">value\u003C/span>: \u003Cspan class=\"hljs-string\">`\u003Cspan class=\"hljs-subst\">${version}\u003C/span> - \u003Cspan class=\"hljs-subst\">${date}\u003C/span>`\u003C/span>\n                    },\n                    {\n                        \u003Cspan class=\"hljs-attr\">type\u003C/span>: \u003Cspan class=\"hljs-string\">'paragraph'\u003C/span>,\n                        \u003Cspan class=\"hljs-attr\">data\u003C/span>: {\n                            \u003Cspan class=\"hljs-attr\">hName\u003C/span>: \u003Cspan class=\"hljs-string\">'div'\u003C/span>,\n                            \u003Cspan class=\"hljs-attr\">hProperties\u003C/span>: { \u003Cspan class=\"hljs-attr\">className\u003C/span>: [\u003Cspan class=\"hljs-string\">'changelog-content'\u003C/span>] }\n                        },\n                        \u003Cspan class=\"hljs-attr\">children\u003C/span>: node.\u003Cspan class=\"hljs-property\">children\u003C/span>\n                    }\n                ]\n            };\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">compareVersions\u003C/span>(\u003Cspan class=\"hljs-params\">version1, version2\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> v1Parts = version1.\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-title class_\">Number\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> v2Parts = version2.\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-title class_\">Number\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> maxLength = \u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">max\u003C/span>(v1Parts.\u003Cspan class=\"hljs-property\">length\u003C/span>, v2Parts.\u003Cspan class=\"hljs-property\">length\u003C/span>);\n        \n        \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">let\u003C/span> i = \u003Cspan class=\"hljs-number\">0\u003C/span>; i < maxLength; i++) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> v1Part = v1Parts[i] || \u003Cspan class=\"hljs-number\">0\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> v2Part = v2Parts[i] || \u003Cspan class=\"hljs-number\">0\u003C/span>;\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (v1Part < v2Part) \u003Cspan class=\"hljs-keyword\">return\u003C/span> -\u003Cspan class=\"hljs-number\">1\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (v1Part > v2Part) \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-number\">1\u003C/span>;\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">resolveReference\u003C/span>(\u003Cspan class=\"hljs-params\">target, type\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">switch\u003C/span> (type) {\n            \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'page'\u003C/span>:\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">`\u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.options.baseUrl}\u003C/span>/\u003Cspan class=\"hljs-subst\">${target}\u003C/span>`\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'api'\u003C/span>:\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">`\u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.options.baseUrl}\u003C/span>/api/\u003Cspan class=\"hljs-subst\">${target}\u003C/span>`\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'guide'\u003C/span>:\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">`\u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.options.baseUrl}\u003C/span>/guides/\u003Cspan class=\"hljs-subst\">${target}\u003C/span>`\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'example'\u003C/span>:\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">`\u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.options.baseUrl}\u003C/span>/examples/\u003Cspan class=\"hljs-subst\">${target}\u003C/span>`\u003C/span>;\n            \u003Cspan class=\"hljs-attr\">default\u003C/span>:\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">`\u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.options.baseUrl}\u003C/span>/\u003Cspan class=\"hljs-subst\">${target}\u003C/span>`\u003C/span>;\n        }\n    }\n    \n    \u003Cspan class=\"hljs-keyword\">async\u003C/span> \u003Cspan class=\"hljs-title function_\">processDocument\u003C/span>(\u003Cspan class=\"hljs-params\">markdown, context = {}\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> fullContext = {\n            ...\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">userContext\u003C/span>,\n            ...context\n        };\n        \n        \u003Cspan class=\"hljs-comment\">// Create conditional processor with user context\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> conditionalProcessor = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">ConditionalDirectiveSystem\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">processor\u003C/span>, fullContext);\n        \n        \u003Cspan class=\"hljs-keyword\">try\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> result = \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">processor\u003C/span>.\u003Cspan class=\"hljs-title function_\">process\u003C/span>(markdown);\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> result;\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\">'Document processing error:'\u003C/span>, error);\n            \u003Cspan class=\"hljs-keyword\">throw\u003C/span> error;\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">generateDirectiveDocumentation\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> directives = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">processor\u003C/span>.\u003Cspan class=\"hljs-title function_\">getRegisteredDirectives\u003C/span>();\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> docs = {\n            \u003Cspan class=\"hljs-attr\">overview\u003C/span>: \u003Cspan class=\"hljs-string\">'Custom directives available in this documentation platform'\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">directives\u003C/span>: []\n        };\n        \n        \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">const\u003C/span> directive \u003Cspan class=\"hljs-keyword\">of\u003C/span> directives) {\n            docs.\u003Cspan class=\"hljs-property\">directives\u003C/span>.\u003Cspan class=\"hljs-title function_\">push\u003C/span>({\n                \u003Cspan class=\"hljs-attr\">name\u003C/span>: directive.\u003Cspan class=\"hljs-property\">name\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">type\u003C/span>: directive.\u003Cspan class=\"hljs-property\">type\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">description\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">getDirectiveDescription\u003C/span>(directive.\u003Cspan class=\"hljs-property\">name\u003C/span>),\n                \u003Cspan class=\"hljs-attr\">syntax\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">getDirectiveSyntax\u003C/span>(directive.\u003Cspan class=\"hljs-property\">name\u003C/span>, directive.\u003Cspan class=\"hljs-property\">type\u003C/span>)\n            });\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> docs;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">getDirectiveDescription\u003C/span>(\u003Cspan class=\"hljs-params\">name\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> descriptions = {\n            \u003Cspan class=\"hljs-attr\">api\u003C/span>: \u003Cspan class=\"hljs-string\">'Documents API endpoints with method, path, and description'\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">example\u003C/span>: \u003Cspan class=\"hljs-string\">'Creates interactive code examples with optional execution'\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">tabs\u003C/span>: \u003Cspan class=\"hljs-string\">'Creates tabbed content sections'\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">version\u003C/span>: \u003Cspan class=\"hljs-string\">'Shows content conditionally based on version requirements'\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">xref\u003C/span>: \u003Cspan class=\"hljs-string\">'Creates cross-references to other documentation sections'\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">term\u003C/span>: \u003Cspan class=\"hljs-string\">'Defines glossary terms with hover definitions'\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">changelog\u003C/span>: \u003Cspan class=\"hljs-string\">'Formats changelog entries with version and date information'\u003C/span>\n        };\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> descriptions[name] || \u003Cspan class=\"hljs-string\">'Custom directive'\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">getDirectiveSyntax\u003C/span>(\u003Cspan class=\"hljs-params\">name, type\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> syntaxExamples = {\n            \u003Cspan class=\"hljs-attr\">api\u003C/span>: \u003Cspan class=\"hljs-string\">':::api{method="POST" endpoint="/users" title="Create User"}\\nAPI description here\\n:::'\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">example\u003C/span>: \u003Cspan class=\"hljs-string\">'```example{runnable="true" editable="true"}\\nconsole.log("Hello World");\\n```'\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">tabs\u003C/span>: \u003Cspan class=\"hljs-string\">':::tabs\\n:::tab{title="JavaScript"}\\nJS content\\n:::\\n:::tab{title="Python"}\\nPython content\\n:::\\n:::'\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">version\u003C/span>: \u003Cspan class=\"hljs-string\">':::version{min="2.0.0" max="3.0.0"}\\nContent for versions 2.x\\n:::'\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">xref\u003C/span>: \u003Cspan class=\"hljs-string\">':xref[API Reference]{target="api-guide" type="guide"}'\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">term\u003C/span>: \u003Cspan class=\"hljs-string\">':term[API]{definition="Application Programming Interface"}'\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">changelog\u003C/span>: \u003Cspan class=\"hljs-string\">':::changelog{version="1.2.0" date="2025-10-31" type="feature"}\\nAdded new features\\n:::'\u003C/span>\n        };\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> syntaxExamples[name] || \u003Cspan class=\"hljs-string\">`\u003Cspan class=\"hljs-subst\">${type}\u003C/span> directive syntax`\u003C/span>;\n    }\n}\n\n\u003Cspan class=\"hljs-variable language_\">module\u003C/span>.\u003Cspan class=\"hljs-property\">exports\u003C/span> = \u003Cspan class=\"hljs-title class_\">DocumentationPlatform\u003C/span>;\n\u003C/code>\u003C/pre>\u003Ch2 id=\"performance-optimization-for-custom-directives\">Performance Optimization for Custom Directives\u003C/h2>\n\u003Ch3 id=\"caching-and-memoization-strategies\">Caching and Memoization Strategies\u003C/h3>\n\u003Cpre>\u003Ccode class=\"hljs language-javascript\">\u003Cspan class=\"hljs-comment\">// directive-performance.js - Performance optimization for directive processing\u003C/span>\n\u003Cspan class=\"hljs-keyword\">class\u003C/span> \u003Cspan class=\"hljs-title class_\">PerformantDirectiveProcessor\u003C/span> {\n    \u003Cspan class=\"hljs-title function_\">constructor\u003C/span>(\u003Cspan class=\"hljs-params\">baseProcessor, options = {}\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">baseProcessor\u003C/span> = baseProcessor;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span> = {\n            \u003Cspan class=\"hljs-attr\">enableCaching\u003C/span>: options.\u003Cspan class=\"hljs-property\">enableCaching\u003C/span> !== \u003Cspan class=\"hljs-literal\">false\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">cacheSize\u003C/span>: options.\u003Cspan class=\"hljs-property\">cacheSize\u003C/span> || \u003Cspan class=\"hljs-number\">1000\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">enableMemoization\u003C/span>: options.\u003Cspan class=\"hljs-property\">enableMemoization\u003C/span> !== \u003Cspan class=\"hljs-literal\">false\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">performanceMonitoring\u003C/span>: options.\u003Cspan class=\"hljs-property\">performanceMonitoring\u003C/span> || \u003Cspan class=\"hljs-literal\">false\u003C/span>,\n            ...options\n        };\n        \n        \u003Cspan class=\"hljs-comment\">// LRU cache for processed results\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">processedCache\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\">cacheHits\u003C/span> = \u003Cspan class=\"hljs-number\">0\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">cacheMisses\u003C/span> = \u003Cspan class=\"hljs-number\">0\u003C/span>;\n        \n        \u003Cspan class=\"hljs-comment\">// Memoization for directive handlers\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">memoizedHandlers\u003C/span> = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Map\u003C/span>();\n        \n        \u003Cspan class=\"hljs-comment\">// Performance metrics\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">metrics\u003C/span> = {\n            \u003Cspan class=\"hljs-attr\">totalProcessingTime\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">directiveProcessingTimes\u003C/span>: \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Map\u003C/span>(),\n            \u003Cspan class=\"hljs-attr\">cacheHitRate\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">processedDocuments\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_\">setupPerformanceOptimizations\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">setupPerformanceOptimizations\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Wrap processor methods with caching\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> originalProcess = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">baseProcessor\u003C/span>.\u003Cspan class=\"hljs-property\">process\u003C/span>.\u003Cspan class=\"hljs-title function_\">bind\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">baseProcessor\u003C/span>);\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">baseProcessor\u003C/span>.\u003Cspan class=\"hljs-property\">process\u003C/span> = \u003Cspan class=\"hljs-keyword\">async\u003C/span> (markdown, context = {}) => {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> startTime = \u003Cspan class=\"hljs-title class_\">Date\u003C/span>.\u003Cspan class=\"hljs-title function_\">now\u003C/span>();\n            \n            \u003Cspan class=\"hljs-comment\">// Generate cache key\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> cacheKey = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">generateCacheKey\u003C/span>(markdown, context);\n            \n            \u003Cspan class=\"hljs-comment\">// Check cache first\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">enableCaching\u003C/span> && \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">processedCache\u003C/span>.\u003Cspan class=\"hljs-title function_\">has\u003C/span>(cacheKey)) {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">cacheHits\u003C/span>++;\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">updateCacheHitRate\u003C/span>();\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">processedCache\u003C/span>.\u003Cspan class=\"hljs-title function_\">get\u003C/span>(cacheKey);\n            }\n            \n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">cacheMisses\u003C/span>++;\n            \n            \u003Cspan class=\"hljs-comment\">// Process document\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> result = \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-title function_\">originalProcess\u003C/span>(markdown, context);\n            \n            \u003Cspan class=\"hljs-comment\">// Cache result\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">enableCaching\u003C/span>) {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">cacheResult\u003C/span>(cacheKey, result);\n            }\n            \n            \u003Cspan class=\"hljs-comment\">// Update metrics\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> endTime = \u003Cspan class=\"hljs-title class_\">Date\u003C/span>.\u003Cspan class=\"hljs-title function_\">now\u003C/span>();\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">updateMetrics\u003C/span>(endTime - startTime);\n            \n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> result;\n        };\n        \n        \u003Cspan class=\"hljs-comment\">// Wrap directive registration with memoization\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> originalRegisterDirective = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">baseProcessor\u003C/span>.\u003Cspan class=\"hljs-property\">registerDirective\u003C/span>.\u003Cspan class=\"hljs-title function_\">bind\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">baseProcessor\u003C/span>);\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">baseProcessor\u003C/span>.\u003Cspan class=\"hljs-property\">registerDirective\u003C/span> = \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">name, type, handler\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">let\u003C/span> optimizedHandler = handler;\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">enableMemoization\u003C/span>) {\n                optimizedHandler = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">memoizeHandler\u003C/span>(handler, \u003Cspan class=\"hljs-string\">`\u003Cspan class=\"hljs-subst\">${type}\u003C/span>:\u003Cspan class=\"hljs-subst\">${name}\u003C/span>`\u003C/span>);\n            }\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">performanceMonitoring\u003C/span>) {\n                optimizedHandler = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">wrapHandlerWithMetrics\u003C/span>(optimizedHandler, \u003Cspan class=\"hljs-string\">`\u003Cspan class=\"hljs-subst\">${type}\u003C/span>:\u003Cspan class=\"hljs-subst\">${name}\u003C/span>`\u003C/span>);\n            }\n            \n            \u003Cspan class=\"hljs-title function_\">originalRegisterDirective\u003C/span>(name, type, optimizedHandler);\n        };\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">generateCacheKey\u003C/span>(\u003Cspan class=\"hljs-params\">markdown, context\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> crypto = \u003Cspan class=\"hljs-built_in\">require\u003C/span>(\u003Cspan class=\"hljs-string\">'crypto'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> contentHash = crypto.\u003Cspan class=\"hljs-title function_\">createHash\u003C/span>(\u003Cspan class=\"hljs-string\">'md5'\u003C/span>).\u003Cspan class=\"hljs-title function_\">update\u003C/span>(markdown).\u003Cspan class=\"hljs-title function_\">digest\u003C/span>(\u003Cspan class=\"hljs-string\">'hex'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> contextHash = crypto.\u003Cspan class=\"hljs-title function_\">createHash\u003C/span>(\u003Cspan class=\"hljs-string\">'md5'\u003C/span>).\u003Cspan class=\"hljs-title function_\">update\u003C/span>(\u003Cspan class=\"hljs-title class_\">JSON\u003C/span>.\u003Cspan class=\"hljs-title function_\">stringify\u003C/span>(context)).\u003Cspan class=\"hljs-title function_\">digest\u003C/span>(\u003Cspan class=\"hljs-string\">'hex'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">`\u003Cspan class=\"hljs-subst\">${contentHash}\u003C/span>-\u003Cspan class=\"hljs-subst\">${contextHash}\u003C/span>`\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">cacheResult\u003C/span>(\u003Cspan class=\"hljs-params\">key, result\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Implement LRU eviction\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">processedCache\u003C/span>.\u003Cspan class=\"hljs-property\">size\u003C/span> >= \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">cacheSize\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> firstKey = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">processedCache\u003C/span>.\u003Cspan class=\"hljs-title function_\">keys\u003C/span>().\u003Cspan class=\"hljs-title function_\">next\u003C/span>().\u003Cspan class=\"hljs-property\">value\u003C/span>;\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">processedCache\u003C/span>.\u003Cspan class=\"hljs-title function_\">delete\u003C/span>(firstKey);\n        }\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">processedCache\u003C/span>.\u003Cspan class=\"hljs-title function_\">set\u003C/span>(key, result);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">memoizeHandler\u003C/span>(\u003Cspan class=\"hljs-params\">handler, handlerKey\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> memoCache = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Map\u003C/span>();\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">node, context\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> nodeKey = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">generateNodeKey\u003C/span>(node);\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> fullKey = \u003Cspan class=\"hljs-string\">`\u003Cspan class=\"hljs-subst\">${handlerKey}\u003C/span>-\u003Cspan class=\"hljs-subst\">${nodeKey}\u003C/span>`\u003C/span>;\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (memoCache.\u003Cspan class=\"hljs-title function_\">has\u003C/span>(fullKey)) {\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> memoCache.\u003Cspan class=\"hljs-title function_\">get\u003C/span>(fullKey);\n            }\n            \n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> result = \u003Cspan class=\"hljs-title function_\">handler\u003C/span>(node, context);\n            \n            \u003Cspan class=\"hljs-comment\">// Only cache serializable results\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">isSerializable\u003C/span>(result)) {\n                memoCache.\u003Cspan class=\"hljs-title function_\">set\u003C/span>(fullKey, result);\n                \n                \u003Cspan class=\"hljs-comment\">// Limit cache size per handler\u003C/span>\n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (memoCache.\u003Cspan class=\"hljs-property\">size\u003C/span> > \u003Cspan class=\"hljs-number\">100\u003C/span>) {\n                    \u003Cspan class=\"hljs-keyword\">const\u003C/span> firstKey = memoCache.\u003Cspan class=\"hljs-title function_\">keys\u003C/span>().\u003Cspan class=\"hljs-title function_\">next\u003C/span>().\u003Cspan class=\"hljs-property\">value\u003C/span>;\n                    memoCache.\u003Cspan class=\"hljs-title function_\">delete\u003C/span>(firstKey);\n                }\n            }\n            \n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> result;\n        };\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">wrapHandlerWithMetrics\u003C/span>(\u003Cspan class=\"hljs-params\">handler, handlerKey\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">node, context\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> startTime = \u003Cspan class=\"hljs-title class_\">Date\u003C/span>.\u003Cspan class=\"hljs-title function_\">now\u003C/span>();\n            \n            \u003Cspan class=\"hljs-keyword\">try\u003C/span> {\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> result = \u003Cspan class=\"hljs-title function_\">handler\u003C/span>(node, context);\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> endTime = \u003Cspan class=\"hljs-title class_\">Date\u003C/span>.\u003Cspan class=\"hljs-title function_\">now\u003C/span>();\n                \n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">updateDirectiveMetrics\u003C/span>(handlerKey, endTime - startTime, \u003Cspan class=\"hljs-literal\">true\u003C/span>);\n                \n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> result;\n            } \u003Cspan class=\"hljs-keyword\">catch\u003C/span> (error) {\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> endTime = \u003Cspan class=\"hljs-title class_\">Date\u003C/span>.\u003Cspan class=\"hljs-title function_\">now\u003C/span>();\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">updateDirectiveMetrics\u003C/span>(handlerKey, endTime - startTime, \u003Cspan class=\"hljs-literal\">false\u003C/span>);\n                \u003Cspan class=\"hljs-keyword\">throw\u003C/span> error;\n            }\n        };\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">generateNodeKey\u003C/span>(\u003Cspan class=\"hljs-params\">node\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> crypto = \u003Cspan class=\"hljs-built_in\">require\u003C/span>(\u003Cspan class=\"hljs-string\">'crypto'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> nodeData = {\n            \u003Cspan class=\"hljs-attr\">type\u003C/span>: node.\u003Cspan class=\"hljs-property\">type\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">name\u003C/span>: node.\u003Cspan class=\"hljs-property\">name\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">attributes\u003C/span>: node.\u003Cspan class=\"hljs-property\">attributes\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">childrenCount\u003C/span>: node.\u003Cspan class=\"hljs-property\">children\u003C/span> ? node.\u003Cspan class=\"hljs-property\">children\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span> : \u003Cspan class=\"hljs-number\">0\u003C/span>\n        };\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> crypto.\u003Cspan class=\"hljs-title function_\">createHash\u003C/span>(\u003Cspan class=\"hljs-string\">'md5'\u003C/span>).\u003Cspan class=\"hljs-title function_\">update\u003C/span>(\u003Cspan class=\"hljs-title class_\">JSON\u003C/span>.\u003Cspan class=\"hljs-title function_\">stringify\u003C/span>(nodeData)).\u003Cspan class=\"hljs-title function_\">digest\u003C/span>(\u003Cspan class=\"hljs-string\">'hex'\u003C/span>);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">isSerializable\u003C/span>(\u003Cspan class=\"hljs-params\">obj\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">try\u003C/span> {\n            \u003Cspan class=\"hljs-title class_\">JSON\u003C/span>.\u003Cspan class=\"hljs-title function_\">stringify\u003C/span>(obj);\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-literal\">true\u003C/span>;\n        } \u003Cspan class=\"hljs-keyword\">catch\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-literal\">false\u003C/span>;\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">updateCacheHitRate\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> total = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">cacheHits\u003C/span> + \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">cacheMisses\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">metrics\u003C/span>.\u003Cspan class=\"hljs-property\">cacheHitRate\u003C/span> = total > \u003Cspan class=\"hljs-number\">0\u003C/span> ? \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">cacheHits\u003C/span> / total : \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">updateMetrics\u003C/span>(\u003Cspan class=\"hljs-params\">processingTime\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">metrics\u003C/span>.\u003Cspan class=\"hljs-property\">totalProcessingTime\u003C/span> += processingTime;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">metrics\u003C/span>.\u003Cspan class=\"hljs-property\">processedDocuments\u003C/span>++;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">updateDirectiveMetrics\u003C/span>(\u003Cspan class=\"hljs-params\">handlerKey, processingTime, success\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">metrics\u003C/span>.\u003Cspan class=\"hljs-property\">directiveProcessingTimes\u003C/span>.\u003Cspan class=\"hljs-title function_\">has\u003C/span>(handlerKey)) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">metrics\u003C/span>.\u003Cspan class=\"hljs-property\">directiveProcessingTimes\u003C/span>.\u003Cspan class=\"hljs-title function_\">set\u003C/span>(handlerKey, {\n                \u003Cspan class=\"hljs-attr\">totalTime\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">callCount\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">successCount\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">errorCount\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>\n            });\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> directiveMetrics = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">metrics\u003C/span>.\u003Cspan class=\"hljs-property\">directiveProcessingTimes\u003C/span>.\u003Cspan class=\"hljs-title function_\">get\u003C/span>(handlerKey);\n        directiveMetrics.\u003Cspan class=\"hljs-property\">totalTime\u003C/span> += processingTime;\n        directiveMetrics.\u003Cspan class=\"hljs-property\">callCount\u003C/span>++;\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (success) {\n            directiveMetrics.\u003Cspan class=\"hljs-property\">successCount\u003C/span>++;\n        } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n            directiveMetrics.\u003Cspan class=\"hljs-property\">errorCount\u003C/span>++;\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">getPerformanceMetrics\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> avgProcessingTime = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">metrics\u003C/span>.\u003Cspan class=\"hljs-property\">processedDocuments\u003C/span> > \u003Cspan class=\"hljs-number\">0\u003C/span> \n            ? \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">metrics\u003C/span>.\u003Cspan class=\"hljs-property\">totalProcessingTime\u003C/span> / \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">metrics\u003C/span>.\u003Cspan class=\"hljs-property\">processedDocuments\u003C/span> \n            : \u003Cspan class=\"hljs-number\">0\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> directiveStats = {};\n        \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">const\u003C/span> [key, stats] \u003Cspan class=\"hljs-keyword\">of\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">metrics\u003C/span>.\u003Cspan class=\"hljs-property\">directiveProcessingTimes\u003C/span>) {\n            directiveStats[key] = {\n                \u003Cspan class=\"hljs-attr\">averageTime\u003C/span>: stats.\u003Cspan class=\"hljs-property\">callCount\u003C/span> > \u003Cspan class=\"hljs-number\">0\u003C/span> ? stats.\u003Cspan class=\"hljs-property\">totalTime\u003C/span> / stats.\u003Cspan class=\"hljs-property\">callCount\u003C/span> : \u003Cspan class=\"hljs-number\">0\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">totalCalls\u003C/span>: stats.\u003Cspan class=\"hljs-property\">callCount\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">successRate\u003C/span>: stats.\u003Cspan class=\"hljs-property\">callCount\u003C/span> > \u003Cspan class=\"hljs-number\">0\u003C/span> ? stats.\u003Cspan class=\"hljs-property\">successCount\u003C/span> / stats.\u003Cspan class=\"hljs-property\">callCount\u003C/span> : \u003Cspan class=\"hljs-number\">0\u003C/span>\n            };\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> {\n            \u003Cspan class=\"hljs-attr\">cacheHitRate\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">metrics\u003C/span>.\u003Cspan class=\"hljs-property\">cacheHitRate\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">averageProcessingTime\u003C/span>: avgProcessingTime,\n            \u003Cspan class=\"hljs-attr\">processedDocuments\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">metrics\u003C/span>.\u003Cspan class=\"hljs-property\">processedDocuments\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">cacheSize\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">processedCache\u003C/span>.\u003Cspan class=\"hljs-property\">size\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">directivePerformance\u003C/span>: directiveStats\n        };\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">clearCache\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">processedCache\u003C/span>.\u003Cspan class=\"hljs-title function_\">clear\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">memoizedHandlers\u003C/span>.\u003Cspan class=\"hljs-title function_\">clear\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">cacheHits\u003C/span> = \u003Cspan class=\"hljs-number\">0\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">cacheMisses\u003C/span> = \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">warmupCache\u003C/span>(\u003Cspan class=\"hljs-params\">documents\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-title class_\">Promise\u003C/span>.\u003Cspan class=\"hljs-title function_\">all\u003C/span>(\n            documents.\u003Cspan class=\"hljs-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">doc\u003C/span> =>\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">baseProcessor\u003C/span>.\u003Cspan class=\"hljs-title function_\">process\u003C/span>(doc.\u003Cspan class=\"hljs-property\">content\u003C/span>, doc.\u003Cspan class=\"hljs-property\">context\u003C/span>))\n        );\n    }\n}\n\n\u003Cspan class=\"hljs-variable language_\">module\u003C/span>.\u003Cspan class=\"hljs-property\">exports\u003C/span> = \u003Cspan class=\"hljs-title class_\">PerformantDirectiveProcessor\u003C/span>;\n\u003C/code>\u003C/pre>\u003Ch2 id=\"troubleshooting-common-custom-directive-issues\">Troubleshooting Common Custom Directive Issues\u003C/h2>\n\u003Ch3 id=\"debugging-and-error-handling\">Debugging and Error Handling\u003C/h3>\n\u003Cp>\u003Cstrong>Problem\u003C/strong>: Directive not processing or throwing errors during compilation\u003C/p>\n\u003Cp>\u003Cstrong>Solutions\u003C/strong>:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-javascript\">\u003Cspan class=\"hljs-comment\">// Enable detailed debugging for directive processing\u003C/span>\n\u003Cspan class=\"hljs-keyword\">const\u003C/span> processor = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">MarkdownDirectiveProcessor\u003C/span>({\n    \u003Cspan class=\"hljs-attr\">debug\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n    \u003Cspan class=\"hljs-attr\">errorHandling\u003C/span>: \u003Cspan class=\"hljs-string\">'detailed'\u003C/span> \u003Cspan class=\"hljs-comment\">// 'silent', 'basic', 'detailed'\u003C/span>\n});\n\n\u003Cspan class=\"hljs-comment\">// Add error boundary for directive processing\u003C/span>\nprocessor.\u003Cspan class=\"hljs-title function_\">addPreprocessor\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">tree, file\u003C/span>) =>\u003C/span> {\n    \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">log\u003C/span>(\u003Cspan class=\"hljs-string\">'Processing tree:'\u003C/span>, \u003Cspan class=\"hljs-title class_\">JSON\u003C/span>.\u003Cspan class=\"hljs-title function_\">stringify\u003C/span>(tree, \u003Cspan class=\"hljs-literal\">null\u003C/span>, \u003Cspan class=\"hljs-number\">2\u003C/span>));\n    \u003Cspan class=\"hljs-keyword\">return\u003C/span> tree;\n});\n\n\u003Cspan class=\"hljs-comment\">// Validate directive syntax before processing\u003C/span>\n\u003Cspan class=\"hljs-keyword\">const\u003C/span> \u003Cspan class=\"hljs-title function_\">validateDirectiveSyntax\u003C/span> = (\u003Cspan class=\"hljs-params\">content\u003C/span>) => {\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> directivePatterns = {\n        \u003Cspan class=\"hljs-attr\">container\u003C/span>: \u003Cspan class=\"hljs-regexp\">/:::(\\w+)(?:\\{([^}]*)\\})?\\s*\\n([\\s\\S]*?)\\n:::/g\u003C/span>,\n        \u003Cspan class=\"hljs-attr\">leaf\u003C/span>: \u003Cspan class=\"hljs-regexp\">/::(\\w+)(?:\\{([^}]*)\\})?(?:\\[([^\\]]*)\\])?/g\u003C/span>,\n        \u003Cspan class=\"hljs-attr\">text\u003C/span>: \u003Cspan class=\"hljs-regexp\">/:(\\w+)(?:\\{([^}]*)\\})?(?:\\[([^\\]]*)\\])?/g\u003C/span>\n    };\n    \n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> issues = [];\n    \n    \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">const\u003C/span> [type, pattern] \u003Cspan class=\"hljs-keyword\">of\u003C/span> \u003Cspan class=\"hljs-title class_\">Object\u003C/span>.\u003Cspan class=\"hljs-title function_\">entries\u003C/span>(directivePatterns)) {\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> match;\n        \u003Cspan class=\"hljs-keyword\">while\u003C/span> ((match = pattern.\u003Cspan class=\"hljs-title function_\">exec\u003C/span>(content)) !== \u003Cspan class=\"hljs-literal\">null\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">try\u003C/span> {\n                \u003Cspan class=\"hljs-comment\">// Validate attributes syntax\u003C/span>\n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (match[\u003Cspan class=\"hljs-number\">2\u003C/span>]) {\n                    \u003Cspan class=\"hljs-title class_\">JSON\u003C/span>.\u003Cspan class=\"hljs-title function_\">parse\u003C/span>(\u003Cspan class=\"hljs-string\">`{\u003Cspan class=\"hljs-subst\">${match[\u003Cspan class=\"hljs-number\">2\u003C/span>]}\u003C/span>}`\u003C/span>);\n                }\n            } \u003Cspan class=\"hljs-keyword\">catch\u003C/span> (error) {\n                issues.\u003Cspan class=\"hljs-title function_\">push\u003C/span>({\n                    type,\n                    \u003Cspan class=\"hljs-attr\">directive\u003C/span>: match[\u003Cspan class=\"hljs-number\">1\u003C/span>],\n                    \u003Cspan class=\"hljs-attr\">position\u003C/span>: match.\u003Cspan class=\"hljs-property\">index\u003C/span>,\n                    \u003Cspan class=\"hljs-attr\">error\u003C/span>: \u003Cspan class=\"hljs-string\">`Invalid attributes syntax: \u003Cspan class=\"hljs-subst\">${error.message}\u003C/span>`\u003C/span>\n                });\n            }\n        }\n    }\n    \n    \u003Cspan class=\"hljs-keyword\">return\u003C/span> issues;\n};\n\u003C/code>\u003C/pre>\u003Cp>\u003Cstrong>Problem\u003C/strong>: Performance degradation with complex directive processing\u003C/p>\n\u003Cp>\u003Cstrong>Solutions\u003C/strong>:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-javascript\">\u003Cspan class=\"hljs-comment\">// Implement directive processing timeouts\u003C/span>\n\u003Cspan class=\"hljs-keyword\">const\u003C/span> \u003Cspan class=\"hljs-title function_\">createTimoutWrapper\u003C/span> = (\u003Cspan class=\"hljs-params\">handler, timeout = \u003Cspan class=\"hljs-number\">5000\u003C/span>\u003C/span>) => {\n    \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-keyword\">async\u003C/span> (node, context) => {\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-title class_\">Promise\u003C/span>.\u003Cspan class=\"hljs-title function_\">race\u003C/span>([\n            \u003Cspan class=\"hljs-title class_\">Promise\u003C/span>.\u003Cspan class=\"hljs-title function_\">resolve\u003C/span>(\u003Cspan class=\"hljs-title function_\">handler\u003C/span>(node, context)),\n            \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Promise\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">_, reject\u003C/span>) =>\u003C/span> \n                \u003Cspan class=\"hljs-built_in\">setTimeout\u003C/span>(\u003Cspan class=\"hljs-function\">() =>\u003C/span> \u003Cspan class=\"hljs-title function_\">reject\u003C/span>(\u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Error\u003C/span>(\u003Cspan class=\"hljs-string\">'Directive processing timeout'\u003C/span>)), timeout)\n            )\n        ]);\n    };\n};\n\n\u003Cspan class=\"hljs-comment\">// Use streaming for large content processing\u003C/span>\n\u003Cspan class=\"hljs-keyword\">const\u003C/span> \u003Cspan class=\"hljs-title function_\">processLargeContent\u003C/span> = \u003Cspan class=\"hljs-keyword\">async\u003C/span> (\u003Cspan class=\"hljs-params\">content, chunkSize = \u003Cspan class=\"hljs-number\">10000\u003C/span>\u003C/span>) => {\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> chunks = [];\n    \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">let\u003C/span> i = \u003Cspan class=\"hljs-number\">0\u003C/span>; i < content.\u003Cspan class=\"hljs-property\">length\u003C/span>; i += chunkSize) {\n        chunks.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(content.\u003Cspan class=\"hljs-title function_\">slice\u003C/span>(i, i + chunkSize));\n    }\n    \n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> results = [];\n    \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">const\u003C/span> chunk \u003Cspan class=\"hljs-keyword\">of\u003C/span> chunks) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> result = \u003Cspan class=\"hljs-keyword\">await\u003C/span> processor.\u003Cspan class=\"hljs-title function_\">process\u003C/span>(chunk);\n        results.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(result);\n    }\n    \n    \u003Cspan class=\"hljs-keyword\">return\u003C/span> results.\u003Cspan class=\"hljs-title function_\">join\u003C/span>(\u003Cspan class=\"hljs-string\">''\u003C/span>);\n};\n\u003C/code>\u003C/pre>\u003Cp>\u003Cstrong>Problem\u003C/strong>: Security vulnerabilities in custom directive implementations\u003C/p>\n\u003Cp>\u003Cstrong>Solutions\u003C/strong>:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-javascript\">\u003Cspan class=\"hljs-comment\">// Implement comprehensive input validation\u003C/span>\n\u003Cspan class=\"hljs-keyword\">const\u003C/span> \u003Cspan class=\"hljs-title function_\">validateDirectiveInput\u003C/span> = (\u003Cspan class=\"hljs-params\">node, allowedAttributes = []\u003C/span>) => {\n    \u003Cspan class=\"hljs-keyword\">if\u003C/span> (node.\u003Cspan class=\"hljs-property\">attributes\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">const\u003C/span> [key, value] \u003Cspan class=\"hljs-keyword\">of\u003C/span> \u003Cspan class=\"hljs-title class_\">Object\u003C/span>.\u003Cspan class=\"hljs-title function_\">entries\u003C/span>(node.\u003Cspan class=\"hljs-property\">attributes\u003C/span>)) {\n            \u003Cspan class=\"hljs-comment\">// Check allowed attributes\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (allowedAttributes.\u003Cspan class=\"hljs-property\">length\u003C/span> > \u003Cspan class=\"hljs-number\">0\u003C/span> && !allowedAttributes.\u003Cspan class=\"hljs-title function_\">includes\u003C/span>(key)) {\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\">`Attribute '\u003Cspan class=\"hljs-subst\">${key}\u003C/span>' not allowed`\u003C/span>);\n            }\n            \n            \u003Cspan class=\"hljs-comment\">// Validate attribute values\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-keyword\">typeof\u003C/span> value === \u003Cspan class=\"hljs-string\">'string'\u003C/span>) {\n                \u003Cspan class=\"hljs-comment\">// Check for script injection\u003C/span>\n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-regexp\">/<script|javascript:|data:text\\/html/i\u003C/span>.\u003Cspan class=\"hljs-title function_\">test\u003C/span>(value)) {\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\">`Potentially unsafe value in attribute '\u003Cspan class=\"hljs-subst\">${key}\u003C/span>'`\u003C/span>);\n                }\n                \n                \u003Cspan class=\"hljs-comment\">// Limit attribute value length\u003C/span>\n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (value.\u003Cspan class=\"hljs-property\">length\u003C/span> > \u003Cspan class=\"hljs-number\">1000\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\">`Attribute '\u003Cspan class=\"hljs-subst\">${key}\u003C/span>' value too long`\u003C/span>);\n                }\n            }\n        }\n    }\n    \n    \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-literal\">true\u003C/span>;\n};\n\n\u003Cspan class=\"hljs-comment\">// Sanitize directive output\u003C/span>\n\u003Cspan class=\"hljs-keyword\">const\u003C/span> \u003Cspan class=\"hljs-title function_\">sanitizeDirectiveOutput\u003C/span> = (\u003Cspan class=\"hljs-params\">output\u003C/span>) => {\n    \u003Cspan class=\"hljs-keyword\">if\u003C/span> (output && output.\u003Cspan class=\"hljs-property\">data\u003C/span> && output.\u003Cspan class=\"hljs-property\">data\u003C/span>.\u003Cspan class=\"hljs-property\">hProperties\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> props = output.\u003Cspan class=\"hljs-property\">data\u003C/span>.\u003Cspan class=\"hljs-property\">hProperties\u003C/span>;\n        \n        \u003Cspan class=\"hljs-comment\">// Remove event handlers\u003C/span>\n        \u003Cspan class=\"hljs-title class_\">Object\u003C/span>.\u003Cspan class=\"hljs-title function_\">keys\u003C/span>(props).\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">key\u003C/span> =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (key.\u003Cspan class=\"hljs-title function_\">startsWith\u003C/span>(\u003Cspan class=\"hljs-string\">'on'\u003C/span>) || key.\u003Cspan class=\"hljs-title function_\">toLowerCase\u003C/span>().\u003Cspan class=\"hljs-title function_\">includes\u003C/span>(\u003Cspan class=\"hljs-string\">'script'\u003C/span>)) {\n                \u003Cspan class=\"hljs-keyword\">delete\u003C/span> props[key];\n            }\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// Validate href attributes\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (props.\u003Cspan class=\"hljs-property\">href\u003C/span> && !\u003Cspan class=\"hljs-title function_\">isValidUrl\u003C/span>(props.\u003Cspan class=\"hljs-property\">href\u003C/span>)) {\n            \u003Cspan class=\"hljs-keyword\">delete\u003C/span> props.\u003Cspan class=\"hljs-property\">href\u003C/span>;\n        }\n    }\n    \n    \u003Cspan class=\"hljs-keyword\">return\u003C/span> output;\n};\n\u003C/code>\u003C/pre>\u003Ch2 id=\"conclusion\">Conclusion\u003C/h2>\n\u003Cp>Markdown custom directives and extensions transform static content into dynamic, interactive experiences by extending the fundamental capabilities of Markdown syntax while maintaining compatibility with standard processing workflows. By implementing sophisticated directive processing systems, security measures, and performance optimizations, technical teams can create powerful content management platforms that scale efficiently while providing rich user interactions and domain-specific functionality tailored to organizational needs.\u003C/p>\n\u003Cp>The key to successful custom directive implementation lies in balancing functionality with security, performance with flexibility, and complexity with maintainability. Whether you're building documentation platforms, content management systems, or specialized publishing workflows, the techniques covered in this guide provide the foundation for creating robust directive systems that enhance content capabilities while preserving the simplicity and portability that makes Markdown such a valuable content creation tool.\u003C/p>\n\u003Cp>Remember to implement comprehensive security validation for user-provided content, optimize performance for large-scale processing, and maintain clear documentation for custom directive syntax and capabilities. With proper implementation of custom directives, your Markdown-based systems can deliver sophisticated content experiences that bridge the gap between simple text formatting and full-featured content management platforms.\u003C/p>\n",[15,19,22,25,28,31,34,37,40],{"id":16,"text":17,"level":18},"why-master-markdown-custom-directives","Why Master Markdown Custom Directives?",2,{"id":20,"text":21,"level":18},"foundation-custom-directive-concepts","Foundation Custom Directive Concepts",{"id":23,"text":24,"level":18},"advanced-directive-implementation-patterns","Advanced Directive Implementation Patterns",{"id":26,"text":27,"level":18},"security-and-performance-considerations","Security and Performance Considerations",{"id":29,"text":30,"level":18},"integration-with-modern-development-workflows","Integration with Modern Development Workflows",{"id":32,"text":33,"level":18},"real-world-implementation-examples","Real-World Implementation Examples",{"id":35,"text":36,"level":18},"performance-optimization-for-custom-directives","Performance Optimization for Custom Directives",{"id":38,"text":39,"level":18},"troubleshooting-common-custom-directive-issues","Troubleshooting Common Custom Directive Issues",{"id":41,"text":42,"level":18},"conclusion","Conclusion",[],[45,53,61],{"slug":46,"title":47,"description":48,"excerpt":49,"date":50,"category":9,"author":10,"keywords":51,"readingMinutes":52},"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","markdown custom directives, markdown block extensions, custom markdown syntax, markdown plugins, advanced markdown components, markdown content blocks, extensible markdown, custom markdown elements",20,{"slug":54,"title":55,"description":56,"excerpt":57,"date":58,"category":9,"author":10,"keywords":59,"readingMinutes":60},"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":62,"title":63,"description":64,"excerpt":65,"date":66,"category":9,"author":10,"keywords":67,"readingMinutes":60},"markdown-table-sorting-filtering-interactive-guide","Markdown Table Sorting and Filtering: Complete Guide for Interactive Data Tables and Dynamic Content Management","Master advanced table sorting and filtering techniques in Markdown for interactive data presentations. Learn JavaScript integration, CSS styling, component frameworks, and platform-specific implementations for professional data management.","Advanced table sorting and filtering in Markdown enables dynamic data presentations that transform static content into interactive experiences, allowing users to organize, search, and analyze…","2025-09-21","markdown table sorting, interactive markdown tables, table filtering markdown, dynamic tables markdown, sortable markdown tables, table javascript integration, advanced markdown tables, data table markdown",1792184944051]