[{"data":1,"prerenderedAt":66},["Reactive",2],{"blog-post-markdown-anchor-links-fragment-identifiers-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":40,"related":41},"markdown-anchor-links-fragment-identifiers-complete-guide","Markdown Anchor Links and Fragment Identifiers: Complete Guide to Document Navigation and Cross-Referencing","Master anchor links, fragment identifiers, and document navigation in Markdown. Learn to create internal links, table of contents, smooth scrolling, and cross-document references with proper accessibility.","Markdown anchor links and fragment identifiers enable sophisticated document navigation through internal linking systems, cross-referencing capabilities, and dynamic content organization. By…","2025-12-31","Tutorial","Matthew Rathbone","markdown anchor links, fragment identifiers, internal links, table of contents, document navigation, cross references, markdown bookmarks, heading links, smooth scrolling",21,"\u003Cp>Markdown anchor links and fragment identifiers enable sophisticated document navigation through internal linking systems, cross-referencing capabilities, and dynamic content organization. By implementing proper anchor link structures, automatic heading ID generation, and accessible navigation patterns, technical writers and developers can create comprehensive documentation that allows users to navigate complex content efficiently while maintaining proper linking integrity and search engine optimization.\u003C/p>\n\u003Ch2 id=\"why-master-anchor-links-and-fragment-identifiers\">Why Master Anchor Links and Fragment Identifiers?\u003C/h2>\n\u003Cp>Advanced document navigation provides essential benefits for content organization and user experience:\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>Enhanced Navigation\u003C/strong>: Create seamless internal linking systems for quick content access\u003C/li>\n\u003Cli>\u003Cstrong>Improved User Experience\u003C/strong>: Enable direct linking to specific document sections and content\u003C/li>\n\u003Cli>\u003Cstrong>SEO Optimization\u003C/strong>: Implement proper fragment identifiers for search engine discoverability\u003C/li>\n\u003Cli>\u003Cstrong>Accessibility Enhancement\u003C/strong>: Provide clear navigation paths for screen readers and assistive technologies\u003C/li>\n\u003Cli>\u003Cstrong>Content Organization\u003C/strong>: Structure documents with logical navigation hierarchies and cross-references\u003C/li>\n\u003C/ul>\n\u003Ch2 id=\"foundation-anchor-link-principles\">Foundation Anchor Link Principles\u003C/h2>\n\u003Ch3 id=\"basic-anchor-link-syntax\">Basic Anchor Link Syntax\u003C/h3>\n\u003Cp>Understanding the fundamental structure of Markdown anchor links and fragment identifiers:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">\u003Cspan class=\"hljs-section\"># Basic Anchor Link Patterns\u003C/span>\n\n\u003Cspan class=\"hljs-section\">## Heading-Based Anchors\u003C/span>\n\n\u003Cspan class=\"hljs-section\">### Automatic Heading Anchors\u003C/span>\nWhen you create headings in Markdown, most processors automatically generate anchor IDs:\n\n\u003Cspan class=\"hljs-section\"># Main Title\u003C/span>\n\u003Cspan class=\"hljs-section\">## Section Overview\u003C/span>\n\u003Cspan class=\"hljs-section\">### Detailed Information\u003C/span>\n\nThese automatically become linkable as:\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> \u003Cspan class=\"hljs-code\">`#main-title`\u003C/span>\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> \u003Cspan class=\"hljs-code\">`#section-overview`\u003C/span>  \n\u003Cspan class=\"hljs-bullet\">-\u003C/span> \u003Cspan class=\"hljs-code\">`#detailed-information`\u003C/span>\n\n\u003Cspan class=\"hljs-section\">### Manual Anchor Links\u003C/span>\nLink directly to sections using fragment identifiers:\n\n[\u003Cspan class=\"hljs-string\">Jump to Section Overview\u003C/span>](\u003Cspan class=\"hljs-link\">#section-overview\u003C/span>)\n[\u003Cspan class=\"hljs-string\">Go to Detailed Information\u003C/span>](\u003Cspan class=\"hljs-link\">#detailed-information\u003C/span>)\n\n\u003Cspan class=\"hljs-section\">## Custom Anchor Points\u003C/span>\n\n\u003Cspan class=\"hljs-section\">### HTML Anchor Elements\u003C/span>\nCreate custom anchor points anywhere in your document:\n\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">a\u003C/span> \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"custom-anchor"\u003C/span>>\u003C/span>\u003C/span>\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">a\u003C/span>>\u003C/span>\u003C/span>\nThis paragraph can be linked to directly.\n\n[\u003Cspan class=\"hljs-string\">Link to custom anchor\u003C/span>](\u003Cspan class=\"hljs-link\">#custom-anchor\u003C/span>)\n\n\u003Cspan class=\"hljs-section\">### Heading ID Override\u003C/span>\nExplicitly set heading IDs for better control:\n\n\u003Cspan class=\"hljs-section\">## Section Title {#custom-id}\u003C/span>\n\n[\u003Cspan class=\"hljs-string\">Link to custom section\u003C/span>](\u003Cspan class=\"hljs-link\">#custom-id\u003C/span>)\n\n\u003Cspan class=\"hljs-section\">## Table of Contents Example\u003C/span>\n\n\u003Cspan class=\"hljs-section\">### Document Structure\u003C/span>\n\u003Cspan class=\"hljs-bullet\">1.\u003C/span> [\u003Cspan class=\"hljs-string\">Introduction\u003C/span>](\u003Cspan class=\"hljs-link\">#introduction\u003C/span>)\n\u003Cspan class=\"hljs-bullet\">2.\u003C/span> [\u003Cspan class=\"hljs-string\">Getting Started\u003C/span>](\u003Cspan class=\"hljs-link\">#getting-started\u003C/span>)\n\u003Cspan class=\"hljs-bullet\">   -\u003C/span> [\u003Cspan class=\"hljs-string\">Prerequisites\u003C/span>](\u003Cspan class=\"hljs-link\">#prerequisites\u003C/span>)\n\u003Cspan class=\"hljs-bullet\">   -\u003C/span> [\u003Cspan class=\"hljs-string\">Installation\u003C/span>](\u003Cspan class=\"hljs-link\">#installation\u003C/span>)\n\u003Cspan class=\"hljs-bullet\">3.\u003C/span> [\u003Cspan class=\"hljs-string\">Usage Examples\u003C/span>](\u003Cspan class=\"hljs-link\">#usage-examples\u003C/span>)\n\u003Cspan class=\"hljs-bullet\">   -\u003C/span> [\u003Cspan class=\"hljs-string\">Basic Usage\u003C/span>](\u003Cspan class=\"hljs-link\">#basic-usage\u003C/span>)\n\u003Cspan class=\"hljs-bullet\">   -\u003C/span> [\u003Cspan class=\"hljs-string\">Advanced Features\u003C/span>](\u003Cspan class=\"hljs-link\">#advanced-features\u003C/span>)\n\u003Cspan class=\"hljs-bullet\">4.\u003C/span> [\u003Cspan class=\"hljs-string\">Troubleshooting\u003C/span>](\u003Cspan class=\"hljs-link\">#troubleshooting\u003C/span>)\n\u003Cspan class=\"hljs-bullet\">5.\u003C/span> [\u003Cspan class=\"hljs-string\">Conclusion\u003C/span>](\u003Cspan class=\"hljs-link\">#conclusion\u003C/span>)\n\n\u003Cspan class=\"hljs-section\">## Cross-Document References\u003C/span>\n\n\u003Cspan class=\"hljs-section\">### Linking to External Documents\u003C/span>\nReference sections in other Markdown files:\n\n[\u003Cspan class=\"hljs-string\">See API Documentation\u003C/span>](\u003Cspan class=\"hljs-link\">api-reference.md#authentication\u003C/span>)\n[\u003Cspan class=\"hljs-string\">View Installation Guide\u003C/span>](\u003Cspan class=\"hljs-link\">setup.md#requirements\u003C/span>)\n\n\u003Cspan class=\"hljs-section\">### Relative Path Navigation\u003C/span>\nNavigate between related documentation:\n\n[\u003Cspan class=\"hljs-string\">Previous: Setup\u003C/span>](\u003Cspan class=\"hljs-link\">../setup/installation.md\u003C/span>)\n[\u003Cspan class=\"hljs-string\">Next: Configuration\u003C/span>](\u003Cspan class=\"hljs-link\">./configuration.md#basic-config\u003C/span>)\n\u003C/code>\u003C/pre>\u003Ch3 id=\"automatic-id-generation-patterns\">Automatic ID Generation Patterns\u003C/h3>\n\u003Cp>Understanding how different Markdown processors handle automatic anchor ID generation:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">\u003Cspan class=\"hljs-section\"># Automatic ID Generation Rules\u003C/span>\n\n\u003Cspan class=\"hljs-section\">## Standard ID Conversion Patterns\u003C/span>\n\n\u003Cspan class=\"hljs-section\">### Text Transformation Rules\u003C/span>\nHeading text undergoes specific transformations to create valid IDs:\n\n\u003Cspan class=\"hljs-section\">#### Original Headings → Generated IDs\u003C/span>\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> "Getting Started" → \u003Cspan class=\"hljs-code\">`getting-started`\u003C/span>\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> "API Reference Guide" → \u003Cspan class=\"hljs-code\">`api-reference-guide`\u003C/span> \n\u003Cspan class=\"hljs-bullet\">-\u003C/span> "User Authentication & Security" → \u003Cspan class=\"hljs-code\">`user-authentication--security`\u003C/span>\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> "FAQ: Common Questions" → \u003Cspan class=\"hljs-code\">`faq-common-questions`\u003C/span>\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> "Version 2.0 Release Notes" → \u003Cspan class=\"hljs-code\">`version-20-release-notes`\u003C/span>\n\n\u003Cspan class=\"hljs-section\">### Special Character Handling\u003C/span>\nDifferent processors handle special characters differently:\n\n\u003Cspan class=\"hljs-section\">#### GitHub Flavored Markdown (GFM)\u003C/span>\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> Converts to lowercase\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> Replaces spaces with hyphens\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> Removes most special characters\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> Preserves numbers and letters\n\n\u003Cspan class=\"hljs-section\">#### GitLab Markdown\u003C/span>\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> Similar to GFM but with slight variations\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> Better Unicode support\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> Different handling of consecutive spaces\n\n\u003Cspan class=\"hljs-section\">#### Hugo Markdown\u003C/span>\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> More aggressive special character removal\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> Optional custom ID generation functions\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> Configurable transformation rules\n\n\u003Cspan class=\"hljs-section\">### Duplicate Heading Handling\u003C/span>\nWhen multiple headings have the same text:\n\n\u003Cspan class=\"hljs-section\">## Overview\u003C/span>\nContent for first overview section.\n\n\u003Cspan class=\"hljs-section\">## Overview {#overview-2}\u003C/span>\nContent for second overview section.\n\n\u003Cspan class=\"hljs-section\">## Overview {#detailed-overview}\u003C/span>\nContent for third overview section with custom ID.\n\n\u003Cspan class=\"hljs-section\">### Non-ASCII Character Support\u003C/span>\nInternational characters and Unicode handling:\n\n\u003Cspan class=\"hljs-section\">## Configuración Inicial → `configuración-inicial`\u003C/span>\n\u003Cspan class=\"hljs-section\">## データベース設定 → `データベース設定` (if Unicode supported)\u003C/span>\n\u003Cspan class=\"hljs-section\">## Εισαγωγή → `εισαγωγή` (Greek example)\u003C/span>\n\n\u003Cspan class=\"hljs-section\">### Best Practices for Predictable IDs\u003C/span>\n\u003Cspan class=\"hljs-bullet\">1.\u003C/span> Use descriptive, unique heading text\n\u003Cspan class=\"hljs-bullet\">2.\u003C/span> Avoid special characters when possible\n\u003Cspan class=\"hljs-bullet\">3.\u003C/span> Test ID generation across target platforms\n\u003Cspan class=\"hljs-bullet\">4.\u003C/span> Provide explicit IDs for critical sections\n\u003Cspan class=\"hljs-bullet\">5.\u003C/span> Document ID naming conventions for teams\n\u003C/code>\u003C/pre>\u003Ch2 id=\"advanced-navigation-implementation\">Advanced Navigation Implementation\u003C/h2>\n\u003Ch3 id=\"javascript-enhanced-navigation\">JavaScript-Enhanced Navigation\u003C/h3>\n\u003Cp>Creating dynamic table of contents and smooth scrolling functionality:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-javascript\">\u003Cspan class=\"hljs-comment\">// markdown-navigation-enhancer.js - Advanced anchor link functionality\u003C/span>\n\u003Cspan class=\"hljs-keyword\">class\u003C/span> \u003Cspan class=\"hljs-title class_\">MarkdownNavigationEnhancer\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\">smoothScrolling\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">generateTOC\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">highlightActive\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">updateURL\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">scrollOffset\u003C/span>: \u003Cspan class=\"hljs-number\">80\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">animationDuration\u003C/span>: \u003Cspan class=\"hljs-number\">800\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">activeClass\u003C/span>: \u003Cspan class=\"hljs-string\">'active'\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">tocSelector\u003C/span>: \u003Cspan class=\"hljs-string\">'.table-of-contents'\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">headingSelector\u003C/span>: \u003Cspan class=\"hljs-string\">'h1, h2, h3, h4, h5, h6'\u003C/span>,\n            ...options\n        };\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">headings\u003C/span> = [];\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">tocContainer\u003C/span> = \u003Cspan class=\"hljs-literal\">null\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">activeSection\u003C/span> = \u003Cspan class=\"hljs-literal\">null\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">scrollTimeout\u003C/span> = \u003Cspan class=\"hljs-literal\">null\u003C/span>;\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">initialize\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">initialize\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">collectHeadings\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">ensureHeadingIDs\u003C/span>();\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">generateTOC\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">generateTableOfContents\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\">smoothScrolling\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">setupSmoothScrolling\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\">highlightActive\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">setupActiveHighlighting\u003C/span>();\n        }\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">handleInitialHash\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">setupEventListeners\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">collectHeadings\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> headingElements = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">headingSelector\u003C/span>);\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">headings\u003C/span> = \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">from\u003C/span>(headingElements).\u003Cspan class=\"hljs-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">heading, index\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> level = \u003Cspan class=\"hljs-built_in\">parseInt\u003C/span>(heading.\u003Cspan class=\"hljs-property\">tagName\u003C/span>.\u003Cspan class=\"hljs-title function_\">charAt\u003C/span>(\u003Cspan class=\"hljs-number\">1\u003C/span>));\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> text = heading.\u003Cspan class=\"hljs-property\">textContent\u003C/span>.\u003Cspan class=\"hljs-title function_\">trim\u003C/span>();\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> id = heading.\u003Cspan class=\"hljs-property\">id\u003C/span> || \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">generateHeadingID\u003C/span>(text, index);\n            \n            \u003Cspan class=\"hljs-comment\">// Ensure heading has an ID\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!heading.\u003Cspan class=\"hljs-property\">id\u003C/span>) {\n                heading.\u003Cspan class=\"hljs-property\">id\u003C/span> = id;\n            }\n            \n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> {\n                \u003Cspan class=\"hljs-attr\">element\u003C/span>: heading,\n                \u003Cspan class=\"hljs-attr\">id\u003C/span>: id,\n                \u003Cspan class=\"hljs-attr\">text\u003C/span>: text,\n                \u003Cspan class=\"hljs-attr\">level\u003C/span>: level,\n                \u003Cspan class=\"hljs-attr\">offsetTop\u003C/span>: heading.\u003Cspan class=\"hljs-title function_\">getBoundingClientRect\u003C/span>().\u003Cspan class=\"hljs-property\">top\u003C/span> + \u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-property\">pageYOffset\u003C/span>\n            };\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">generateHeadingID\u003C/span>(\u003Cspan class=\"hljs-params\">text, fallbackIndex\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Convert heading text to valid anchor ID\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> id = text\n            .\u003Cspan class=\"hljs-title function_\">toLowerCase\u003C/span>()\n            .\u003Cspan class=\"hljs-title function_\">trim\u003C/span>()\n            .\u003Cspan class=\"hljs-title function_\">replace\u003C/span>(\u003Cspan class=\"hljs-regexp\">/[^\\w\\s-]/g\u003C/span>, \u003Cspan class=\"hljs-string\">''\u003C/span>) \u003Cspan class=\"hljs-comment\">// Remove special characters except hyphens\u003C/span>\n            .\u003Cspan class=\"hljs-title function_\">replace\u003C/span>(\u003Cspan class=\"hljs-regexp\">/\\s+/g\u003C/span>, \u003Cspan class=\"hljs-string\">'-'\u003C/span>)     \u003Cspan class=\"hljs-comment\">// Replace spaces with hyphens\u003C/span>\n            .\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\">// Replace multiple hyphens with single\u003C/span>\n            .\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 leading/trailing hyphens\u003C/span>\n        \n        \u003Cspan class=\"hljs-comment\">// Handle empty results\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!id) {\n            id = \u003Cspan class=\"hljs-string\">`heading-\u003Cspan class=\"hljs-subst\">${fallbackIndex}\u003C/span>`\u003C/span>;\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Handle duplicates\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> finalId = id;\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> counter = \u003Cspan class=\"hljs-number\">1\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">while\u003C/span> (\u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">getElementById\u003C/span>(finalId)) {\n            finalId = \u003Cspan class=\"hljs-string\">`\u003Cspan class=\"hljs-subst\">${id}\u003C/span>-\u003Cspan class=\"hljs-subst\">${counter}\u003C/span>`\u003C/span>;\n            counter++;\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> finalId;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">ensureHeadingIDs\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">headings\u003C/span>.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">heading\u003C/span> =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!heading.\u003Cspan class=\"hljs-property\">element\u003C/span>.\u003Cspan class=\"hljs-property\">id\u003C/span>) {\n                heading.\u003Cspan class=\"hljs-property\">element\u003C/span>.\u003Cspan class=\"hljs-property\">id\u003C/span> = heading.\u003Cspan class=\"hljs-property\">id\u003C/span>;\n            }\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">generateTableOfContents\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> tocContainer = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">tocSelector\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!tocContainer) {\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">createTOCContainer\u003C/span>();\n        }\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">tocContainer\u003C/span> = tocContainer;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">renderTOC\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">createTOCContainer\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Create TOC container if it doesn't exist\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> tocContainer = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n        tocContainer.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'table-of-contents'\u003C/span>;\n        tocContainer.\u003Cspan class=\"hljs-property\">innerHTML\u003C/span> = \u003Cspan class=\"hljs-string\">`\n            <h3>Table of Contents</h3>\n            <nav class="toc-nav" role="navigation" aria-label="Table of Contents">\n                <ul class="toc-list"></ul>\n            </nav>\n        `\u003C/span>;\n        \n        \u003Cspan class=\"hljs-comment\">// Insert after first heading or at beginning of main content\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> firstHeading = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">headingSelector\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (firstHeading) {\n            firstHeading.\u003Cspan class=\"hljs-property\">parentNode\u003C/span>.\u003Cspan class=\"hljs-title function_\">insertBefore\u003C/span>(tocContainer, firstHeading);\n        } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> main = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'main, article, .content'\u003C/span>);\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (main) {\n                main.\u003Cspan class=\"hljs-title function_\">insertBefore\u003C/span>(tocContainer, main.\u003Cspan class=\"hljs-property\">firstChild\u003C/span>);\n            }\n        }\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">tocContainer\u003C/span> = tocContainer;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">renderTOC\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">renderTOC\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">tocContainer\u003C/span>) \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> tocList = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">tocContainer\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'.toc-list'\u003C/span>) || \n                        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">tocContainer\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'ul'\u003C/span>);\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!tocList) \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n        \n        \u003Cspan class=\"hljs-comment\">// Build nested TOC structure\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> tocHTML = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">buildTOCHTML\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">headings\u003C/span>);\n        tocList.\u003Cspan class=\"hljs-property\">innerHTML\u003C/span> = tocHTML;\n        \n        \u003Cspan class=\"hljs-comment\">// Add click handlers for TOC links\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> tocLinks = tocList.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'a[href^="#"]'\u003C/span>);\n        tocLinks.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">link\u003C/span> =>\u003C/span> {\n            link.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'click'\u003C/span>, \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">e\u003C/span>) =>\u003C/span> {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">handleAnchorClick\u003C/span>(e);\n            });\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">buildTOCHTML\u003C/span>(\u003Cspan class=\"hljs-params\">headings\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (headings.\u003Cspan class=\"hljs-property\">length\u003C/span> === \u003Cspan class=\"hljs-number\">0\u003C/span>) \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">''\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> html = \u003Cspan class=\"hljs-string\">''\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> currentLevel = \u003Cspan class=\"hljs-number\">0\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> stack = [];\n        \n        headings.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">heading, index\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> { level, id, text } = heading;\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (level > currentLevel) {\n                \u003Cspan class=\"hljs-comment\">// Open new nested levels\u003C/span>\n                \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">let\u003C/span> i = currentLevel; i < level - \u003Cspan class=\"hljs-number\">1\u003C/span>; i++) {\n                    html += \u003Cspan class=\"hljs-string\">'<li><ul>'\u003C/span>;\n                    stack.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(\u003Cspan class=\"hljs-string\">'</ul></li>'\u003C/span>);\n                }\n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (currentLevel > \u003Cspan class=\"hljs-number\">0\u003C/span>) {\n                    html += \u003Cspan class=\"hljs-string\">'<li><ul>'\u003C/span>;\n                    stack.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(\u003Cspan class=\"hljs-string\">'</ul></li>'\u003C/span>);\n                }\n            } \u003Cspan class=\"hljs-keyword\">else\u003C/span> \u003Cspan class=\"hljs-keyword\">if\u003C/span> (level < currentLevel) {\n                \u003Cspan class=\"hljs-comment\">// Close nested levels\u003C/span>\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> levelsToClose = currentLevel - level;\n                \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">let\u003C/span> i = \u003Cspan class=\"hljs-number\">0\u003C/span>; i < levelsToClose; i++) {\n                    html += stack.\u003Cspan class=\"hljs-title function_\">pop\u003C/span>() || \u003Cspan class=\"hljs-string\">''\u003C/span>;\n                }\n                html += \u003Cspan class=\"hljs-string\">'</li>'\u003C/span>;\n            } \u003Cspan class=\"hljs-keyword\">else\u003C/span> \u003Cspan class=\"hljs-keyword\">if\u003C/span> (currentLevel > \u003Cspan class=\"hljs-number\">0\u003C/span>) {\n                html += \u003Cspan class=\"hljs-string\">'</li>'\u003C/span>;\n            }\n            \n            \u003Cspan class=\"hljs-comment\">// Add the current heading\u003C/span>\n            html += \u003Cspan class=\"hljs-string\">`<li><a href="#\u003Cspan class=\"hljs-subst\">${id}\u003C/span>" class="toc-link toc-level-\u003Cspan class=\"hljs-subst\">${level}\u003C/span>">\u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.escapeHTML(text)}\u003C/span></a>`\u003C/span>;\n            currentLevel = level;\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// Close remaining open tags\u003C/span>\n        html += \u003Cspan class=\"hljs-string\">'</li>'\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">while\u003C/span> (stack.\u003Cspan class=\"hljs-property\">length\u003C/span> > \u003Cspan class=\"hljs-number\">0\u003C/span>) {\n            html += stack.\u003Cspan class=\"hljs-title function_\">pop\u003C/span>();\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> html;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">setupSmoothScrolling\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Handle all anchor links on the page\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> anchorLinks = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'a[href^="#"]'\u003C/span>);\n        \n        anchorLinks.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">link\u003C/span> =>\u003C/span> {\n            link.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'click'\u003C/span>, \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">e\u003C/span>) =>\u003C/span> {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">handleAnchorClick\u003C/span>(e);\n            });\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">handleAnchorClick\u003C/span>(\u003Cspan class=\"hljs-params\">event\u003C/span>) {\n        event.\u003Cspan class=\"hljs-title function_\">preventDefault\u003C/span>();\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> targetId = event.\u003Cspan class=\"hljs-property\">target\u003C/span>.\u003Cspan class=\"hljs-title function_\">getAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'href'\u003C/span>).\u003Cspan class=\"hljs-title function_\">substring\u003C/span>(\u003Cspan class=\"hljs-number\">1\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> targetElement = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">getElementById\u003C/span>(targetId);\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (targetElement) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">scrollToElement\u003C/span>(targetElement);\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\">updateURL\u003C/span>) {\n                history.\u003Cspan class=\"hljs-title function_\">pushState\u003C/span>(\u003Cspan class=\"hljs-literal\">null\u003C/span>, \u003Cspan class=\"hljs-string\">''\u003C/span>, \u003Cspan class=\"hljs-string\">`#\u003Cspan class=\"hljs-subst\">${targetId}\u003C/span>`\u003C/span>);\n            }\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">scrollToElement\u003C/span>(\u003Cspan class=\"hljs-params\">element\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> offsetTop = element.\u003Cspan class=\"hljs-title function_\">getBoundingClientRect\u003C/span>().\u003Cspan class=\"hljs-property\">top\u003C/span> + \u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-property\">pageYOffset\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> targetPosition = offsetTop - \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">scrollOffset\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">smoothScrolling\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">smoothScrollTo\u003C/span>(targetPosition);\n        } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n            \u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-title function_\">scrollTo\u003C/span>(\u003Cspan class=\"hljs-number\">0\u003C/span>, targetPosition);\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Focus the element for accessibility\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">focusElement\u003C/span>(element);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">smoothScrollTo\u003C/span>(\u003Cspan class=\"hljs-params\">targetPosition\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> startPosition = \u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-property\">pageYOffset\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> distance = targetPosition - startPosition;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> duration = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">animationDuration\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> start = \u003Cspan class=\"hljs-literal\">null\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> \u003Cspan class=\"hljs-title function_\">animation\u003C/span> = (\u003Cspan class=\"hljs-params\">currentTime\u003C/span>) => {\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (start === \u003Cspan class=\"hljs-literal\">null\u003C/span>) start = currentTime;\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> timeElapsed = currentTime - start;\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> run = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">easeInOutCubic\u003C/span>(timeElapsed, startPosition, distance, duration);\n            \n            \u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-title function_\">scrollTo\u003C/span>(\u003Cspan class=\"hljs-number\">0\u003C/span>, run);\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (timeElapsed < duration) {\n                \u003Cspan class=\"hljs-title function_\">requestAnimationFrame\u003C/span>(animation);\n            }\n        };\n        \n        \u003Cspan class=\"hljs-title function_\">requestAnimationFrame\u003C/span>(animation);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">easeInOutCubic\u003C/span>(\u003Cspan class=\"hljs-params\">t, b, c, d\u003C/span>) {\n        t /= d / \u003Cspan class=\"hljs-number\">2\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (t < \u003Cspan class=\"hljs-number\">1\u003C/span>) \u003Cspan class=\"hljs-keyword\">return\u003C/span> c / \u003Cspan class=\"hljs-number\">2\u003C/span> * t * t * t + b;\n        t -= \u003Cspan class=\"hljs-number\">2\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> c / \u003Cspan class=\"hljs-number\">2\u003C/span> * (t * t * t + \u003Cspan class=\"hljs-number\">2\u003C/span>) + b;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">focusElement\u003C/span>(\u003Cspan class=\"hljs-params\">element\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Set focus for accessibility, with fallback for non-focusable elements\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!element.\u003Cspan class=\"hljs-title function_\">getAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'tabindex'\u003C/span>)) {\n            element.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'tabindex'\u003C/span>, \u003Cspan class=\"hljs-string\">'-1'\u003C/span>);\n        }\n        element.\u003Cspan class=\"hljs-title function_\">focus\u003C/span>({ \u003Cspan class=\"hljs-attr\">preventScroll\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span> });\n        \n        \u003Cspan class=\"hljs-comment\">// Remove tabindex after focus to maintain natural tab order\u003C/span>\n        \u003Cspan class=\"hljs-built_in\">setTimeout\u003C/span>(\u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (element.\u003Cspan class=\"hljs-title function_\">getAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'tabindex'\u003C/span>) === \u003Cspan class=\"hljs-string\">'-1'\u003C/span>) {\n                element.\u003Cspan class=\"hljs-title function_\">removeAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'tabindex'\u003C/span>);\n            }\n        }, \u003Cspan class=\"hljs-number\">100\u003C/span>);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">setupActiveHighlighting\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Create intersection observer for active section highlighting\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">intersectionObserver\u003C/span> = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">IntersectionObserver\u003C/span>(\n            \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">entries\u003C/span>) =>\u003C/span> {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">handleIntersection\u003C/span>(entries);\n            },\n            {\n                \u003Cspan class=\"hljs-attr\">threshold\u003C/span>: [\u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-number\">0.25\u003C/span>, \u003Cspan class=\"hljs-number\">0.5\u003C/span>, \u003Cspan class=\"hljs-number\">0.75\u003C/span>, \u003Cspan class=\"hljs-number\">1.0\u003C/span>],\n                \u003Cspan class=\"hljs-attr\">rootMargin\u003C/span>: \u003Cspan class=\"hljs-string\">`-\u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.options.scrollOffset}\u003C/span>px 0px -75% 0px`\u003C/span>\n            }\n        );\n        \n        \u003Cspan class=\"hljs-comment\">// Observe all headings\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">headings\u003C/span>.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">heading\u003C/span> =>\u003C/span> {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">intersectionObserver\u003C/span>.\u003Cspan class=\"hljs-title function_\">observe\u003C/span>(heading.\u003Cspan class=\"hljs-property\">element\u003C/span>);\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// Fallback scroll-based highlighting\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'scroll'\u003C/span>, \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">throttle\u003C/span>(\u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">updateActiveSection\u003C/span>();\n        }, \u003Cspan class=\"hljs-number\">100\u003C/span>), { \u003Cspan class=\"hljs-attr\">passive\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span> });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">handleIntersection\u003C/span>(\u003Cspan class=\"hljs-params\">entries\u003C/span>) {\n        entries.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">entry\u003C/span> =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> heading = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">headings\u003C/span>.\u003Cspan class=\"hljs-title function_\">find\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">h\u003C/span> =>\u003C/span> h.\u003Cspan class=\"hljs-property\">element\u003C/span> === entry.\u003Cspan class=\"hljs-property\">target\u003C/span>);\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (heading && entry.\u003Cspan class=\"hljs-property\">isIntersecting\u003C/span> && entry.\u003Cspan class=\"hljs-property\">intersectionRatio\u003C/span> > \u003Cspan class=\"hljs-number\">0.5\u003C/span>) {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">setActiveSection\u003C/span>(heading.\u003Cspan class=\"hljs-property\">id\u003C/span>);\n            }\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">updateActiveSection\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> scrollPosition = \u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-property\">pageYOffset\u003C/span> + \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">scrollOffset\u003C/span>;\n        \n        \u003Cspan class=\"hljs-comment\">// Find the current section based on scroll position\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> activeHeading = \u003Cspan class=\"hljs-literal\">null\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">let\u003C/span> i = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">headings\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span> - \u003Cspan class=\"hljs-number\">1\u003C/span>; i >= \u003Cspan class=\"hljs-number\">0\u003C/span>; i--) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> heading = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">headings\u003C/span>[i];\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> offsetTop = heading.\u003Cspan class=\"hljs-property\">element\u003C/span>.\u003Cspan class=\"hljs-title function_\">getBoundingClientRect\u003C/span>().\u003Cspan class=\"hljs-property\">top\u003C/span> + \u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-property\">pageYOffset\u003C/span>;\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (scrollPosition >= offsetTop - \u003Cspan class=\"hljs-number\">10\u003C/span>) {\n                activeHeading = heading;\n                \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n            }\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (activeHeading) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">setActiveSection\u003C/span>(activeHeading.\u003Cspan class=\"hljs-property\">id\u003C/span>);\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">setActiveSection\u003C/span>(\u003Cspan class=\"hljs-params\">sectionId\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">activeSection\u003C/span> === sectionId) \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">activeSection\u003C/span> = sectionId;\n        \n        \u003Cspan class=\"hljs-comment\">// Update TOC highlighting\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">tocContainer\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> tocLinks = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">tocContainer\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'.toc-link'\u003C/span>);\n            tocLinks.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">link\u003C/span> =>\u003C/span> {\n                link.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">remove\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">activeClass\u003C/span>);\n            });\n            \n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> activeLink = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">tocContainer\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">`a[href="#\u003Cspan class=\"hljs-subst\">${sectionId}\u003C/span>"]`\u003C/span>);\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (activeLink) {\n                activeLink.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">add\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">activeClass\u003C/span>);\n            }\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Update section highlighting\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">headings\u003C/span>.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">heading\u003C/span> =>\u003C/span> {\n            heading.\u003Cspan class=\"hljs-property\">element\u003C/span>.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">remove\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">activeClass\u003C/span>);\n        });\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> activeHeading = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">getElementById\u003C/span>(sectionId);\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (activeHeading) {\n            activeHeading.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">add\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">activeClass\u003C/span>);\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">handleInitialHash\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Handle page load with hash fragment\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-property\">location\u003C/span>.\u003Cspan class=\"hljs-property\">hash\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> targetId = \u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-property\">location\u003C/span>.\u003Cspan class=\"hljs-property\">hash\u003C/span>.\u003Cspan class=\"hljs-title function_\">substring\u003C/span>(\u003Cspan class=\"hljs-number\">1\u003C/span>);\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> targetElement = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">getElementById\u003C/span>(targetId);\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (targetElement) {\n                \u003Cspan class=\"hljs-comment\">// Delay scroll to ensure page is fully loaded\u003C/span>\n                \u003Cspan class=\"hljs-built_in\">setTimeout\u003C/span>(\u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n                    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">scrollToElement\u003C/span>(targetElement);\n                }, \u003Cspan class=\"hljs-number\">100\u003C/span>);\n            }\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">setupEventListeners\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Handle browser back/forward navigation\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'popstate'\u003C/span>, \u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">handleInitialHash\u003C/span>();\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// Handle dynamic content changes\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> observer = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">MutationObserver\u003C/span>(\u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">refresh\u003C/span>();\n        });\n        \n        observer.\u003Cspan class=\"hljs-title function_\">observe\u003C/span>(\u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-property\">body\u003C/span>, {\n            \u003Cspan class=\"hljs-attr\">childList\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">subtree\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// Handle window resize\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'resize'\u003C/span>, \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">throttle\u003C/span>(\u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">updateHeadingPositions\u003C/span>();\n        }, \u003Cspan class=\"hljs-number\">250\u003C/span>));\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">updateHeadingPositions\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">headings\u003C/span>.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">heading\u003C/span> =>\u003C/span> {\n            heading.\u003Cspan class=\"hljs-property\">offsetTop\u003C/span> = heading.\u003Cspan class=\"hljs-property\">element\u003C/span>.\u003Cspan class=\"hljs-title function_\">getBoundingClientRect\u003C/span>().\u003Cspan class=\"hljs-property\">top\u003C/span> + \u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-property\">pageYOffset\u003C/span>;\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">refresh\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Re-collect headings and regenerate TOC\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">headings\u003C/span> = [];\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">collectHeadings\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">ensureHeadingIDs\u003C/span>();\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">generateTOC\u003C/span> && \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">tocContainer\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">renderTOC\u003C/span>();\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">intersectionObserver\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">intersectionObserver\u003C/span>.\u003Cspan class=\"hljs-title function_\">disconnect\u003C/span>();\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">setupActiveHighlighting\u003C/span>();\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">throttle\u003C/span>(\u003Cspan class=\"hljs-params\">func, limit\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> inThrottle;\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-keyword\">function\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> args = \u003Cspan class=\"hljs-variable language_\">arguments\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> context = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!inThrottle) {\n                func.\u003Cspan class=\"hljs-title function_\">apply\u003C/span>(context, args);\n                inThrottle = \u003Cspan class=\"hljs-literal\">true\u003C/span>;\n                \u003Cspan class=\"hljs-built_in\">setTimeout\u003C/span>(\u003Cspan class=\"hljs-function\">() =>\u003C/span> inThrottle = \u003Cspan class=\"hljs-literal\">false\u003C/span>, limit);\n            }\n        };\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">escapeHTML\u003C/span>(\u003Cspan class=\"hljs-params\">text\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> div = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n        div.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = text;\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> div.\u003Cspan class=\"hljs-property\">innerHTML\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-comment\">// Public API methods\u003C/span>\n    \u003Cspan class=\"hljs-title function_\">scrollToSection\u003C/span>(\u003Cspan class=\"hljs-params\">sectionId\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> element = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">getElementById\u003C/span>(sectionId);\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (element) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">scrollToElement\u003C/span>(element);\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">getActiveSection\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">activeSection\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">getTOC\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">headings\u003C/span>.\u003Cspan class=\"hljs-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">heading\u003C/span> =>\u003C/span> ({\n            \u003Cspan class=\"hljs-attr\">id\u003C/span>: heading.\u003Cspan class=\"hljs-property\">id\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">text\u003C/span>: heading.\u003Cspan class=\"hljs-property\">text\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">level\u003C/span>: heading.\u003Cspan class=\"hljs-property\">level\u003C/span>\n        }));\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">destroy\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">intersectionObserver\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">intersectionObserver\u003C/span>.\u003Cspan class=\"hljs-title function_\">disconnect\u003C/span>();\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Remove event listeners and clean up\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> anchorLinks = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'a[href^="#"]'\u003C/span>);\n        anchorLinks.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">link\u003C/span> =>\u003C/span> {\n            link.\u003Cspan class=\"hljs-title function_\">removeEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'click'\u003C/span>, \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">handleAnchorClick\u003C/span>);\n        });\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">// Auto-initialize navigation enhancement\u003C/span>\n\u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'DOMContentLoaded'\u003C/span>, \u003Cspan class=\"hljs-keyword\">function\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n    \u003Cspan class=\"hljs-comment\">// Check if page has headings before initializing\u003C/span>\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> headings = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'h1, h2, h3, h4, h5, h6'\u003C/span>);\n    \n    \u003Cspan class=\"hljs-keyword\">if\u003C/span> (headings.\u003Cspan class=\"hljs-property\">length\u003C/span> > \u003Cspan class=\"hljs-number\">2\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-property\">markdownNav\u003C/span> = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">MarkdownNavigationEnhancer\u003C/span>({\n            \u003Cspan class=\"hljs-attr\">smoothScrolling\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">generateTOC\u003C/span>: !\u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'.table-of-contents'\u003C/span>),\n            \u003Cspan class=\"hljs-attr\">highlightActive\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">scrollOffset\u003C/span>: \u003Cspan class=\"hljs-number\">80\u003C/span>\n        });\n    }\n});\n\u003C/code>\u003C/pre>\u003Ch3 id=\"css-styling-for-enhanced-navigation\">CSS Styling for Enhanced Navigation\u003C/h3>\n\u003Cp>Comprehensive styling for anchor links and navigation elements:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-css\">\u003Cspan class=\"hljs-comment\">/* markdown-navigation.css - Advanced anchor link and TOC styling */\u003C/span>\n\n\u003Cspan class=\"hljs-comment\">/* Table of Contents Styling */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.table-of-contents\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#f8f9fa\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-number\">#e9ecef\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">8px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">1.5rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">2rem\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">position\u003C/span>: relative;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.table-of-contents\u003C/span> \u003Cspan class=\"hljs-selector-tag\">h3\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">1rem\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#495057\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">1.1rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">600\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">2px\u003C/span> solid \u003Cspan class=\"hljs-number\">#dee2e6\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">padding-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">0.5rem\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.toc-nav\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">0.9rem\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.toc-list\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">list-style\u003C/span>: none;\n    \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-number\">1.6\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.toc-list\u003C/span> \u003Cspan class=\"hljs-selector-tag\">li\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.toc-list\u003C/span> \u003Cspan class=\"hljs-selector-tag\">ul\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">list-style\u003C/span>: none;\n    \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">0.5rem\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">0.5rem\u003C/span> \u003Cspan class=\"hljs-number\">1.2rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border-left\u003C/span>: \u003Cspan class=\"hljs-number\">2px\u003C/span> solid \u003Cspan class=\"hljs-number\">#e9ecef\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">padding-left\u003C/span>: \u003Cspan class=\"hljs-number\">0.8rem\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.toc-link\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">display\u003C/span>: block;\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">0.3rem\u003C/span> \u003Cspan class=\"hljs-number\">0.5rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#6c757d\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">text-decoration\u003C/span>: none;\n    \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">4px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">transition\u003C/span>: all \u003Cspan class=\"hljs-number\">0.2s\u003C/span> ease;\n    \u003Cspan class=\"hljs-attribute\">position\u003C/span>: relative;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.toc-link\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:hover\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#495057\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-number\">#e9ecef\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">text-decoration\u003C/span>: none;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.toc-link\u003C/span>\u003Cspan class=\"hljs-selector-class\">.active\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#007bff\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-built_in\">rgba\u003C/span>(\u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-number\">123\u003C/span>, \u003Cspan class=\"hljs-number\">255\u003C/span>, \u003Cspan class=\"hljs-number\">0.1\u003C/span>);\n    \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">500\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.toc-link\u003C/span>\u003Cspan class=\"hljs-selector-class\">.active\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">::before\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">content\u003C/span>: \u003Cspan class=\"hljs-string\">''\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">position\u003C/span>: absolute;\n    \u003Cspan class=\"hljs-attribute\">left\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">top\u003C/span>: \u003Cspan class=\"hljs-number\">50%\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">transform\u003C/span>: \u003Cspan class=\"hljs-built_in\">translateY\u003C/span>(-\u003Cspan class=\"hljs-number\">50%\u003C/span>);\n    \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">3px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">height\u003C/span>: \u003Cspan class=\"hljs-number\">1.2em\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-number\">#007bff\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">2px\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Level-specific styling */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.toc-level-1\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">600\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">1rem\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.toc-level-2\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">500\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">0.95rem\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.toc-level-3\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: normal;\n    \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">0.9rem\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.toc-level-4\u003C/span>,\n\u003Cspan class=\"hljs-selector-class\">.toc-level-5\u003C/span>,\n\u003Cspan class=\"hljs-selector-class\">.toc-level-6\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: normal;\n    \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">0.85rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">opacity\u003C/span>: \u003Cspan class=\"hljs-number\">0.8\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Sticky TOC for larger screens */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> (\u003Cspan class=\"hljs-attribute\">min-width\u003C/span>: \u003Cspan class=\"hljs-number\">1200px\u003C/span>) {\n    \u003Cspan class=\"hljs-selector-class\">.table-of-contents\u003C/span>\u003Cspan class=\"hljs-selector-class\">.sticky\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">position\u003C/span>: sticky;\n        \u003Cspan class=\"hljs-attribute\">top\u003C/span>: \u003Cspan class=\"hljs-number\">2rem\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">float\u003C/span>: right;\n        \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">280px\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">margin-left\u003C/span>: \u003Cspan class=\"hljs-number\">2rem\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">margin-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">2rem\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">max-height\u003C/span>: \u003Cspan class=\"hljs-built_in\">calc\u003C/span>(\u003Cspan class=\"hljs-number\">100vh\u003C/span> - \u003Cspan class=\"hljs-number\">4rem\u003C/span>);\n        \u003Cspan class=\"hljs-attribute\">overflow-y\u003C/span>: auto;\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">/* Heading anchor links */\u003C/span>\n\u003Cspan class=\"hljs-selector-tag\">h1\u003C/span>, \u003Cspan class=\"hljs-selector-tag\">h2\u003C/span>, \u003Cspan class=\"hljs-selector-tag\">h3\u003C/span>, \u003Cspan class=\"hljs-selector-tag\">h4\u003C/span>, \u003Cspan class=\"hljs-selector-tag\">h5\u003C/span>, \u003Cspan class=\"hljs-selector-tag\">h6\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">position\u003C/span>: relative;\n    \u003Cspan class=\"hljs-attribute\">scroll-margin-top\u003C/span>: \u003Cspan class=\"hljs-number\">80px\u003C/span>; \u003Cspan class=\"hljs-comment\">/* Account for fixed headers */\u003C/span>\n}\n\n\u003Cspan class=\"hljs-selector-class\">.heading-anchor\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">opacity\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">margin-left\u003C/span>: \u003Cspan class=\"hljs-number\">0.5rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#6c757d\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">text-decoration\u003C/span>: none;\n    \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: normal;\n    \u003Cspan class=\"hljs-attribute\">transition\u003C/span>: opacity \u003Cspan class=\"hljs-number\">0.2s\u003C/span> ease;\n}\n\n\u003Cspan class=\"hljs-selector-tag\">h1\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:hover\u003C/span> \u003Cspan class=\"hljs-selector-class\">.heading-anchor\u003C/span>,\n\u003Cspan class=\"hljs-selector-tag\">h2\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:hover\u003C/span> \u003Cspan class=\"hljs-selector-class\">.heading-anchor\u003C/span>,\n\u003Cspan class=\"hljs-selector-tag\">h3\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:hover\u003C/span> \u003Cspan class=\"hljs-selector-class\">.heading-anchor\u003C/span>,\n\u003Cspan class=\"hljs-selector-tag\">h4\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:hover\u003C/span> \u003Cspan class=\"hljs-selector-class\">.heading-anchor\u003C/span>,\n\u003Cspan class=\"hljs-selector-tag\">h5\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:hover\u003C/span> \u003Cspan class=\"hljs-selector-class\">.heading-anchor\u003C/span>,\n\u003Cspan class=\"hljs-selector-tag\">h6\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:hover\u003C/span> \u003Cspan class=\"hljs-selector-class\">.heading-anchor\u003C/span>,\n\u003Cspan class=\"hljs-selector-class\">.heading-anchor\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:focus\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">opacity\u003C/span>: \u003Cspan class=\"hljs-number\">1\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.heading-anchor\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">::before\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">content\u003C/span>: \u003Cspan class=\"hljs-string\">'🔗'\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">0.8em\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Alternative text-based anchor */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.heading-anchor\u003C/span>\u003Cspan class=\"hljs-selector-class\">.text-anchor\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">::before\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">content\u003C/span>: \u003Cspan class=\"hljs-string\">'#'\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-family\u003C/span>: monospace;\n    \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">0.9em\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Active heading highlighting */\u003C/span>\n\u003Cspan class=\"hljs-selector-tag\">h1\u003C/span>\u003Cspan class=\"hljs-selector-class\">.active\u003C/span>,\n\u003Cspan class=\"hljs-selector-tag\">h2\u003C/span>\u003Cspan class=\"hljs-selector-class\">.active\u003C/span>,\n\u003Cspan class=\"hljs-selector-tag\">h3\u003C/span>\u003Cspan class=\"hljs-selector-class\">.active\u003C/span>,\n\u003Cspan class=\"hljs-selector-tag\">h4\u003C/span>\u003Cspan class=\"hljs-selector-class\">.active\u003C/span>,\n\u003Cspan class=\"hljs-selector-tag\">h5\u003C/span>\u003Cspan class=\"hljs-selector-class\">.active\u003C/span>,\n\u003Cspan class=\"hljs-selector-tag\">h6\u003C/span>\u003Cspan class=\"hljs-selector-class\">.active\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#007bff\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">position\u003C/span>: relative;\n}\n\n\u003Cspan class=\"hljs-selector-tag\">h1\u003C/span>\u003Cspan class=\"hljs-selector-class\">.active\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">::before\u003C/span>,\n\u003Cspan class=\"hljs-selector-tag\">h2\u003C/span>\u003Cspan class=\"hljs-selector-class\">.active\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">::before\u003C/span>,\n\u003Cspan class=\"hljs-selector-tag\">h3\u003C/span>\u003Cspan class=\"hljs-selector-class\">.active\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">::before\u003C/span>,\n\u003Cspan class=\"hljs-selector-tag\">h4\u003C/span>\u003Cspan class=\"hljs-selector-class\">.active\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">::before\u003C/span>,\n\u003Cspan class=\"hljs-selector-tag\">h5\u003C/span>\u003Cspan class=\"hljs-selector-class\">.active\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">::before\u003C/span>,\n\u003Cspan class=\"hljs-selector-tag\">h6\u003C/span>\u003Cspan class=\"hljs-selector-class\">.active\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">::before\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">content\u003C/span>: \u003Cspan class=\"hljs-string\">''\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">position\u003C/span>: absolute;\n    \u003Cspan class=\"hljs-attribute\">left\u003C/span>: -\u003Cspan class=\"hljs-number\">1rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">top\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">bottom\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">4px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-number\">#007bff\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">2px\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Smooth scroll behavior */\u003C/span>\n\u003Cspan class=\"hljs-selector-tag\">html\u003C/span> {\n    scroll-behavior: smooth;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Override smooth scroll for users who prefer reduced motion */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> (\u003Cspan class=\"hljs-attribute\">prefers-reduced-motion\u003C/span>: reduce) {\n    \u003Cspan class=\"hljs-selector-tag\">html\u003C/span> {\n        scroll-behavior: auto;\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">/* In-page navigation buttons */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.nav-button\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">display\u003C/span>: inline-block;\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">0.5rem\u003C/span> \u003Cspan class=\"hljs-number\">1rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#007bff\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: white;\n    \u003Cspan class=\"hljs-attribute\">text-decoration\u003C/span>: none;\n    \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">4px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">0.9rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">transition\u003C/span>: background-color \u003Cspan class=\"hljs-number\">0.2s\u003C/span> ease;\n    \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">0.25rem\u003C/span> \u003Cspan class=\"hljs-number\">0.5rem\u003C/span> \u003Cspan class=\"hljs-number\">0.25rem\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.nav-button\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:hover\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#0056b3\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">text-decoration\u003C/span>: none;\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: white;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.nav-button\u003C/span>\u003Cspan class=\"hljs-selector-class\">.secondary\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#6c757d\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.nav-button\u003C/span>\u003Cspan class=\"hljs-selector-class\">.secondary\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:hover\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#545b62\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Breadcrumb navigation */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.breadcrumb-nav\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#f8f9fa\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">0.75rem\u003C/span> \u003Cspan class=\"hljs-number\">1rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">1rem\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">4px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">0.9rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border-left\u003C/span>: \u003Cspan class=\"hljs-number\">4px\u003C/span> solid \u003Cspan class=\"hljs-number\">#007bff\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.breadcrumb-nav\u003C/span> \u003Cspan class=\"hljs-selector-tag\">ul\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">list-style\u003C/span>: none;\n    \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">display\u003C/span>: flex;\n    \u003Cspan class=\"hljs-attribute\">flex-wrap\u003C/span>: wrap;\n    \u003Cspan class=\"hljs-attribute\">align-items\u003C/span>: center;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.breadcrumb-nav\u003C/span> \u003Cspan class=\"hljs-selector-tag\">li\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.breadcrumb-nav\u003C/span> \u003Cspan class=\"hljs-selector-tag\">li\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:not\u003C/span>(\u003Cspan class=\"hljs-selector-pseudo\">:last-child\u003C/span>)\u003Cspan class=\"hljs-selector-pseudo\">::after\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">content\u003C/span>: \u003Cspan class=\"hljs-string\">'→'\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">0.5rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#6c757d\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.breadcrumb-nav\u003C/span> \u003Cspan class=\"hljs-selector-tag\">a\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#007bff\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">text-decoration\u003C/span>: none;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.breadcrumb-nav\u003C/span> \u003Cspan class=\"hljs-selector-tag\">a\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:hover\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">text-decoration\u003C/span>: underline;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Skip to content link for accessibility */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.skip-to-content\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">position\u003C/span>: absolute;\n    \u003Cspan class=\"hljs-attribute\">top\u003C/span>: -\u003Cspan class=\"hljs-number\">40px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">left\u003C/span>: \u003Cspan class=\"hljs-number\">6px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#000\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: white;\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">8px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">text-decoration\u003C/span>: none;\n    \u003Cspan class=\"hljs-attribute\">z-index\u003C/span>: \u003Cspan class=\"hljs-number\">1000\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">4px\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.skip-to-content\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:focus\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">top\u003C/span>: \u003Cspan class=\"hljs-number\">6px\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Mobile responsive design */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> (\u003Cspan class=\"hljs-attribute\">max-width\u003C/span>: \u003Cspan class=\"hljs-number\">768px\u003C/span>) {\n    \u003Cspan class=\"hljs-selector-class\">.table-of-contents\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">1rem\u003C/span> -\u003Cspan class=\"hljs-number\">1rem\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">border-left\u003C/span>: none;\n        \u003Cspan class=\"hljs-attribute\">border-right\u003C/span>: none;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.table-of-contents\u003C/span>\u003Cspan class=\"hljs-selector-class\">.sticky\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">position\u003C/span>: static;\n        \u003Cspan class=\"hljs-attribute\">float\u003C/span>: none;\n        \u003Cspan class=\"hljs-attribute\">width\u003C/span>: auto;\n        \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">1rem\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.toc-list\u003C/span> \u003Cspan class=\"hljs-selector-tag\">ul\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">margin-left\u003C/span>: \u003Cspan class=\"hljs-number\">1rem\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">padding-left\u003C/span>: \u003Cspan class=\"hljs-number\">0.6rem\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-selector-tag\">h1\u003C/span>, \u003Cspan class=\"hljs-selector-tag\">h2\u003C/span>, \u003Cspan class=\"hljs-selector-tag\">h3\u003C/span>, \u003Cspan class=\"hljs-selector-tag\">h4\u003C/span>, \u003Cspan class=\"hljs-selector-tag\">h5\u003C/span>, \u003Cspan class=\"hljs-selector-tag\">h6\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">scroll-margin-top\u003C/span>: \u003Cspan class=\"hljs-number\">60px\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.breadcrumb-nav\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">0.5rem\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">0.5rem\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.breadcrumb-nav\u003C/span> \u003Cspan class=\"hljs-selector-tag\">ul\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">flex-direction\u003C/span>: column;\n        \u003Cspan class=\"hljs-attribute\">align-items\u003C/span>: flex-start;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.breadcrumb-nav\u003C/span> \u003Cspan class=\"hljs-selector-tag\">li\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:not\u003C/span>(\u003Cspan class=\"hljs-selector-pseudo\">:last-child\u003C/span>)\u003Cspan class=\"hljs-selector-pseudo\">::after\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">display\u003C/span>: none;\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">/* Print styles */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> print {\n    \u003Cspan class=\"hljs-selector-class\">.table-of-contents\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">page-break-inside\u003C/span>: avoid;\n        \u003Cspan class=\"hljs-attribute\">background\u003C/span>: white;\n        \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-number\">#000\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.heading-anchor\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">display\u003C/span>: none;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.nav-button\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">display\u003C/span>: none;\n    }\n    \n    \u003Cspan class=\"hljs-selector-tag\">a\u003C/span>\u003Cspan class=\"hljs-selector-attr\">[href^=\u003Cspan class=\"hljs-string\">"#"\u003C/span>]\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">::after\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">content\u003C/span>: \u003Cspan class=\"hljs-string\">" (see page "\u003C/span> \u003Cspan class=\"hljs-built_in\">target-counter\u003C/span>(\u003Cspan class=\"hljs-built_in\">attr\u003C/span>(href), page) \u003Cspan class=\"hljs-string\">")"\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">0.8em\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#666\u003C/span>;\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">/* High contrast mode support */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> (\u003Cspan class=\"hljs-attribute\">prefers-contrast\u003C/span>: high) {\n    \u003Cspan class=\"hljs-selector-class\">.table-of-contents\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">2px\u003C/span> solid;\n        \u003Cspan class=\"hljs-attribute\">background\u003C/span>: white;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.toc-link\u003C/span>\u003Cspan class=\"hljs-selector-class\">.active\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: highlight;\n        \u003Cspan class=\"hljs-attribute\">color\u003C/span>: highlighttext;\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">/* Focus indicators for keyboard navigation */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.toc-link\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:focus\u003C/span>,\n\u003Cspan class=\"hljs-selector-class\">.nav-button\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:focus\u003C/span>,\n\u003Cspan class=\"hljs-selector-class\">.heading-anchor\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:focus\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">outline\u003C/span>: \u003Cspan class=\"hljs-number\">2px\u003C/span> solid \u003Cspan class=\"hljs-number\">#007bff\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">outline-offset\u003C/span>: \u003Cspan class=\"hljs-number\">2px\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Loading state for dynamic TOC */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.table-of-contents\u003C/span>\u003Cspan class=\"hljs-selector-class\">.loading\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">opacity\u003C/span>: \u003Cspan class=\"hljs-number\">0.6\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">pointer-events\u003C/span>: none;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.table-of-contents\u003C/span>\u003Cspan class=\"hljs-selector-class\">.loading\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">::after\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">content\u003C/span>: \u003Cspan class=\"hljs-string\">'Loading table of contents...'\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">display\u003C/span>: block;\n    \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: center;\n    \u003Cspan class=\"hljs-attribute\">font-style\u003C/span>: italic;\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#6c757d\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">margin-top\u003C/span>: \u003Cspan class=\"hljs-number\">1rem\u003C/span>;\n}\n\u003C/code>\u003C/pre>\u003Ch2 id=\"cross-platform-implementation-strategies\">Cross-Platform Implementation Strategies\u003C/h2>\n\u003Ch3 id=\"jekyll-integration\">Jekyll Integration\u003C/h3>\n\u003Cp>Implementing anchor links in Jekyll with automatic heading processing:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-liquid\"><!-- _includes/table-of-contents.html - Jekyll TOC generation -->\n{% assign toc_content = "" %}\n{% assign headings = "" %}\n{% assign heading_levels = "" %}\n\n<!-- Extract headings from content -->\n{% assign content_array = include.content | split: "<h" %}\n{% for item in content_array %}\n    {% if forloop.first == false %}\n        {% assign heading_parts = item | split: ">" %}\n        {% assign level = heading_parts[0] | slice: 0, 1 %}\n        {% assign heading_content = heading_parts[1] | split: "</h" | first %}\n        \n        {% if heading_content and level %}\n            <!-- Generate heading ID -->\n            {% assign heading_id = heading_content | strip_html | downcase | replace: " ", "-" | replace: "'", "" | replace: ":", "" | replace: ".", "" | replace: ",", "" | replace: "!", "" | replace: "?", "" %}\n            \n            <!-- Store heading data -->\n            {% assign headings = headings | append: heading_id | append: "|" | append: heading_content | append: "|" | append: level | append: "||" %}\n        {% endif %}\n    {% endif %}\n{% endfor %}\n\n<!-- Generate TOC structure -->\n{% assign heading_array = headings | split: "||" %}\n{% assign toc_html = "" %}\n{% assign current_level = 0 %}\n{% assign level_stack = "" %}\n\n<div class="table-of-contents">\n    <h3>Table of Contents</h3>\n    <nav class="toc-nav">\n        <ul class="toc-list">\n            {% for heading_data in heading_array %}\n                {% if heading_data != "" %}\n                    {% assign heading_parts = heading_data | split: "|" %}\n                    {% assign h_id = heading_parts[0] %}\n                    {% assign h_text = heading_parts[1] %}\n                    {% assign h_level = heading_parts[2] | plus: 0 %}\n                    \n                    {% if h_level > current_level %}\n                        <!-- Open nested lists -->\n                        {% for i in (current_level..h_level) %}\n                            {% if forloop.first == false %}\n                                <li><ul>\n                            {% endif %}\n                        {% endfor %}\n                    {% elsif h_level < current_level %}\n                        <!-- Close nested lists -->\n                        {% assign levels_to_close = current_level | minus: h_level %}\n                        {% for i in (1..levels_to_close) %}\n                            </ul></li>\n                        {% endfor %}\n                        </li>\n                    {% elsif current_level > 0 %}\n                        </li>\n                    {% endif %}\n                    \n                    <li>\n                        <a href="#{{ h_id }}" class="toc-link toc-level-{{ h_level }}">\n                            {{ h_text | strip_html }}\n                        </a>\n                    \n                    {% assign current_level = h_level %}\n                {% endif %}\n            {% endfor %}\n            \n            <!-- Close remaining open tags -->\n            </li>\n            {% for i in (2..current_level) %}\n                </ul></li>\n            {% endfor %}\n        </ul>\n    </nav>\n</div>\n\n<!-- Auto-inject heading anchors -->\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n    const headings = document.querySelectorAll('h1, h2, h3, h4, h5, h6');\n    \n    headings.forEach(heading => {\n        if (heading.id) {\n            const anchor = document.createElement('a');\n            anchor.href = '#' + heading.id;\n            anchor.className = 'heading-anchor';\n            anchor.setAttribute('aria-label', 'Link to ' + heading.textContent);\n            anchor.innerHTML = '<span aria-hidden="true">#</span>';\n            \n            heading.appendChild(anchor);\n        }\n    });\n});\n</script>\n\u003C/code>\u003C/pre>\u003Ch3 id=\"hugo-implementation\">Hugo Implementation\u003C/h3>\n\u003Cp>Advanced anchor link processing for Hugo static sites:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-go\"><!-- layouts/partials/table-of-contents.html -->\n{{ \u003Cspan class=\"hljs-keyword\">if\u003C/span> .Params.toc }}\n<div class=\u003Cspan class=\"hljs-string\">"table-of-contents"\u003C/span>>\n    <h3>{{ .Site.Params.tocTitle | \u003Cspan class=\"hljs-keyword\">default\u003C/span> \u003Cspan class=\"hljs-string\">"Table of Contents"\u003C/span> }}</h3>\n    <nav class=\u003Cspan class=\"hljs-string\">"toc-nav"\u003C/span>>\n        {{ .TableOfContents }}\n    </nav>\n</div>\n{{ end }}\n\n<!-- layouts/partials/heading-anchors.html -->\n{{ $content := .Content }}\n{{ $pattern := \u003Cspan class=\"hljs-string\">"<h([1-6])([^>]*)>([^<]+)</h[1-6]>"\u003C/span> }}\n\n{{ $content = $content | replaceRE $pattern (printf \u003Cspan class=\"hljs-string\">"<h$1$2 id=\\"%s\\">$3<a href=\\"#%s\\" class=\\"heading-anchor\\" aria-label=\\"Link to $3\\"><span aria-hidden=\\"true\\">#</span></a></h$1>"\u003C/span> .Page.File.TranslationBaseName .Page.File.TranslationBaseName) }}\n\n{{ \u003Cspan class=\"hljs-keyword\">return\u003C/span> $content | safeHTML }}\n\u003C/code>\u003C/pre>\u003Cp>Hugo configuration for enhanced anchor processing:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-yaml\">\u003Cspan class=\"hljs-comment\"># config.yml - Hugo anchor link configuration\u003C/span>\n\u003Cspan class=\"hljs-attr\">markup:\u003C/span>\n  \u003Cspan class=\"hljs-attr\">goldmark:\u003C/span>\n    \u003Cspan class=\"hljs-attr\">renderer:\u003C/span>\n      \u003Cspan class=\"hljs-attr\">unsafe:\u003C/span> \u003Cspan class=\"hljs-literal\">true\u003C/span>\n    \u003Cspan class=\"hljs-attr\">parser:\u003C/span>\n      \u003Cspan class=\"hljs-attr\">autoHeadingID:\u003C/span> \u003Cspan class=\"hljs-literal\">true\u003C/span>\n      \u003Cspan class=\"hljs-attr\">autoHeadingIDType:\u003C/span> \u003Cspan class=\"hljs-string\">github\u003C/span>\n    \u003Cspan class=\"hljs-attr\">extensions:\u003C/span>\n      \u003Cspan class=\"hljs-attr\">linkify:\u003C/span> \u003Cspan class=\"hljs-literal\">true\u003C/span>\n      \u003Cspan class=\"hljs-attr\">strikethrough:\u003C/span> \u003Cspan class=\"hljs-literal\">true\u003C/span>\n      \u003Cspan class=\"hljs-attr\">table:\u003C/span> \u003Cspan class=\"hljs-literal\">true\u003C/span>\n      \u003Cspan class=\"hljs-attr\">taskList:\u003C/span> \u003Cspan class=\"hljs-literal\">true\u003C/span>\n  \u003Cspan class=\"hljs-attr\">tableOfContents:\u003C/span>\n    \u003Cspan class=\"hljs-attr\">startLevel:\u003C/span> \u003Cspan class=\"hljs-number\">2\u003C/span>\n    \u003Cspan class=\"hljs-attr\">endLevel:\u003C/span> \u003Cspan class=\"hljs-number\">4\u003C/span>\n    \u003Cspan class=\"hljs-attr\">ordered:\u003C/span> \u003Cspan class=\"hljs-literal\">false\u003C/span>\n\n\u003Cspan class=\"hljs-attr\">params:\u003C/span>\n  \u003Cspan class=\"hljs-attr\">tocTitle:\u003C/span> \u003Cspan class=\"hljs-string\">"Table of Contents"\u003C/span>\n  \u003Cspan class=\"hljs-attr\">enableSmoothScroll:\u003C/span> \u003Cspan class=\"hljs-literal\">true\u003C/span>\n  \u003Cspan class=\"hljs-attr\">headingAnchorType:\u003C/span> \u003Cspan class=\"hljs-string\">"link"\u003C/span> \u003Cspan class=\"hljs-comment\"># or "hash"\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch3 id=\"gitbook-integration\">GitBook Integration\u003C/h3>\n\u003Cp>Custom anchor link plugin for GitBook documentation:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-javascript\">\u003Cspan class=\"hljs-comment\">// gitbook-anchor-plugin.js\u003C/span>\n\u003Cspan class=\"hljs-variable language_\">module\u003C/span>.\u003Cspan class=\"hljs-property\">exports\u003C/span> = {\n    \u003Cspan class=\"hljs-attr\">hooks\u003C/span>: {\n        \u003Cspan class=\"hljs-string\">"page:before"\u003C/span>: \u003Cspan class=\"hljs-keyword\">function\u003C/span>(\u003Cspan class=\"hljs-params\">page\u003C/span>) {\n            \u003Cspan class=\"hljs-comment\">// Process content to add custom anchor handling\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">let\u003C/span> content = page.\u003Cspan class=\"hljs-property\">content\u003C/span>;\n            \n            \u003Cspan class=\"hljs-comment\">// Add heading IDs and anchor links\u003C/span>\n            content = content.\u003Cspan class=\"hljs-title function_\">replace\u003C/span>(\u003Cspan class=\"hljs-regexp\">/^(#{1,6})\\s+(.+)$/gm\u003C/span>, \u003Cspan class=\"hljs-keyword\">function\u003C/span>(\u003Cspan class=\"hljs-params\">match, hashes, title\u003C/span>) {\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> level = hashes.\u003Cspan class=\"hljs-property\">length\u003C/span>;\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> id = title.\u003Cspan class=\"hljs-title function_\">toLowerCase\u003C/span>()\n                    .\u003Cspan class=\"hljs-title function_\">replace\u003C/span>(\u003Cspan class=\"hljs-regexp\">/[^\\w\\s-]/g\u003C/span>, \u003Cspan class=\"hljs-string\">''\u003C/span>)\n                    .\u003Cspan class=\"hljs-title function_\">replace\u003C/span>(\u003Cspan class=\"hljs-regexp\">/\\s+/g\u003C/span>, \u003Cspan class=\"hljs-string\">'-'\u003C/span>)\n                    .\u003Cspan class=\"hljs-title function_\">replace\u003C/span>(\u003Cspan class=\"hljs-regexp\">/-+/g\u003C/span>, \u003Cspan class=\"hljs-string\">'-'\u003C/span>)\n                    .\u003Cspan class=\"hljs-title function_\">replace\u003C/span>(\u003Cspan class=\"hljs-regexp\">/^-|-$/g\u003C/span>, \u003Cspan class=\"hljs-string\">''\u003C/span>);\n                \n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">`\u003Cspan class=\"hljs-subst\">${hashes}\u003C/span> \u003Cspan class=\"hljs-subst\">${title}\u003C/span> {#\u003Cspan class=\"hljs-subst\">${id}\u003C/span>}\n                \n<a href="#\u003Cspan class=\"hljs-subst\">${id}\u003C/span>" class="heading-anchor" aria-label="Link to \u003Cspan class=\"hljs-subst\">${title}\u003C/span>">🔗</a>`\u003C/span>;\n            });\n            \n            page.\u003Cspan class=\"hljs-property\">content\u003C/span> = content;\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> page;\n        },\n        \n        \u003Cspan class=\"hljs-string\">"page:after"\u003C/span>: \u003Cspan class=\"hljs-keyword\">function\u003C/span>(\u003Cspan class=\"hljs-params\">page\u003C/span>) {\n            \u003Cspan class=\"hljs-comment\">// Add navigation enhancement script\u003C/span>\n            page.\u003Cspan class=\"hljs-property\">content\u003C/span> += \u003Cspan class=\"hljs-string\">`\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n    // Auto-generate table of contents\n    const headings = document.querySelectorAll('h1, h2, h3, h4, h5, h6');\n    if (headings.length > 2) {\n        const toc = generateTableOfContents(headings);\n        const firstHeading = headings[0];\n        if (firstHeading) {\n            firstHeading.parentNode.insertBefore(toc, firstHeading);\n        }\n    }\n    \n    function generateTableOfContents(headings) {\n        const tocContainer = document.createElement('div');\n        tocContainer.className = 'table-of-contents';\n        tocContainer.innerHTML = '<h3>Table of Contents</h3><ul class="toc-list"></ul>';\n        \n        const tocList = tocContainer.querySelector('.toc-list');\n        \n        headings.forEach(heading => {\n            if (heading.id) {\n                const listItem = document.createElement('li');\n                const link = document.createElement('a');\n                link.href = '#' + heading.id;\n                link.textContent = heading.textContent.replace('🔗', '').trim();\n                link.className = 'toc-link toc-level-' + heading.tagName.charAt(1);\n                \n                listItem.appendChild(link);\n                tocList.appendChild(listItem);\n            }\n        });\n        \n        return tocContainer;\n    }\n});\n</script>`\u003C/span>;\n            \n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> page;\n        }\n    }\n};\n\u003C/code>\u003C/pre>\u003Ch2 id=\"advanced-cross-document-navigation\">Advanced Cross-Document Navigation\u003C/h2>\n\u003Ch3 id=\"multi-document-linking-strategies\">Multi-Document Linking Strategies\u003C/h3>\n\u003Cp>Creating comprehensive navigation across multiple Markdown documents:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">\u003Cspan class=\"hljs-section\"># Cross-Document Navigation Patterns\u003C/span>\n\n\u003Cspan class=\"hljs-section\">## Internal Document Structure\u003C/span>\n\n\u003Cspan class=\"hljs-section\">### Standard Navigation Links\u003C/span>\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> [\u003Cspan class=\"hljs-string\">Previous Section\u003C/span>](\u003Cspan class=\"hljs-link\">./setup.md#installation\u003C/span>)\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> [\u003Cspan class=\"hljs-string\">Next Section\u003C/span>](\u003Cspan class=\"hljs-link\">./configuration.md#basic-setup\u003C/span>)\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> [\u003Cspan class=\"hljs-string\">Related Topic\u003C/span>](\u003Cspan class=\"hljs-link\">../advanced/performance.md#optimization\u003C/span>)\n\n\u003Cspan class=\"hljs-section\">### Breadcrumb Navigation\u003C/span>\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"breadcrumb-nav"\u003C/span>>\u003C/span>\u003C/span>\n\u003Cspan class=\"hljs-code\">    <ul>\n        <li><a href="../index.md">Documentation Home</a></li>\n        <li><a href="./index.md">User Guide</a></li>\n        <li><a href="#getting-started">Getting Started</a></li>\n    </ul>\n</div>\n\u003C/span>\n\u003Cspan class=\"hljs-section\">## Cross-Reference Patterns\u003C/span>\n\n\u003Cspan class=\"hljs-section\">### API Documentation Cross-References\u003C/span>\nFor authentication details, see [\u003Cspan class=\"hljs-string\">Authentication Guide\u003C/span>](\u003Cspan class=\"hljs-link\">../api/auth.md#oauth-flow\u003C/span>).\n\nThe complete endpoint list is available in the [\u003Cspan class=\"hljs-string\">API Reference\u003C/span>](\u003Cspan class=\"hljs-link\">../api/endpoints.md#user-management\u003C/span>).\n\n\u003Cspan class=\"hljs-section\">### Tutorial Progression\u003C/span>\nThis builds on concepts from:\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> [\u003Cspan class=\"hljs-string\">Basic Setup\u003C/span>](\u003Cspan class=\"hljs-link\">./setup.md#initial-configuration\u003C/span>)\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> [\u003Cspan class=\"hljs-string\">User Management\u003C/span>](\u003Cspan class=\"hljs-link\">./users.md#creating-users\u003C/span>)\n\nNext, you'll learn about:\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> [\u003Cspan class=\"hljs-string\">Advanced Configuration\u003C/span>](\u003Cspan class=\"hljs-link\">./advanced-config.md\u003C/span>)\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> [\u003Cspan class=\"hljs-string\">Troubleshooting Common Issues\u003C/span>](\u003Cspan class=\"hljs-link\">./troubleshooting.md#common-problems\u003C/span>)\n\n\u003Cspan class=\"hljs-section\">### Code Example References\u003C/span>\n\u003Cspan class=\"hljs-code\">```javascript\n// See full implementation in examples/auth.js#L45-L67\nfunction authenticateUser(credentials) {\n    // Simplified version - see link above for complete code\n    return validateCredentials(credentials);\n}\u003C/span>\n\u003C/code>\u003C/pre>\u003Cp>Reference: \u003Ca href=\"../examples/auth.md#full-implementation\">Complete Authentication Example\u003C/a>\u003C/p>\n\u003Ch2 id=\"navigation-helpers\">Navigation Helpers\u003C/h2>\n\u003Ch3 id=\"section-quick-links\">Section Quick Links\u003C/h3>\n\u003Cdiv class=\"quick-nav\">\n    \u003Ch4>Quick Navigation\u003C/h4>\n    \u003Cul>\n        \u003Cli>\u003Ca href=\"#installation\">Installation\u003C/a>\u003C/li>\n        \u003Cli>\u003Ca href=\"#configuration\">Configuration\u003C/a>\u003C/li>\n        \u003Cli>\u003Ca href=\"#usage-examples\">Usage Examples\u003C/a>\u003C/li>\n        \u003Cli>\u003Ca href=\"#troubleshooting\">Troubleshooting\u003C/a>\u003C/li>\n    \u003C/ul>\n\u003C/div>\n\n\u003Ch3 id=\"related-articles\">Related Articles\u003C/h3>\n\u003Cdiv class=\"related-articles\">\n    \u003Ch4>Related Articles\u003C/h4>\n    \u003Cul>\n        \u003Cli>\u003Ca href=\"./advanced-features.md\">Advanced Features Guide\u003C/a>\u003C/li>\n        \u003Cli>\u003Ca href=\"./best-practices.md\">Best Practices\u003C/a>\u003C/li>\n        \u003Cli>\u003Ca href=\"./faq.md\">Frequently Asked Questions\u003C/a>\u003C/li>\n    \u003C/ul>\n\u003C/div>\n\n\u003Ch3 id=\"external-reference-links\">External Reference Links\u003C/h3>\n\u003Cul>\n\u003Cli>\u003Ca href=\"https://spec.commonmark.org/\">Markdown Specification\u003C/a>\u003C/li>\n\u003Cli>\u003Ca href=\"https://github.github.com/gfm/\">GitHub Flavored Markdown\u003C/a>\u003C/li>\n\u003Cli>\u003Ca href=\"https://www.w3.org/WAI/WCAG21/quickref/\">Accessibility Guidelines\u003C/a>\u003C/li>\n\u003C/ul>\n\u003Cpre>\u003Ccode>\n### Link Validation and Management\n\nAutomated system for validating and managing anchor links:\n\n```javascript\n// link-validator.js - Comprehensive anchor link validation\nclass AnchorLinkValidator {\n    constructor(options = {}) {\n        this.options = {\n            checkExternalLinks: false,\n            validateFragments: true,\n            reportBrokenLinks: true,\n            autoFixLinks: false,\n            ignorePrefixes: ['http', 'https', 'mailto', 'tel'],\n            ...options\n        };\n        \n        this.linkReport = {\n            total: 0,\n            valid: 0,\n            broken: 0,\n            missing: 0,\n            external: 0,\n            details: []\n        };\n        \n        this.anchorMap = new Map();\n    }\n    \n    validateDocument(content, baseURL = '') {\n        // Build map of available anchors\n        this.buildAnchorMap(content);\n        \n        // Find all links\n        const links = this.extractLinks(content);\n        \n        // Validate each link\n        links.forEach(link => {\n            this.validateLink(link, baseURL);\n        });\n        \n        return this.generateReport();\n    }\n    \n    buildAnchorMap(content) {\n        this.anchorMap.clear();\n        \n        // Find heading anchors\n        const headingRegex = /^(#{1,6})\\s+(.+?)(?:\\s*\\{#([^}]+)\\})?$/gm;\n        let match;\n        \n        while ((match = headingRegex.exec(content)) !== null) {\n            const level = match[1].length;\n            const text = match[2].trim();\n            const customId = match[3];\n            \n            // Generate automatic ID if no custom ID\n            const id = customId || this.generateHeadingId(text);\n            \n            this.anchorMap.set(id, {\n                type: 'heading',\n                level: level,\n                text: text,\n                line: this.getLineNumber(content, match.index)\n            });\n        }\n        \n        // Find custom HTML anchors\n        const anchorRegex = /<a[^>]+id=["']([^"']+)["'][^>]*>/g;\n        while ((match = anchorRegex.exec(content)) !== null) {\n            const id = match[1];\n            \n            this.anchorMap.set(id, {\n                type: 'html_anchor',\n                line: this.getLineNumber(content, match.index)\n            });\n        }\n        \n        // Find element IDs\n        const idRegex = /<[^>]+id=["']([^"']+)["'][^>]*>/g;\n        while ((match = idRegex.exec(content)) !== null) {\n            const id = match[1];\n            \n            if (!this.anchorMap.has(id)) {\n                this.anchorMap.set(id, {\n                    type: 'element_id',\n                    line: this.getLineNumber(content, match.index)\n                });\n            }\n        }\n    }\n    \n    extractLinks(content) {\n        const links = [];\n        \n        // Markdown links: [text](url)\n        const markdownLinkRegex = /\\[([^\\]]*)\\]\\(([^)]+)\\)/g;\n        let match;\n        \n        while ((match = markdownLinkRegex.exec(content)) !== null) {\n            const text = match[1];\n            const url = match[2].trim();\n            const line = this.getLineNumber(content, match.index);\n            \n            links.push({\n                type: 'markdown',\n                text: text,\n                url: url,\n                line: line,\n                raw: match[0]\n            });\n        }\n        \n        // HTML links: <a href="url">text</a>\n        const htmlLinkRegex = /<a[^>]+href=["']([^"']+)["'][^>]*>(.*?)<\\/a>/gi;\n        while ((match = htmlLinkRegex.exec(content)) !== null) {\n            const url = match[1].trim();\n            const text = match[2].replace(/<[^>]*>/g, '').trim();\n            const line = this.getLineNumber(content, match.index);\n            \n            links.push({\n                type: 'html',\n                text: text,\n                url: url,\n                line: line,\n                raw: match[0]\n            });\n        }\n        \n        return links;\n    }\n    \n    validateLink(link, baseURL) {\n        this.linkReport.total++;\n        \n        const url = link.url;\n        const isExternal = this.isExternalLink(url);\n        const isFragment = url.startsWith('#');\n        const isRelative = !isExternal && !isFragment && !url.startsWith('/');\n        \n        let validationResult = {\n            link: link,\n            isValid: false,\n            isExternal: isExternal,\n            isFragment: isFragment,\n            isRelative: isRelative,\n            error: null\n        };\n        \n        try {\n            if (isFragment) {\n                // Validate fragment identifier\n                validationResult = this.validateFragment(link);\n            } else if (isExternal && this.options.checkExternalLinks) {\n                // Validate external link (would require async handling)\n                validationResult.isValid = true; // Placeholder\n                this.linkReport.external++;\n            } else {\n                // Local file link validation would go here\n                validationResult.isValid = true; // Placeholder\n            }\n        } catch (error) {\n            validationResult.error = error.message;\n        }\n        \n        if (validationResult.isValid) {\n            this.linkReport.valid++;\n        } else {\n            this.linkReport.broken++;\n        }\n        \n        this.linkReport.details.push(validationResult);\n    }\n    \n    validateFragment(link) {\n        const fragment = link.url.substring(1); // Remove #\n        const exists = this.anchorMap.has(fragment);\n        \n        return {\n            link: link,\n            isValid: exists,\n            isFragment: true,\n            target: this.anchorMap.get(fragment) || null,\n            error: exists ? null : `Fragment identifier "${fragment}" not found`\n        };\n    }\n    \n    isExternalLink(url) {\n        return this.options.ignorePrefixes.some(prefix => url.startsWith(prefix + ':'));\n    }\n    \n    generateHeadingId(text) {\n        return text\n            .toLowerCase()\n            .trim()\n            .replace(/[^\\w\\s-]/g, '')\n            .replace(/\\s+/g, '-')\n            .replace(/-+/g, '-')\n            .replace(/^-|-$/g, '');\n    }\n    \n    getLineNumber(content, position) {\n        return content.substring(0, position).split('\\n').length;\n    }\n    \n    generateReport() {\n        const report = {\n            ...this.linkReport,\n            summary: this.generateSummary(),\n            recommendations: this.generateRecommendations()\n        };\n        \n        if (this.options.reportBrokenLinks && this.linkReport.broken > 0) {\n            report.brokenLinks = this.linkReport.details.filter(link => !link.isValid);\n        }\n        \n        return report;\n    }\n    \n    generateSummary() {\n        const { total, valid, broken, external } = this.linkReport;\n        \n        return {\n            totalLinks: total,\n            validLinks: valid,\n            brokenLinks: broken,\n            externalLinks: external,\n            validationRate: total > 0 ? (valid / total * 100).toFixed(1) + '%' : '0%',\n            status: broken === 0 ? 'PASS' : 'FAIL'\n        };\n    }\n    \n    generateRecommendations() {\n        const recommendations = [];\n        \n        if (this.linkReport.broken > 0) {\n            recommendations.push({\n                type: 'error',\n                message: `Found ${this.linkReport.broken} broken links that need to be fixed`\n            });\n        }\n        \n        const duplicateAnchors = this.findDuplicateAnchors();\n        if (duplicateAnchors.length > 0) {\n            recommendations.push({\n                type: 'warning',\n                message: `Found duplicate anchor IDs: ${duplicateAnchors.join(', ')}`\n            });\n        }\n        \n        const orphanAnchors = this.findOrphanAnchors();\n        if (orphanAnchors.length > 0) {\n            recommendations.push({\n                type: 'info',\n                message: `Found ${orphanAnchors.length} anchors that are not linked to`\n            });\n        }\n        \n        return recommendations;\n    }\n    \n    findDuplicateAnchors() {\n        const anchorCounts = new Map();\n        const duplicates = [];\n        \n        this.anchorMap.forEach((data, id) => {\n            anchorCounts.set(id, (anchorCounts.get(id) || 0) + 1);\n        });\n        \n        anchorCounts.forEach((count, id) => {\n            if (count > 1) {\n                duplicates.push(id);\n            }\n        });\n        \n        return duplicates;\n    }\n    \n    findOrphanAnchors() {\n        const linkedAnchors = new Set();\n        const orphans = [];\n        \n        // Collect all referenced fragments\n        this.linkReport.details.forEach(detail => {\n            if (detail.isFragment && detail.link.url.startsWith('#')) {\n                linkedAnchors.add(detail.link.url.substring(1));\n            }\n        });\n        \n        // Find anchors that aren't referenced\n        this.anchorMap.forEach((data, id) => {\n            if (!linkedAnchors.has(id)) {\n                orphans.push(id);\n            }\n        });\n        \n        return orphans;\n    }\n    \n    exportReport(format = 'json') {\n        const report = this.generateReport();\n        \n        switch (format) {\n            case 'json':\n                return JSON.stringify(report, null, 2);\n            case 'markdown':\n                return this.generateMarkdownReport(report);\n            case 'csv':\n                return this.generateCSVReport(report);\n            default:\n                return report;\n        }\n    }\n    \n    generateMarkdownReport(report) {\n        let markdown = `# Link Validation Report\n\n## Summary\n- **Total Links**: ${report.summary.totalLinks}\n- **Valid Links**: ${report.summary.validLinks}\n- **Broken Links**: ${report.summary.brokenLinks}\n- **External Links**: ${report.summary.externalLinks}\n- **Validation Rate**: ${report.summary.validationRate}\n- **Status**: ${report.summary.status}\n\n`;\n\n        if (report.brokenLinks && report.brokenLinks.length > 0) {\n            markdown += `## Broken Links\n\n| Line | Type | Text | URL | Error |\n|------|------|------|-----|-------|\n`;\n            report.brokenLinks.forEach(link => {\n                markdown += `| ${link.link.line} | ${link.link.type} | ${link.link.text} | ${link.link.url} | ${link.error || 'N/A'} |\n`;\n            });\n        }\n        \n        if (report.recommendations.length > 0) {\n            markdown += `\n## Recommendations\n\n`;\n            report.recommendations.forEach(rec => {\n                const icon = rec.type === 'error' ? '❌' : rec.type === 'warning' ? '⚠️' : 'ℹ️';\n                markdown += `${icon} **${rec.type.toUpperCase()}**: ${rec.message}\n\n`;\n            });\n        }\n        \n        return markdown;\n    }\n}\n\n// Usage example\nconst validator = new AnchorLinkValidator({\n    validateFragments: true,\n    reportBrokenLinks: true\n});\n\n// Validate a Markdown document\nconst markdownContent = `\n# Main Title\n\n## Section 1 {#section-1}\nContent with [link to section 2](#section-2).\n\n## Section 2\nContent with [broken link](#nonexistent).\n`;\n\nconst validationReport = validator.validateDocument(markdownContent);\nconsole.log(validationReport.summary);\n\u003C/code>\u003C/pre>\u003Ch2 id=\"integration-with-modern-documentation-systems\">Integration with Modern Documentation Systems\u003C/h2>\n\u003Cp>Anchor link optimization integrates seamlessly with comprehensive documentation platforms. When combined with \u003Ca href=\"/blog/markdown-automation-workflows-complete-guide\">automation workflows and content validation\u003C/a>, anchor link systems enable systematic link checking, automatic table of contents generation, and consistent navigation patterns across large documentation projects.\u003C/p>\n\u003Cp>For enhanced content organization, anchor link systems work effectively with \u003Ca href=\"/blog/markdown-table-performance-optimization-large-datasets-guide\">advanced table systems and data presentation\u003C/a> to create comprehensive navigation within complex data tables, enabling users to link directly to specific data sections and maintain context while exploring large datasets.\u003C/p>\n\u003Cp>When developing extensive documentation architectures, anchor link systems complement \u003Ca href=\"/blog/markdown-progressive-web-app-documentation-complete-guide\">Progressive Web App documentation platforms\u003C/a> by providing offline navigation capabilities, cached anchor link resolution, and enhanced user experience for technical documentation that functions effectively without network connectivity.\u003C/p>\n\u003Ch2 id=\"conclusion\">Conclusion\u003C/h2>\n\u003Cp>Markdown anchor links and fragment identifiers transform static documentation into navigable, interconnected content systems that enhance user experience, improve accessibility, and enable sophisticated cross-referencing capabilities. By implementing automatic heading ID generation, comprehensive table of contents systems, and robust link validation processes, technical teams can create documentation that serves both human readers and automated systems effectively.\u003C/p>\n\u003Cp>The key to successful anchor link implementation lies in establishing consistent ID generation patterns, implementing comprehensive navigation enhancements, and maintaining link integrity through systematic validation processes. Whether you're creating technical documentation, educational content, or complex reference materials, the anchor link techniques covered in this guide provide the foundation for building navigable, accessible content that scales with your documentation needs.\u003C/p>\n\u003Cp>Remember to test anchor link functionality across different platforms and devices, implement accessibility best practices for navigation elements, and establish clear conventions for link naming and organization within your team. With proper implementation of anchor link systems, your Markdown documentation can achieve new levels of usability and professional navigation that enhances content discovery and user engagement.\u003C/p>\n",[15,19,22,25,28,31,34,37],{"id":16,"text":17,"level":18},"why-master-anchor-links-and-fragment-identifiers","Why Master Anchor Links and Fragment Identifiers?",2,{"id":20,"text":21,"level":18},"foundation-anchor-link-principles","Foundation Anchor Link Principles",{"id":23,"text":24,"level":18},"advanced-navigation-implementation","Advanced Navigation Implementation",{"id":26,"text":27,"level":18},"cross-platform-implementation-strategies","Cross-Platform Implementation Strategies",{"id":29,"text":30,"level":18},"advanced-cross-document-navigation","Advanced Cross-Document Navigation",{"id":32,"text":33,"level":18},"navigation-helpers","Navigation Helpers",{"id":35,"text":36,"level":18},"integration-with-modern-documentation-systems","Integration with Modern Documentation Systems",{"id":38,"text":39,"level":18},"conclusion","Conclusion",[],[42,50,58],{"slug":43,"title":44,"description":45,"excerpt":46,"date":47,"category":9,"author":10,"keywords":48,"readingMinutes":49},"markdown-anchor-links-navigation-complete-guide","Markdown Anchor Links and Navigation: Complete Guide for Document Navigation and Cross-Referencing","Master anchor links, internal navigation, and cross-referencing in Markdown. Learn to create navigable documents, link to specific sections, and build comprehensive documentation with seamless navigation.","Anchor links and internal navigation transform lengthy Markdown documents into navigable, interconnected resources that readers can efficiently explore and reference. Modern Markdown processors…","2025-09-02","markdown anchor links, markdown navigation, markdown cross reference, internal links markdown, markdown table of contents, document navigation, markdown bookmarks, heading links",11,{"slug":51,"title":52,"description":53,"excerpt":54,"date":55,"category":9,"author":10,"keywords":56,"readingMinutes":57},"markdown-anchor-links-internal-navigation-guide","Markdown Anchor Links: Complete Guide to Internal Navigation and Cross-References","Learn how to create anchor links in Markdown for internal navigation, cross-references, and smooth scrolling. Master heading anchors, custom anchors, and platform-specific implementations.","Anchor links in Markdown allow you to create internal navigation within your documents, enabling readers to jump directly to specific sections. This is especially useful for long documents, table…","2025-12-03","markdown anchor links, markdown internal links, markdown navigation, heading anchors, markdown cross references, markdown table of contents, internal navigation markdown",4,{"slug":59,"title":60,"description":61,"excerpt":62,"date":63,"category":9,"author":10,"keywords":64,"readingMinutes":65},"markdown-anchor-links-scrollspy-navigation-complete-guide","Markdown Anchor Links and ScrollSpy Navigation: Complete Guide for Dynamic Content Navigation and Interactive Document Structure","Master Markdown anchor links and ScrollSpy navigation for creating dynamic, interactive documentation with automatic table of contents, smooth scrolling, and real-time section highlighting. Learn implementation strategies and best practices.","Advanced Markdown anchor links and ScrollSpy navigation enable sophisticated interactive documentation that automatically tracks user scroll position, highlights active sections, and provides…","2025-10-20","markdown anchor links, scrollspy navigation, markdown table of contents, dynamic navigation, anchor link generation, markdown section navigation, interactive documentation, smooth scrolling markdown",30,1792184946310]