[{"data":1,"prerenderedAt":72},["Reactive",2],{"blog-post-markdown-page-anchors-and-smooth-scrolling-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":46,"related":47},"markdown-page-anchors-and-smooth-scrolling-guide","Markdown Page Anchors and Smooth Scrolling: Complete Guide for Enhanced Document Navigation","Master Markdown anchor links, smooth scrolling, and page navigation techniques. Learn to create clickable table of contents, bookmarkable sections, and enhanced user experience for long documents.","Advanced Markdown anchor links and smooth scrolling techniques enable sophisticated document navigation that enhances user experience and content accessibility. By implementing proper anchor link…","2025-12-25","Tutorial","Matthew Rathbone","markdown anchors, markdown page navigation, smooth scrolling markdown, markdown bookmark links, document navigation markdown, markdown table of contents links, anchor tags markdown",13,"\u003Cp>Advanced Markdown anchor links and smooth scrolling techniques enable sophisticated document navigation that enhances user experience and content accessibility. By implementing proper anchor link strategies, smooth scrolling behaviors, and intelligent page navigation systems, technical writers can create comprehensive documents that are easy to navigate, bookmark, and share while maintaining professional appearance and optimal performance across different platforms and devices.\u003C/p>\n\u003Ch2 id=\"why-master-page-anchors-and-smooth-scrolling\">Why Master Page Anchors and Smooth Scrolling?\u003C/h2>\n\u003Cp>Professional page navigation provides essential benefits for long-form content:\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>Enhanced User Experience\u003C/strong>: Enable quick navigation to specific sections without scrolling\u003C/li>\n\u003Cli>\u003Cstrong>Bookmarkable Content\u003C/strong>: Create shareable links to specific document sections\u003C/li>\n\u003Cli>\u003Cstrong>Professional Appearance\u003C/strong>: Provide smooth, polished navigation interactions\u003C/li>\n\u003Cli>\u003Cstrong>Accessibility\u003C/strong>: Improve document accessibility for screen readers and keyboard navigation\u003C/li>\n\u003Cli>\u003Cstrong>SEO Benefits\u003C/strong>: Help search engines understand document structure and content hierarchy\u003C/li>\n\u003C/ul>\n\u003Ch2 id=\"foundation-anchor-link-techniques\">Foundation Anchor Link Techniques\u003C/h2>\n\u003Ch3 id=\"basic-heading-anchors\">Basic Heading Anchors\u003C/h3>\n\u003Cp>Most Markdown processors automatically generate anchor IDs for headings:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">\u003Cspan class=\"hljs-section\"># Getting Started {#getting-started}\u003C/span>\n\n\u003Cspan class=\"hljs-section\">## Installation Process {#installation}\u003C/span>\n\n\u003Cspan class=\"hljs-section\">### System Requirements {#requirements}\u003C/span>\n\n\u003Cspan class=\"hljs-section\">#### Minimum Specifications {#min-specs}\u003C/span>\n\u003C/code>\u003C/pre>\u003Cp>Alternative automatic ID generation:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">\u003Cspan class=\"hljs-section\"># Getting Started\u003C/span>\n\nThis heading automatically gets id="getting-started"\n\n\u003Cspan class=\"hljs-section\">## Installation Process  \u003C/span>\n\nThis heading gets id="installation-process"\n\n\u003Cspan class=\"hljs-section\">### Advanced Configuration\u003C/span>\n\nThis becomes id="advanced-configuration"\n\u003C/code>\u003C/pre>\u003Ch3 id=\"manual-anchor-creation\">Manual Anchor Creation\u003C/h3>\n\u003Cp>For precise control over anchor positioning:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-html\">\u003Cspan class=\"hljs-comment\"><!-- Manual anchor placement -->\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">a\u003C/span> \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"custom-section"\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">a\u003C/span>>\u003C/span>\n## Custom Section Title\n\n\u003Cspan class=\"hljs-comment\"><!-- Alternative anchor syntax -->\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\u003C/span> \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"precise-location"\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">span\u003C/span>>\u003C/span>\nContent that needs a specific anchor point.\n\n\u003Cspan class=\"hljs-comment\"><!-- Invisible anchor markers -->\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"chapter-start"\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"anchor-point"\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch3 id=\"linking-to-anchors\">Linking to Anchors\u003C/h3>\n\u003Cp>Create navigation links to specific sections:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">\u003Cspan class=\"hljs-section\"># Document Navigation\u003C/span>\n\nJump to specific sections:\n\u003Cspan class=\"hljs-bullet\">-\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\">Installation\u003C/span>](\u003Cspan class=\"hljs-link\">#installation\u003C/span>)  \n\u003Cspan class=\"hljs-bullet\">-\u003C/span> [\u003Cspan class=\"hljs-string\">Configuration\u003C/span>](\u003Cspan class=\"hljs-link\">#configuration\u003C/span>)\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> [\u003Cspan class=\"hljs-string\">Advanced Topics\u003C/span>](\u003Cspan class=\"hljs-link\">#advanced-topics\u003C/span>)\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> [\u003Cspan class=\"hljs-string\">Troubleshooting\u003C/span>](\u003Cspan class=\"hljs-link\">#troubleshooting\u003C/span>)\n\n\u003Cspan class=\"hljs-section\">## Getting Started {#getting-started}\u003C/span>\n\nYour getting started content here...\n\n\u003Cspan class=\"hljs-section\">## Installation {#installation}\u003C/span>\n\nInstallation instructions here...\n\n\u003Cspan class=\"hljs-section\">## Configuration {#configuration}\u003C/span>\n\nConfiguration details here...\n\u003C/code>\u003C/pre>\u003Ch2 id=\"advanced-smooth-scrolling-implementation\">Advanced Smooth Scrolling Implementation\u003C/h2>\n\u003Ch3 id=\"css-smooth-scrolling\">CSS Smooth Scrolling\u003C/h3>\n\u003Cp>Implement smooth scrolling with modern CSS:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-css\">\u003Cspan class=\"hljs-comment\">/* Enable smooth scrolling for the entire page */\u003C/span>\n\u003Cspan class=\"hljs-selector-tag\">html\u003C/span> {\n  scroll-behavior: smooth;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Enhanced smooth scrolling with timing control */\u003C/span>\n\u003Cspan class=\"hljs-selector-tag\">html\u003C/span> {\n  scroll-behavior: smooth;\n  \u003Cspan class=\"hljs-attribute\">scroll-padding-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-comment\">/* Smooth scrolling for specific containers */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.document-content\u003C/span> {\n  scroll-behavior: smooth;\n  \u003Cspan class=\"hljs-attribute\">overflow-y\u003C/span>: auto;\n  \u003Cspan class=\"hljs-attribute\">height\u003C/span>: \u003Cspan class=\"hljs-number\">100vh\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Custom anchor styling */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.anchor-link\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">color\u003C/span>: transparent;\n  \u003Cspan class=\"hljs-attribute\">text-decoration\u003C/span>: none;\n  \u003Cspan class=\"hljs-attribute\">position\u003C/span>: relative;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.anchor-link\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\">25px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">opacity\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">transition\u003C/span>: opacity \u003Cspan class=\"hljs-number\">0.3s\u003C/span> ease;\n  \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">0.8em\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.anchor-link\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:hover\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:before\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">opacity\u003C/span>: \u003Cspan class=\"hljs-number\">1\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Anchor target highlighting */\u003C/span>\n\u003Cspan class=\"hljs-selector-pseudo\">:target\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">animation\u003C/span>: highlight-section \u003Cspan class=\"hljs-number\">2s\u003C/span> ease-in-out;\n}\n\n\u003Cspan class=\"hljs-keyword\">@keyframes\u003C/span> highlight-section {\n  \u003Cspan class=\"hljs-number\">0%\u003C/span> { \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-number\">#fff3cd\u003C/span>; }\n  \u003Cspan class=\"hljs-number\">100%\u003C/span> { \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: transparent; }\n}\n\u003C/code>\u003C/pre>\u003Ch3 id=\"javascript-enhanced-navigation\">JavaScript Enhanced Navigation\u003C/h3>\n\u003Cp>Create sophisticated navigation controls:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-javascript\">\u003Cspan class=\"hljs-comment\">// markdown-navigation.js - Advanced page navigation system\u003C/span>\n\u003Cspan class=\"hljs-keyword\">class\u003C/span> \u003Cspan class=\"hljs-title class_\">MarkdownNavigation\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\">scrollOffset\u003C/span>: \u003Cspan class=\"hljs-number\">80\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">highlightDuration\u003C/span>: \u003Cspan class=\"hljs-number\">2000\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">generateTOC\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">trackScrollProgress\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n            ...options\n        };\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">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\">currentSection\u003C/span> = \u003Cspan class=\"hljs-literal\">null\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">scrollProgress\u003C/span> = \u003Cspan class=\"hljs-number\">0\u003C/span>;\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">init\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">init\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">collectHeadings\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_\">enableSmoothScrolling\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\">trackScrollProgress\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">setupScrollTracking\u003C/span>();\n        }\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">setupKeyboardNavigation\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-title function_\">collectHeadings\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> headingSelectors = \u003Cspan class=\"hljs-string\">'h1, h2, h3, h4, h5, h6'\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>(headingSelectors);\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-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> = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">generateHeadingId\u003C/span>(heading.\u003Cspan class=\"hljs-property\">textContent\u003C/span>, index);\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>: heading.\u003Cspan class=\"hljs-property\">id\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">text\u003C/span>: heading.\u003Cspan class=\"hljs-property\">textContent\u003C/span>.\u003Cspan class=\"hljs-title function_\">trim\u003C/span>(),\n                \u003Cspan class=\"hljs-attr\">level\u003C/span>: \u003Cspan class=\"hljs-built_in\">parseInt\u003C/span>(heading.\u003Cspan class=\"hljs-property\">tagName\u003C/span>.\u003Cspan class=\"hljs-title function_\">substring\u003C/span>(\u003Cspan class=\"hljs-number\">1\u003C/span>)),\n                \u003Cspan class=\"hljs-attr\">offset\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">getElementOffset\u003C/span>(heading)\n            };\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">generateHeadingId\u003C/span>(\u003Cspan class=\"hljs-params\">text, index\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Convert heading text to URL-friendly 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_\">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_\">trim\u003C/span>();\n            \n        \u003Cspan class=\"hljs-comment\">// Ensure uniqueness\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">getElementById\u003C/span>(id)) {\n            id = \u003Cspan class=\"hljs-string\">`\u003Cspan class=\"hljs-subst\">${id}\u003C/span>-\u003Cspan class=\"hljs-subst\">${index}\u003C/span>`\u003C/span>;\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> id;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">getElementOffset\u003C/span>(\u003Cspan class=\"hljs-params\">element\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> rect = element.\u003Cspan class=\"hljs-title function_\">getBoundingClientRect\u003C/span>();\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> rect.\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    \u003Cspan class=\"hljs-title function_\">generateTableOfContents\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">tocContainer\u003C/span> = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">createTOCContainer\u003C/span>();\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> tocList = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">createTOCList\u003C/span>();\n        \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\">const\u003C/span> tocItem = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">createTOCItem\u003C/span>(heading);\n            tocList.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(tocItem);\n        });\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">tocContainer\u003C/span>.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(tocList);\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">insertTOC\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">createTOCContainer\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> container = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n        container.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'markdown-toc'\u003C/span>;\n        container.\u003Cspan class=\"hljs-property\">innerHTML\u003C/span> = \u003Cspan class=\"hljs-string\">'<h3>Table of Contents</h3>'\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> container;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">createTOCList\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> list = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'ul'\u003C/span>);\n        list.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'toc-list'\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> list;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">createTOCItem\u003C/span>(\u003Cspan class=\"hljs-params\">heading\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> item = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'li'\u003C/span>);\n        item.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">`toc-item toc-level-\u003Cspan class=\"hljs-subst\">${heading.level}\u003C/span>`\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> link = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'a'\u003C/span>);\n        link.\u003Cspan class=\"hljs-property\">href\u003C/span> = \u003Cspan class=\"hljs-string\">`#\u003Cspan class=\"hljs-subst\">${heading.id}\u003C/span>`\u003C/span>;\n        link.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = heading.\u003Cspan class=\"hljs-property\">text\u003C/span>;\n        link.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'toc-link'\u003C/span>;\n        \n        \u003Cspan class=\"hljs-comment\">// Add click handler for smooth scrolling\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            e.\u003Cspan class=\"hljs-title function_\">preventDefault\u003C/span>();\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">scrollToSection\u003C/span>(heading.\u003Cspan class=\"hljs-property\">id\u003C/span>);\n        });\n        \n        item.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(link);\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> item;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">insertTOC\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Insert TOC after the first heading or at the beginning\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-string\">'h1, h2'\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>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">tocContainer\u003C/span>, firstHeading.\u003Cspan class=\"hljs-property\">nextSibling\u003C/span>);\n        } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> content = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'.content, main, article'\u003C/span>);\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (content) {\n                content.\u003Cspan class=\"hljs-title function_\">insertBefore\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">tocContainer\u003C/span>, content.\u003Cspan class=\"hljs-property\">firstChild\u003C/span>);\n            }\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">enableSmoothScrolling\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Add smooth scrolling to all anchor links\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'click'\u003C/span>, \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">e\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> link = e.\u003Cspan class=\"hljs-property\">target\u003C/span>.\u003Cspan class=\"hljs-title function_\">closest\u003C/span>(\u003Cspan class=\"hljs-string\">'a[href^="#"]'\u003C/span>);\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!link) \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n            \n            e.\u003Cspan class=\"hljs-title function_\">preventDefault\u003C/span>();\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> targetId = link.\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-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">scrollToSection\u003C/span>(targetId);\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">scrollToSection\u003C/span>(\u003Cspan class=\"hljs-params\">sectionId\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>(sectionId);\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!targetElement) \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> targetOffset = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">getElementOffset\u003C/span>(targetElement) - \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\">// Update URL without triggering scroll\u003C/span>\n        history.\u003Cspan class=\"hljs-title function_\">pushState\u003C/span>(\u003Cspan class=\"hljs-literal\">null\u003C/span>, \u003Cspan class=\"hljs-literal\">null\u003C/span>, \u003Cspan class=\"hljs-string\">`#\u003Cspan class=\"hljs-subst\">${sectionId}\u003C/span>`\u003C/span>);\n        \n        \u003Cspan class=\"hljs-comment\">// Smooth scroll to target\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-title function_\">scrollTo\u003C/span>({\n            \u003Cspan class=\"hljs-attr\">top\u003C/span>: targetOffset,\n            \u003Cspan class=\"hljs-attr\">behavior\u003C/span>: \u003Cspan class=\"hljs-string\">'smooth'\u003C/span>\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// Highlight target section\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">highlightSection\u003C/span>(targetElement);\n        \n        \u003Cspan class=\"hljs-comment\">// Update current section\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">updateCurrentSection\u003C/span>(sectionId);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">highlightSection\u003C/span>(\u003Cspan class=\"hljs-params\">element\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Remove existing highlights\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'.section-highlighted'\u003C/span>).\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">el\u003C/span> =>\u003C/span> {\n            el.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">remove\u003C/span>(\u003Cspan class=\"hljs-string\">'section-highlighted'\u003C/span>);\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// Add highlight to target\u003C/span>\n        element.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">add\u003C/span>(\u003Cspan class=\"hljs-string\">'section-highlighted'\u003C/span>);\n        \n        \u003Cspan class=\"hljs-comment\">// Remove highlight after duration\u003C/span>\n        \u003Cspan class=\"hljs-built_in\">setTimeout\u003C/span>(\u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n            element.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">remove\u003C/span>(\u003Cspan class=\"hljs-string\">'section-highlighted'\u003C/span>);\n        }, \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">highlightDuration\u003C/span>);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">setupScrollTracking\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> ticking = \u003Cspan class=\"hljs-literal\">false\u003C/span>;\n        \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-function\">() =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!ticking) {\n                \u003Cspan class=\"hljs-title function_\">requestAnimationFrame\u003C/span>(\u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n                    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">updateScrollProgress\u003C/span>();\n                    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">updateActiveSection\u003C/span>();\n                    ticking = \u003Cspan class=\"hljs-literal\">false\u003C/span>;\n                });\n                ticking = \u003Cspan class=\"hljs-literal\">true\u003C/span>;\n            }\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">updateScrollProgress\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> scrollTop = \u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-property\">pageYOffset\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> docHeight = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-property\">documentElement\u003C/span>.\u003Cspan class=\"hljs-property\">scrollHeight\u003C/span> - \u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-property\">innerHeight\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">scrollProgress\u003C/span> = \u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">min\u003C/span>(scrollTop / docHeight, \u003Cspan class=\"hljs-number\">1\u003C/span>);\n        \n        \u003Cspan class=\"hljs-comment\">// Update progress indicator if it exists\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> progressBar = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'.scroll-progress'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (progressBar) {\n            progressBar.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">width\u003C/span> = \u003Cspan class=\"hljs-string\">`\u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.scrollProgress * \u003Cspan class=\"hljs-number\">100\u003C/span>}\u003C/span>%`\u003C/span>;\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Dispatch custom event\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">dispatchEvent\u003C/span>(\u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">CustomEvent\u003C/span>(\u003Cspan class=\"hljs-string\">'scrollProgress'\u003C/span>, {\n            \u003Cspan class=\"hljs-attr\">detail\u003C/span>: { \u003Cspan class=\"hljs-attr\">progress\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">scrollProgress\u003C/span> }\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> scrollTop = \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        \u003Cspan class=\"hljs-keyword\">let\u003C/span> activeHeading = \u003Cspan class=\"hljs-literal\">null\u003C/span>;\n        \n        \u003Cspan class=\"hljs-comment\">// Find the current section\u003C/span>\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\">if\u003C/span> (scrollTop >= heading.\u003Cspan class=\"hljs-property\">offset\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 && activeHeading.\u003Cspan class=\"hljs-property\">id\u003C/span> !== \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentSection\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">updateCurrentSection\u003C/span>(activeHeading.\u003Cspan class=\"hljs-property\">id\u003C/span>);\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">updateCurrentSection\u003C/span>(\u003Cspan class=\"hljs-params\">sectionId\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentSection\u003C/span> = sectionId;\n        \n        \u003Cspan class=\"hljs-comment\">// Update TOC active states\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'.toc-link'\u003C/span>).\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-string\">'active'\u003C/span>);\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (link.\u003Cspan class=\"hljs-title function_\">getAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'href'\u003C/span>) === \u003Cspan class=\"hljs-string\">`#\u003Cspan class=\"hljs-subst\">${sectionId}\u003C/span>`\u003C/span>) {\n                link.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">add\u003C/span>(\u003Cspan class=\"hljs-string\">'active'\u003C/span>);\n            }\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// Dispatch custom event\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">dispatchEvent\u003C/span>(\u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">CustomEvent\u003C/span>(\u003Cspan class=\"hljs-string\">'sectionChange'\u003C/span>, {\n            \u003Cspan class=\"hljs-attr\">detail\u003C/span>: { sectionId, \u003Cspan class=\"hljs-attr\">section\u003C/span>: \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\">id\u003C/span> === sectionId) }\n        }));\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">setupKeyboardNavigation\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'keydown'\u003C/span>, \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">e\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-comment\">// Alt + Arrow keys for section navigation\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (e.\u003Cspan class=\"hljs-property\">altKey\u003C/span>) {\n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (e.\u003Cspan class=\"hljs-property\">key\u003C/span> === \u003Cspan class=\"hljs-string\">'ArrowUp'\u003C/span>) {\n                    e.\u003Cspan class=\"hljs-title function_\">preventDefault\u003C/span>();\n                    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">navigateToPreviousSection\u003C/span>();\n                } \u003Cspan class=\"hljs-keyword\">else\u003C/span> \u003Cspan class=\"hljs-keyword\">if\u003C/span> (e.\u003Cspan class=\"hljs-property\">key\u003C/span> === \u003Cspan class=\"hljs-string\">'ArrowDown'\u003C/span>) {\n                    e.\u003Cspan class=\"hljs-title function_\">preventDefault\u003C/span>();\n                    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">navigateToNextSection\u003C/span>();\n                }\n            }\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">navigateToPreviousSection\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> currentIndex = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">headings\u003C/span>.\u003Cspan class=\"hljs-title function_\">findIndex\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">h\u003C/span> =>\u003C/span> h.\u003Cspan class=\"hljs-property\">id\u003C/span> === \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentSection\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (currentIndex > \u003Cspan class=\"hljs-number\">0\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">scrollToSection\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">headings\u003C/span>[currentIndex - \u003Cspan class=\"hljs-number\">1\u003C/span>].\u003Cspan class=\"hljs-property\">id\u003C/span>);\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">navigateToNextSection\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> currentIndex = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">headings\u003C/span>.\u003Cspan class=\"hljs-title function_\">findIndex\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">h\u003C/span> =>\u003C/span> h.\u003Cspan class=\"hljs-property\">id\u003C/span> === \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentSection\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (currentIndex < \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>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">scrollToSection\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">headings\u003C/span>[currentIndex + \u003Cspan class=\"hljs-number\">1\u003C/span>].\u003Cspan class=\"hljs-property\">id\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 initial page load with hash\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> hash = \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\">if\u003C/span> (hash) {\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_\">scrollToSection\u003C/span>(hash.\u003Cspan class=\"hljs-title function_\">substring\u003C/span>(\u003Cspan class=\"hljs-number\">1\u003C/span>));\n            }, \u003Cspan class=\"hljs-number\">100\u003C/span>);\n        }\n    }\n    \n    \u003Cspan class=\"hljs-comment\">// Public API methods\u003C/span>\n    \u003Cspan class=\"hljs-title function_\">goToSection\u003C/span>(\u003Cspan class=\"hljs-params\">sectionId\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">scrollToSection\u003C/span>(sectionId);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">getCurrentSection\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\">currentSection\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">getScrollProgress\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\">scrollProgress\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">refreshHeadings\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-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-property\">tocContainer\u003C/span>.\u003Cspan class=\"hljs-title function_\">remove\u003C/span>();\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">generateTableOfContents\u003C/span>();\n        }\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">// Initialize navigation system\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-function\">() =>\u003C/span> {\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> navigation = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">MarkdownNavigation\u003C/span>({\n        \u003Cspan class=\"hljs-attr\">smoothScrolling\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\">highlightDuration\u003C/span>: \u003Cspan class=\"hljs-number\">2000\u003C/span>,\n        \u003Cspan class=\"hljs-attr\">generateTOC\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n        \u003Cspan class=\"hljs-attr\">trackScrollProgress\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>\n    });\n    \n    \u003Cspan class=\"hljs-comment\">// Make available globally\u003C/span>\n    \u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-property\">markdownNavigation\u003C/span> = navigation;\n});\n\n\u003Cspan class=\"hljs-comment\">// CSS for enhanced styling\u003C/span>\n\u003Cspan class=\"hljs-keyword\">const\u003C/span> navigationStyles = \u003Cspan class=\"hljs-string\">`\n.markdown-toc {\n    background: #f8f9fa;\n    border: 1px solid #dee2e6;\n    border-radius: 0.375rem;\n    padding: 1.5rem;\n    margin: 2rem 0;\n    max-width: 100%;\n}\n\n.markdown-toc h3 {\n    margin-top: 0;\n    margin-bottom: 1rem;\n    color: #495057;\n    font-size: 1.1rem;\n}\n\n.toc-list {\n    list-style: none;\n    padding: 0;\n    margin: 0;\n}\n\n.toc-item {\n    margin: 0.5rem 0;\n}\n\n.toc-level-1 { margin-left: 0; }\n.toc-level-2 { margin-left: 1.5rem; }\n.toc-level-3 { margin-left: 3rem; }\n.toc-level-4 { margin-left: 4.5rem; }\n.toc-level-5 { margin-left: 6rem; }\n.toc-level-6 { margin-left: 7.5rem; }\n\n.toc-link {\n    color: #007cba;\n    text-decoration: none;\n    transition: all 0.2s ease;\n    border-radius: 0.25rem;\n    padding: 0.25rem 0.5rem;\n    display: inline-block;\n}\n\n.toc-link:hover {\n    background-color: #e9ecef;\n    color: #0056b3;\n}\n\n.toc-link.active {\n    background-color: #007cba;\n    color: white;\n    font-weight: 600;\n}\n\n.section-highlighted {\n    background-color: #fff3cd;\n    border-radius: 0.375rem;\n    padding: 0.5rem;\n    transition: background-color 0.3s ease;\n}\n\n.scroll-progress {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 0;\n    height: 3px;\n    background: linear-gradient(90deg, #007cba, #28a745);\n    z-index: 1000;\n    transition: width 0.1s ease;\n}\n\n/* Smooth scrolling fallback */\nhtml {\n    scroll-behavior: smooth;\n    scroll-padding-top: 80px;\n}\n\n/* Anchor link styling */\nh1, h2, h3, h4, h5, h6 {\n    position: relative;\n}\n\nh1:hover .anchor-link,\nh2:hover .anchor-link,\nh3:hover .anchor-link,\nh4:hover .anchor-link,\nh5:hover .anchor-link,\nh6:hover .anchor-link {\n    opacity: 1;\n}\n\n.anchor-link {\n    position: absolute;\n    left: -1.5rem;\n    opacity: 0;\n    transition: opacity 0.2s ease;\n    color: #6c757d;\n    text-decoration: none;\n    font-weight: normal;\n}\n\n.anchor-link:hover {\n    color: #007cba;\n}\n`\u003C/span>;\n\n\u003Cspan class=\"hljs-comment\">// Inject styles\u003C/span>\n\u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-keyword\">typeof\u003C/span> \u003Cspan class=\"hljs-variable language_\">document\u003C/span> !== \u003Cspan class=\"hljs-string\">'undefined'\u003C/span>) {\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> style = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'style'\u003C/span>);\n    style.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = navigationStyles;\n    \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-property\">head\u003C/span>.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(style);\n}\n\u003C/code>\u003C/pre>\u003Ch2 id=\"advanced-navigation-features\">Advanced Navigation Features\u003C/h2>\n\u003Ch3 id=\"floating-table-of-contents\">Floating Table of Contents\u003C/h3>\n\u003Cp>Create a persistent navigation sidebar:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-css\">\u003Cspan class=\"hljs-comment\">/* Floating TOC styling */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.floating-toc\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">position\u003C/span>: fixed;\n    \u003Cspan class=\"hljs-attribute\">top\u003C/span>: \u003Cspan class=\"hljs-number\">50%\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">right\u003C/span>: \u003Cspan class=\"hljs-number\">2rem\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\">background\u003C/span>: white;\n    \u003Cspan class=\"hljs-attribute\">box-shadow\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">4px\u003C/span> \u003Cspan class=\"hljs-number\">12px\u003C/span> \u003Cspan class=\"hljs-built_in\">rgba\u003C/span>(\u003Cspan class=\"hljs-number\">0\u003C/span>,\u003Cspan class=\"hljs-number\">0\u003C/span>,\u003Cspan class=\"hljs-number\">0\u003C/span>,\u003Cspan class=\"hljs-number\">0.15\u003C/span>);\n    \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">0.5rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">1rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">max-height\u003C/span>: \u003Cspan class=\"hljs-number\">70vh\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">overflow-y\u003C/span>: auto;\n    \u003Cspan class=\"hljs-attribute\">min-width\u003C/span>: \u003Cspan class=\"hljs-number\">200px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">z-index\u003C/span>: \u003Cspan class=\"hljs-number\">100\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">transition\u003C/span>: all \u003Cspan class=\"hljs-number\">0.3s\u003C/span> ease;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.floating-toc\u003C/span>\u003Cspan class=\"hljs-selector-class\">.collapsed\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>) \u003Cspan class=\"hljs-built_in\">translateX\u003C/span>(\u003Cspan class=\"hljs-built_in\">calc\u003C/span>(\u003Cspan class=\"hljs-number\">100%\u003C/span> - \u003Cspan class=\"hljs-number\">40px\u003C/span>));\n}\n\n\u003Cspan class=\"hljs-selector-class\">.floating-toc\u003C/span> \u003Cspan class=\"hljs-selector-class\">.toggle-button\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">position\u003C/span>: absolute;\n    \u003Cspan class=\"hljs-attribute\">left\u003C/span>: -\u003Cspan class=\"hljs-number\">40px\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\">background\u003C/span>: white;\n    \u003Cspan class=\"hljs-attribute\">border\u003C/span>: none;\n    \u003Cspan class=\"hljs-attribute\">box-shadow\u003C/span>: -\u003Cspan class=\"hljs-number\">2px\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">8px\u003C/span> \u003Cspan class=\"hljs-built_in\">rgba\u003C/span>(\u003Cspan class=\"hljs-number\">0\u003C/span>,\u003Cspan class=\"hljs-number\">0\u003C/span>,\u003Cspan class=\"hljs-number\">0\u003C/span>,\u003Cspan class=\"hljs-number\">0.1\u003C/span>);\n    \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">40px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">height\u003C/span>: \u003Cspan class=\"hljs-number\">40px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">0.5rem\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">0.5rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">cursor\u003C/span>: pointer;\n}\n\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> (\u003Cspan class=\"hljs-attribute\">max-width\u003C/span>: \u003Cspan class=\"hljs-number\">768px\u003C/span>) {\n    \u003Cspan class=\"hljs-selector-class\">.floating-toc\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">display\u003C/span>: none;\n    }\n}\n\u003C/code>\u003C/pre>\u003Ch3 id=\"breadcrumb-navigation\">Breadcrumb Navigation\u003C/h3>\n\u003Cp>Add contextual breadcrumb navigation:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-javascript\">\u003Cspan class=\"hljs-comment\">// breadcrumb-navigation.js\u003C/span>\n\u003Cspan class=\"hljs-keyword\">class\u003C/span> \u003Cspan class=\"hljs-title class_\">BreadcrumbNavigation\u003C/span> {\n    \u003Cspan class=\"hljs-title function_\">constructor\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">breadcrumbContainer\u003C/span> = \u003Cspan class=\"hljs-literal\">null\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">init\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">init\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">createBreadcrumbContainer\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">updateBreadcrumb\u003C/span>();\n        \n        \u003Cspan class=\"hljs-comment\">// Update breadcrumb on section changes\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'sectionChange'\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_\">updateBreadcrumb\u003C/span>(e.\u003Cspan class=\"hljs-property\">detail\u003C/span>.\u003Cspan class=\"hljs-property\">section\u003C/span>);\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">createBreadcrumbContainer\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">breadcrumbContainer\u003C/span> = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'nav'\u003C/span>);\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">breadcrumbContainer\u003C/span>.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'breadcrumb-navigation'\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">breadcrumbContainer\u003C/span>.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'aria-label'\u003C/span>, \u003Cspan class=\"hljs-string\">'Breadcrumb'\u003C/span>);\n        \n        \u003Cspan class=\"hljs-comment\">// Insert at top of content\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> content = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'.content, main, article'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (content) {\n            content.\u003Cspan class=\"hljs-title function_\">insertBefore\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">breadcrumbContainer\u003C/span>, content.\u003Cspan class=\"hljs-property\">firstChild\u003C/span>);\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">updateBreadcrumb\u003C/span>(\u003Cspan class=\"hljs-params\">currentSection\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> breadcrumbList = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'ol'\u003C/span>);\n        breadcrumbList.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'breadcrumb-list'\u003C/span>;\n        \n        \u003Cspan class=\"hljs-comment\">// Add home link\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> homeItem = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">createBreadcrumbItem\u003C/span>(\u003Cspan class=\"hljs-string\">'Home'\u003C/span>, \u003Cspan class=\"hljs-string\">'#'\u003C/span>, \u003Cspan class=\"hljs-literal\">false\u003C/span>);\n        breadcrumbList.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(homeItem);\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (currentSection) {\n            \u003Cspan class=\"hljs-comment\">// Build hierarchy based on heading levels\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> hierarchy = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">buildHierarchy\u003C/span>(currentSection);\n            \n            hierarchy.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">section, index\u003C/span>) =>\u003C/span> {\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> isLast = index === hierarchy.\u003Cspan class=\"hljs-property\">length\u003C/span> - \u003Cspan class=\"hljs-number\">1\u003C/span>;\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> item = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">createBreadcrumbItem\u003C/span>(\n                    section.\u003Cspan class=\"hljs-property\">text\u003C/span>, \n                    \u003Cspan class=\"hljs-string\">`#\u003Cspan class=\"hljs-subst\">${section.id}\u003C/span>`\u003C/span>, \n                    isLast\n                );\n                breadcrumbList.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(item);\n            });\n        }\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">breadcrumbContainer\u003C/span>.\u003Cspan class=\"hljs-property\">innerHTML\u003C/span> = \u003Cspan class=\"hljs-string\">''\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">breadcrumbContainer\u003C/span>.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(breadcrumbList);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">buildHierarchy\u003C/span>(\u003Cspan class=\"hljs-params\">currentSection\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> allHeadings = \u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-property\">markdownNavigation\u003C/span>?.\u003Cspan class=\"hljs-property\">headings\u003C/span> || [];\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> currentIndex = allHeadings.\u003Cspan class=\"hljs-title function_\">findIndex\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">h\u003C/span> =>\u003C/span> h.\u003Cspan class=\"hljs-property\">id\u003C/span> === currentSection.\u003Cspan class=\"hljs-property\">id\u003C/span>);\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (currentIndex === -\u003Cspan class=\"hljs-number\">1\u003C/span>) \u003Cspan class=\"hljs-keyword\">return\u003C/span> [currentSection];\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> hierarchy = [];\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> currentLevel = currentSection.\u003Cspan class=\"hljs-property\">level\u003C/span>;\n        \n        \u003Cspan class=\"hljs-comment\">// Walk backwards to find parent sections\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">let\u003C/span> i = currentIndex; i >= \u003Cspan class=\"hljs-number\">0\u003C/span>; i--) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> heading = allHeadings[i];\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (heading.\u003Cspan class=\"hljs-property\">level\u003C/span> <= currentLevel) {\n                hierarchy.\u003Cspan class=\"hljs-title function_\">unshift\u003C/span>(heading);\n                currentLevel = heading.\u003Cspan class=\"hljs-property\">level\u003C/span> - \u003Cspan class=\"hljs-number\">1\u003C/span>;\n                \n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (currentLevel < \u003Cspan class=\"hljs-number\">1\u003C/span>) \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n            }\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> hierarchy;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">createBreadcrumbItem\u003C/span>(\u003Cspan class=\"hljs-params\">text, href, isLast\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> item = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'li'\u003C/span>);\n        item.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'breadcrumb-item'\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (isLast) {\n            item.\u003Cspan class=\"hljs-property\">className\u003C/span> += \u003Cspan class=\"hljs-string\">' active'\u003C/span>;\n            item.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'aria-current'\u003C/span>, \u003Cspan class=\"hljs-string\">'page'\u003C/span>);\n            item.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = text;\n        } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> link = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'a'\u003C/span>);\n            link.\u003Cspan class=\"hljs-property\">href\u003C/span> = href;\n            link.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = text;\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-keyword\">if\u003C/span> (href.\u003Cspan class=\"hljs-title function_\">startsWith\u003C/span>(\u003Cspan class=\"hljs-string\">'#'\u003C/span>)) {\n                    e.\u003Cspan class=\"hljs-title function_\">preventDefault\u003C/span>();\n                    \u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-property\">markdownNavigation\u003C/span>?.\u003Cspan class=\"hljs-title function_\">goToSection\u003C/span>(href.\u003Cspan class=\"hljs-title function_\">substring\u003C/span>(\u003Cspan class=\"hljs-number\">1\u003C/span>));\n                }\n            });\n            item.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(link);\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> item;\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">// Initialize breadcrumb navigation\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-function\">() =>\u003C/span> {\n    \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">BreadcrumbNavigation\u003C/span>();\n});\n\u003C/code>\u003C/pre>\u003Ch3 id=\"progress-indicator\">Progress Indicator\u003C/h3>\n\u003Cp>Add visual scroll progress feedback:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-html\">\u003Cspan class=\"hljs-comment\"><!-- Add to document head or top of body -->\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"scroll-progress-container"\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"scroll-progress"\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"section-progress"\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"current-section"\u003C/span>>\u003C/span>Getting Started\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">span\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"progress-text"\u003C/span>>\u003C/span>25% Complete\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">span\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch2 id=\"platform-specific-considerations\">Platform-Specific Considerations\u003C/h2>\n\u003Ch3 id=\"github-markdown\">GitHub Markdown\u003C/h3>\n\u003Cp>GitHub automatically generates heading anchors:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">\u003Cspan class=\"hljs-section\"># Installation Guide\u003C/span>\n\nGitHub automatically creates: id="installation-guide"\n\n\u003Cspan class=\"hljs-section\">## Prerequisites\u003C/span>\n\nGitHub creates: id="prerequisites"\n\n\u003Cspan class=\"hljs-section\">### System Requirements\u003C/span>\n\nGitHub creates: id="system-requirements"\n\u003C/code>\u003C/pre>\u003Ch3 id=\"jekyll-integration\">Jekyll Integration\u003C/h3>\n\u003Cp>Enhanced anchor support in Jekyll:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-yaml\">\u003Cspan class=\"hljs-comment\"># _config.yml\u003C/span>\n\u003Cspan class=\"hljs-attr\">markdown:\u003C/span> \u003Cspan class=\"hljs-string\">kramdown\u003C/span>\n\u003Cspan class=\"hljs-attr\">kramdown:\u003C/span>\n  \u003Cspan class=\"hljs-attr\">auto_ids:\u003C/span> \u003Cspan class=\"hljs-literal\">true\u003C/span>\n  \u003Cspan class=\"hljs-attr\">header_offset:\u003C/span> \u003Cspan class=\"hljs-number\">1\u003C/span>\n  \u003Cspan class=\"hljs-attr\">toc_levels:\u003C/span> \u003Cspan class=\"hljs-string\">"2..6"\u003C/span>\n\u003C/code>\u003C/pre>\u003Cpre>\u003Ccode class=\"hljs language-liquid\">\n<!-- Generate TOC in Jekyll -->\n{% assign headings = content | split: '<h' %}\n<nav class="table-of-contents">\n  <ul>\n    {% for heading in headings offset:1 %}\n      {% assign title = heading | split: '>' | first | split: '"' | last %}\n      {% assign level = heading | slice: 0 %}\n      <li class="toc-level-{{ level }}">\n        <a href="#{{ title | slugify }}">{{ title }}</a>\n      </li>\n    {% endfor %}\n  </ul>\n</nav>\n\u003C/code>\u003C/pre>\u003Ch3 id=\"hugo-shortcodes\">Hugo Shortcodes\u003C/h3>\n\u003Cp>Create reusable navigation components in Hugo:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-html\">\u003Cspan class=\"hljs-comment\"><!-- layouts/shortcodes/anchor.html -->\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\u003C/span> \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"{{ .Get 0 }}"\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"anchor-point"\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">span\u003C/span>>\u003C/span>\n\n\u003Cspan class=\"hljs-comment\"><!-- layouts/shortcodes/toc.html -->\u003C/span>\n{{ .Page.TableOfContents }}\n\u003C/code>\u003C/pre>\u003Cp>Usage in Markdown:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">{{< anchor "custom-section" >}}\n\u003Cspan class=\"hljs-section\">## Custom Section\u003C/span>\n\nContent here...\n\n{{< toc >}}\n\u003C/code>\u003C/pre>\u003Ch2 id=\"accessibility-and-usability\">Accessibility and Usability\u003C/h2>\n\u003Ch3 id=\"screen-reader-support\">Screen Reader Support\u003C/h3>\n\u003Cp>Ensure proper accessibility for navigation:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-html\">\u003Cspan class=\"hljs-comment\"><!-- Accessible TOC structure -->\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">nav\u003C/span> \u003Cspan class=\"hljs-attr\">aria-label\u003C/span>=\u003Cspan class=\"hljs-string\">"Table of Contents"\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">h2\u003C/span> \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"toc-heading"\u003C/span>>\u003C/span>Table of Contents\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">h2\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">ul\u003C/span> \u003Cspan class=\"hljs-attr\">role\u003C/span>=\u003Cspan class=\"hljs-string\">"list"\u003C/span> \u003Cspan class=\"hljs-attr\">aria-labelledby\u003C/span>=\u003Cspan class=\"hljs-string\">"toc-heading"\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">li\u003C/span> \u003Cspan class=\"hljs-attr\">role\u003C/span>=\u003Cspan class=\"hljs-string\">"listitem"\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">a\u003C/span> \u003Cspan class=\"hljs-attr\">href\u003C/span>=\u003Cspan class=\"hljs-string\">"#section1"\u003C/span> \u003Cspan class=\"hljs-attr\">aria-describedby\u003C/span>=\u003Cspan class=\"hljs-string\">"toc-heading"\u003C/span>>\u003C/span>\n        Section 1: Getting Started\n      \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">a\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">li\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">li\u003C/span> \u003Cspan class=\"hljs-attr\">role\u003C/span>=\u003Cspan class=\"hljs-string\">"listitem"\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">a\u003C/span> \u003Cspan class=\"hljs-attr\">href\u003C/span>=\u003Cspan class=\"hljs-string\">"#section2"\u003C/span> \u003Cspan class=\"hljs-attr\">aria-describedby\u003C/span>=\u003Cspan class=\"hljs-string\">"toc-heading"\u003C/span>>\u003C/span>\n        Section 2: Configuration\n      \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">a\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">li\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">ul\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">nav\u003C/span>>\u003C/span>\n\n\u003Cspan class=\"hljs-comment\"><!-- Skip navigation link -->\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">a\u003C/span> \u003Cspan class=\"hljs-attr\">href\u003C/span>=\u003Cspan class=\"hljs-string\">"#main-content"\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"skip-link"\u003C/span>>\u003C/span>\n  Skip to main content\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">a\u003C/span>>\u003C/span>\n\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">main\u003C/span> \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"main-content"\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-comment\"><!-- Document content -->\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">main\u003C/span>>\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch3 id=\"keyboard-navigation\">Keyboard Navigation\u003C/h3>\n\u003Cp>Implement comprehensive keyboard support:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-css\">\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\">.anchor-link\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\">#007cba\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">outline-offset\u003C/span>: \u003Cspan class=\"hljs-number\">2px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-number\">#e3f2fd\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Skip link styling */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.skip-link\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\">#007cba\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\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">4px\u003C/span> \u003Cspan class=\"hljs-number\">4px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">z-index\u003C/span>: \u003Cspan class=\"hljs-number\">1000\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.skip-link\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:focus\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">top\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n}\n\u003C/code>\u003C/pre>\u003Ch3 id=\"mobile-optimization\">Mobile Optimization\u003C/h3>\n\u003Cp>Ensure navigation works well on mobile devices:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-css\">\u003Cspan class=\"hljs-comment\">/* Mobile-responsive navigation */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> (\u003Cspan class=\"hljs-attribute\">max-width\u003C/span>: \u003Cspan class=\"hljs-number\">768px\u003C/span>) {\n    \u003Cspan class=\"hljs-selector-class\">.markdown-toc\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\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">1rem\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.toc-level-3\u003C/span>,\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\">display\u003C/span>: none; \u003Cspan class=\"hljs-comment\">/* Hide deeper levels on mobile */\u003C/span>\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.floating-toc\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">position\u003C/span>: static;\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\">box-shadow\u003C/span>: none;\n        \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-number\">#dee2e6\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-comment\">/* Larger touch targets */\u003C/span>\n    \u003Cspan class=\"hljs-selector-class\">.toc-link\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\">display\u003C/span>: block;\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">/* Touch-friendly scroll progress */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> (\u003Cspan class=\"hljs-attribute\">hover\u003C/span>: none) \u003Cspan class=\"hljs-keyword\">and\u003C/span> (\u003Cspan class=\"hljs-attribute\">pointer\u003C/span>: coarse) {\n    \u003Cspan class=\"hljs-selector-class\">.scroll-progress-container\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">height\u003C/span>: \u003Cspan class=\"hljs-number\">6px\u003C/span>; \u003Cspan class=\"hljs-comment\">/* Thicker on touch devices */\u003C/span>\n    }\n}\n\u003C/code>\u003C/pre>\u003Ch2 id=\"integration-with-content-management\">Integration with Content Management\u003C/h2>\n\u003Cp>Page navigation systems work excellently with comprehensive documentation workflows. When combined with \u003Ca href=\"/blog/markdown-automation-workflows-complete-guide\">automated content generation systems\u003C/a>, anchor links and navigation enhance the user experience of dynamically generated documentation while maintaining consistency across large content repositories.\u003C/p>\n\u003Cp>For complex documentation architectures, navigation features integrate seamlessly with \u003Ca href=\"/blog/markdown-progressive-web-app-documentation-complete-guide\">Progressive Web App documentation systems\u003C/a> to provide offline navigation capabilities, cached content access, and enhanced performance for technical documentation platforms.\u003C/p>\n\u003Cp>When building comprehensive content ecosystems, page navigation complements \u003Ca href=\"/blog/markdown-table-sorting-filtering-interactive-guide\">advanced table management and interactive features\u003C/a> by providing contextual navigation between related content sections and maintaining user orientation within complex information hierarchies.\u003C/p>\n\u003Ch2 id=\"performance-optimization\">Performance Optimization\u003C/h2>\n\u003Ch3 id=\"lazy-loading-navigation\">Lazy Loading Navigation\u003C/h3>\n\u003Cp>Implement performance-optimized navigation:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-javascript\">\u003Cspan class=\"hljs-comment\">// lazy-navigation.js - Performance-optimized navigation loading\u003C/span>\n\u003Cspan class=\"hljs-keyword\">class\u003C/span> \u003Cspan class=\"hljs-title class_\">LazyNavigation\u003C/span> {\n    \u003Cspan class=\"hljs-title function_\">constructor\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">navigationLoaded\u003C/span> = \u003Cspan class=\"hljs-literal\">false\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">init\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">init\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Load navigation only when needed\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> observer = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">IntersectionObserver\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">entries\u003C/span>) =>\u003C/span> {\n            entries.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">entry\u003C/span> =>\u003C/span> {\n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (entry.\u003Cspan class=\"hljs-property\">isIntersecting\u003C/span> && !\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">navigationLoaded\u003C/span>) {\n                    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">loadNavigation\u003C/span>();\n                    observer.\u003Cspan class=\"hljs-title function_\">disconnect\u003C/span>();\n                }\n            });\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// Observe the first heading\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-string\">'h1, h2, h3'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (firstHeading) {\n            observer.\u003Cspan class=\"hljs-title function_\">observe\u003C/span>(firstHeading);\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Also load on user interaction\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'click'\u003C/span>, \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">handleUserInteraction\u003C/span>.\u003Cspan class=\"hljs-title function_\">bind\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>), { \u003Cspan class=\"hljs-attr\">once\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span> });\n        \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'keydown'\u003C/span>, \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">handleUserInteraction\u003C/span>.\u003Cspan class=\"hljs-title function_\">bind\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>), { \u003Cspan class=\"hljs-attr\">once\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span> });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">handleUserInteraction\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\">navigationLoaded\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">loadNavigation\u003C/span>();\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">loadNavigation\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\">navigationLoaded\u003C/span>) \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n        \n        \u003Cspan class=\"hljs-comment\">// Load navigation system\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">import\u003C/span>(\u003Cspan class=\"hljs-string\">'./markdown-navigation.js'\u003C/span>).\u003Cspan class=\"hljs-title function_\">then\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">module\u003C/span> =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-variable language_\">module\u003C/span>.\u003Cspan class=\"hljs-title class_\">MarkdownNavigation\u003C/span>();\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">navigationLoaded\u003C/span> = \u003Cspan class=\"hljs-literal\">true\u003C/span>;\n        });\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">// Initialize lazy navigation\u003C/span>\n\u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">LazyNavigation\u003C/span>();\n\u003C/code>\u003C/pre>\u003Ch3 id=\"efficient-scroll-handling\">Efficient Scroll Handling\u003C/h3>\n\u003Cp>Optimize scroll event performance:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-javascript\">\u003Cspan class=\"hljs-comment\">// optimized-scroll.js - High-performance scroll handling\u003C/span>\n\u003Cspan class=\"hljs-keyword\">class\u003C/span> \u003Cspan class=\"hljs-title class_\">OptimizedScrollHandler\u003C/span> {\n    \u003Cspan class=\"hljs-title function_\">constructor\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">ticking\u003C/span> = \u003Cspan class=\"hljs-literal\">false\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">lastScrollTop\u003C/span> = \u003Cspan class=\"hljs-number\">0\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">scrollDirection\u003C/span> = \u003Cspan class=\"hljs-string\">'down'\u003C/span>;\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">setupScrollHandler\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">setupScrollHandler\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> timeout;\n        \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-function\">() =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">ticking\u003C/span>) {\n                \u003Cspan class=\"hljs-title function_\">requestAnimationFrame\u003C/span>(\u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n                    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">handleScroll\u003C/span>();\n                    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">ticking\u003C/span> = \u003Cspan class=\"hljs-literal\">false\u003C/span>;\n                });\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">ticking\u003C/span> = \u003Cspan class=\"hljs-literal\">true\u003C/span>;\n            }\n            \n            \u003Cspan class=\"hljs-comment\">// Debounced scroll end detection\u003C/span>\n            \u003Cspan class=\"hljs-built_in\">clearTimeout\u003C/span>(timeout);\n            timeout = \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_\">handleScrollEnd\u003C/span>();\n            }, \u003Cspan class=\"hljs-number\">150\u003C/span>);\n        }, { \u003Cspan class=\"hljs-attr\">passive\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span> });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">handleScroll\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> currentScrollTop = \u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-property\">pageYOffset\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">scrollDirection\u003C/span> = currentScrollTop > \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">lastScrollTop\u003C/span> ? \u003Cspan class=\"hljs-string\">'down'\u003C/span> : \u003Cspan class=\"hljs-string\">'up'\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">lastScrollTop\u003C/span> = currentScrollTop;\n        \n        \u003Cspan class=\"hljs-comment\">// Only update navigation if significant scroll\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">abs\u003C/span>(currentScrollTop - \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">lastUpdatePosition\u003C/span>) > \u003Cspan class=\"hljs-number\">50\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">updateNavigation\u003C/span>(currentScrollTop);\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">lastUpdatePosition\u003C/span> = currentScrollTop;\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">updateNavigation\u003C/span>(\u003Cspan class=\"hljs-params\">scrollTop\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Efficient navigation updates\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> activeSection = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">findActiveSection\u003C/span>(scrollTop);\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (activeSection !== \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentActiveSection\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">setActiveSection\u003C/span>(activeSection);\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">findActiveSection\u003C/span>(\u003Cspan class=\"hljs-params\">scrollTop\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Binary search for efficiency with many headings\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> headings = \u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-property\">markdownNavigation\u003C/span>?.\u003Cspan class=\"hljs-property\">headings\u003C/span> || [];\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> left = \u003Cspan class=\"hljs-number\">0\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> right = headings.\u003Cspan class=\"hljs-property\">length\u003C/span> - \u003Cspan class=\"hljs-number\">1\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> result = \u003Cspan class=\"hljs-literal\">null\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">while\u003C/span> (left <= right) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> mid = \u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">floor\u003C/span>((left + right) / \u003Cspan class=\"hljs-number\">2\u003C/span>);\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> heading = headings[mid];\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (heading.\u003Cspan class=\"hljs-property\">offset\u003C/span> <= scrollTop + \u003Cspan class=\"hljs-number\">100\u003C/span>) {\n                result = heading;\n                left = mid + \u003Cspan class=\"hljs-number\">1\u003C/span>;\n            } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n                right = mid - \u003Cspan class=\"hljs-number\">1\u003C/span>;\n            }\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> result;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">setActiveSection\u003C/span>(\u003Cspan class=\"hljs-params\">section\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentActiveSection\u003C/span> = section;\n        \n        \u003Cspan class=\"hljs-comment\">// Efficient DOM updates using document fragments\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> fragment = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createDocumentFragment\u003C/span>();\n        \n        \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'.toc-link.active'\u003C/span>).\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-string\">'active'\u003C/span>);\n        });\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (section) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> activeLink = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">`[href="#\u003Cspan class=\"hljs-subst\">${section.id}\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-string\">'active'\u003C/span>);\n            }\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">handleScrollEnd\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Actions to perform when scrolling stops\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">updateURL\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">saveScrollPosition\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">updateURL\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\">currentActiveSection\u003C/span> && history.\u003Cspan class=\"hljs-property\">replaceState\u003C/span>) {\n            history.\u003Cspan class=\"hljs-title function_\">replaceState\u003C/span>(\u003Cspan class=\"hljs-literal\">null\u003C/span>, \u003Cspan class=\"hljs-literal\">null\u003C/span>, \u003Cspan class=\"hljs-string\">`#\u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.currentActiveSection.id}\u003C/span>`\u003C/span>);\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">saveScrollPosition\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Save position for restoration\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">sessionStorage\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">sessionStorage\u003C/span>.\u003Cspan class=\"hljs-title function_\">setItem\u003C/span>(\u003Cspan class=\"hljs-string\">'scrollPosition'\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-comment\">// Initialize optimized scroll handling\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-function\">() =>\u003C/span> {\n    \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">OptimizedScrollHandler\u003C/span>();\n});\n\u003C/code>\u003C/pre>\u003Ch2 id=\"troubleshooting-common-issues\">Troubleshooting Common Issues\u003C/h2>\n\u003Ch3 id=\"anchor-links-not-working\">Anchor Links Not Working\u003C/h3>\n\u003Cp>\u003Cstrong>Problem\u003C/strong>: Clicking anchor links doesn't navigate to sections\u003C/p>\n\u003Cp>\u003Cstrong>Solutions\u003C/strong>:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-javascript\">\u003Cspan class=\"hljs-comment\">// Debug anchor navigation issues\u003C/span>\n\u003Cspan class=\"hljs-keyword\">function\u003C/span> \u003Cspan class=\"hljs-title function_\">debugAnchorNavigation\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n    \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">log\u003C/span>(\u003Cspan class=\"hljs-string\">'Checking anchor navigation...'\u003C/span>);\n    \n    \u003Cspan class=\"hljs-comment\">// Check if anchors exist\u003C/span>\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> anchors = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'[id]'\u003C/span>);\n    \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">log\u003C/span>(\u003Cspan class=\"hljs-string\">`Found \u003Cspan class=\"hljs-subst\">${anchors.length}\u003C/span> elements with IDs`\u003C/span>);\n    \n    \u003Cspan class=\"hljs-comment\">// Check if links are properly formatted\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    \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">log\u003C/span>(\u003Cspan class=\"hljs-string\">`Found \u003Cspan class=\"hljs-subst\">${anchorLinks.length}\u003C/span> anchor links`\u003C/span>);\n    \n    \u003Cspan class=\"hljs-comment\">// Test each link\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        \u003Cspan class=\"hljs-keyword\">const\u003C/span> targetId = link.\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> target = \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> (!target) {\n            \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">warn\u003C/span>(\u003Cspan class=\"hljs-string\">`Broken link: \u003Cspan class=\"hljs-subst\">${link.href}\u003C/span> - target not found`\u003C/span>);\n        }\n    });\n}\n\n\u003Cspan class=\"hljs-comment\">// Run debug function\u003C/span>\n\u003Cspan class=\"hljs-title function_\">debugAnchorNavigation\u003C/span>();\n\u003C/code>\u003C/pre>\u003Ch3 id=\"smooth-scrolling-issues\">Smooth Scrolling Issues\u003C/h3>\n\u003Cp>\u003Cstrong>Problem\u003C/strong>: Smooth scrolling not working across all browsers\u003C/p>\n\u003Cp>\u003Cstrong>Solutions\u003C/strong>:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-javascript\">\u003Cspan class=\"hljs-comment\">// Polyfill for smooth scrolling\u003C/span>\n\u003Cspan class=\"hljs-keyword\">function\u003C/span> \u003Cspan class=\"hljs-title function_\">smoothScrollPolyfill\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n    \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!(\u003Cspan class=\"hljs-string\">'scrollBehavior'\u003C/span> \u003Cspan class=\"hljs-keyword\">in\u003C/span> \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-property\">documentElement\u003C/span>.\u003Cspan class=\"hljs-property\">style\u003C/span>)) {\n        \u003Cspan class=\"hljs-comment\">// Load smooth scroll polyfill\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">import\u003C/span>(\u003Cspan class=\"hljs-string\">'smoothscroll-polyfill'\u003C/span>).\u003Cspan class=\"hljs-title function_\">then\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">smoothscroll\u003C/span> =>\u003C/span> {\n            smoothscroll.\u003Cspan class=\"hljs-title function_\">polyfill\u003C/span>();\n        });\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">// Custom smooth scroll implementation\u003C/span>\n\u003Cspan class=\"hljs-keyword\">function\u003C/span> \u003Cspan class=\"hljs-title function_\">smoothScrollTo\u003C/span>(\u003Cspan class=\"hljs-params\">target, duration = \u003Cspan class=\"hljs-number\">800\u003C/span>\u003C/span>) {\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> targetPosition = target.\u003Cspan class=\"hljs-property\">offsetTop\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\">let\u003C/span> startTime = \u003Cspan class=\"hljs-literal\">null\u003C/span>;\n    \n    \u003Cspan class=\"hljs-keyword\">function\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> (startTime === \u003Cspan class=\"hljs-literal\">null\u003C/span>) startTime = currentTime;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> timeElapsed = currentTime - startTime;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> run = \u003Cspan class=\"hljs-title function_\">ease\u003C/span>(timeElapsed, startPosition, distance, duration);\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        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (timeElapsed < duration) \u003Cspan class=\"hljs-title function_\">requestAnimationFrame\u003C/span>(animation);\n    }\n    \n    \u003Cspan class=\"hljs-keyword\">function\u003C/span> \u003Cspan class=\"hljs-title function_\">ease\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 + b;\n        t--;\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> -c / \u003Cspan class=\"hljs-number\">2\u003C/span> * (t * (t - \u003Cspan class=\"hljs-number\">2\u003C/span>) - \u003Cspan class=\"hljs-number\">1\u003C/span>) + b;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">requestAnimationFrame\u003C/span>(animation);\n}\n\u003C/code>\u003C/pre>\u003Ch2 id=\"conclusion\">Conclusion\u003C/h2>\n\u003Cp>Advanced Markdown page anchors and smooth scrolling create professional, user-friendly navigation experiences that enhance document accessibility and usability. By implementing proper anchor link strategies, smooth scrolling behaviors, and intelligent navigation systems, technical writers can transform long documents into well-organized, easily navigable resources.\u003C/p>\n\u003Cp>Whether you're creating comprehensive tutorials, API documentation, or extensive guides, the navigation techniques covered in this guide provide the foundation for building documents that users can efficiently explore and reference. Remember to test navigation features across different devices and browsers, implement proper accessibility features, and optimize performance for the best user experience.\u003C/p>\n\u003Cp>The combination of automatic table of contents generation, smooth scrolling, progress indicators, and keyboard navigation creates a polished, professional documentation experience that keeps readers engaged and helps them find the information they need quickly and efficiently.\u003C/p>\n",[15,19,22,25,28,31,34,37,40,43],{"id":16,"text":17,"level":18},"why-master-page-anchors-and-smooth-scrolling","Why Master Page Anchors and Smooth Scrolling?",2,{"id":20,"text":21,"level":18},"foundation-anchor-link-techniques","Foundation Anchor Link Techniques",{"id":23,"text":24,"level":18},"advanced-smooth-scrolling-implementation","Advanced Smooth Scrolling Implementation",{"id":26,"text":27,"level":18},"advanced-navigation-features","Advanced Navigation Features",{"id":29,"text":30,"level":18},"platform-specific-considerations","Platform-Specific Considerations",{"id":32,"text":33,"level":18},"accessibility-and-usability","Accessibility and Usability",{"id":35,"text":36,"level":18},"integration-with-content-management","Integration with Content Management",{"id":38,"text":39,"level":18},"performance-optimization","Performance Optimization",{"id":41,"text":42,"level":18},"troubleshooting-common-issues","Troubleshooting Common Issues",{"id":44,"text":45,"level":18},"conclusion","Conclusion",[],[48,56,64],{"slug":49,"title":50,"description":51,"excerpt":52,"date":53,"category":9,"author":10,"keywords":54,"readingMinutes":55},"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":57,"title":58,"description":59,"excerpt":60,"date":61,"category":9,"author":10,"keywords":62,"readingMinutes":63},"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","markdown anchor links, fragment identifiers, internal links, table of contents, document navigation, cross references, markdown bookmarks, heading links, smooth scrolling",21,{"slug":65,"title":66,"description":67,"excerpt":68,"date":69,"category":9,"author":10,"keywords":70,"readingMinutes":71},"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,1792184946156]