[{"data":1,"prerenderedAt":75},["Reactive",2],{"blog-post-markdown-anchor-links-navigation-complete-guide":3},{"slug":4,"title":5,"description":6,"excerpt":7,"date":8,"category":9,"author":10,"keywords":11,"readingMinutes":12,"html":13,"headings":14,"tools":49,"related":50},"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","Tutorial","Matthew Rathbone","markdown anchor links, markdown navigation, markdown cross reference, internal links markdown, markdown table of contents, document navigation, markdown bookmarks, heading links",11,"\u003Cp>Anchor links and internal navigation transform lengthy Markdown documents into navigable, interconnected resources that readers can efficiently explore and reference. Modern Markdown processors support sophisticated anchor link patterns that enable seamless navigation between sections, automatic table of contents generation, and cross-document referencing systems that rival traditional documentation platforms.\u003C/p>\n\u003Ch2 id=\"why-use-anchor-links\">Why Use Anchor Links?\u003C/h2>\n\u003Cp>Anchor links provide essential navigation benefits for professional documentation:\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>Enhanced Usability\u003C/strong>: Readers can jump directly to relevant sections without scrolling\u003C/li>\n\u003Cli>\u003Cstrong>Improved Accessibility\u003C/strong>: Screen readers and assistive technologies can navigate document structure\u003C/li>\n\u003Cli>\u003Cstrong>Professional Documentation\u003C/strong>: Navigation systems demonstrate thorough organization and user consideration\u003C/li>\n\u003Cli>\u003Cstrong>Content Discoverability\u003C/strong>: Internal linking helps readers discover related information\u003C/li>\n\u003Cli>\u003Cstrong>Reference Efficiency\u003C/strong>: Direct links to specific sections enable precise citations and sharing\u003C/li>\n\u003C/ul>\n\u003Ch2 id=\"basic-anchor-link-syntax\">Basic Anchor Link Syntax\u003C/h2>\n\u003Cp>Standard Markdown anchor links use heading-based automatic anchors and manual reference patterns:\u003C/p>\n\u003Ch3 id=\"automatic-heading-anchors\">Automatic Heading Anchors\u003C/h3>\n\u003Cp>Most Markdown processors automatically generate anchors from headings:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">\u003Cspan class=\"hljs-section\"># Introduction to API Authentication\u003C/span>\nWelcome to our comprehensive guide.\n\n\u003Cspan class=\"hljs-section\">## Authentication Methods\u003C/span>\nWe support several authentication approaches:\n\n\u003Cspan class=\"hljs-section\">### OAuth 2.0 Implementation\u003C/span>\nOAuth provides secure, token-based authentication.\n\n\u003Cspan class=\"hljs-section\">### API Key Authentication\u003C/span>\nSimple key-based authentication for basic use cases.\n\n<!-- Link to sections using heading text -->\n[\u003Cspan class=\"hljs-string\">Jump to OAuth section\u003C/span>](\u003Cspan class=\"hljs-link\">#oauth-20-implementation\u003C/span>)\n[\u003Cspan class=\"hljs-string\">See API Key details\u003C/span>](\u003Cspan class=\"hljs-link\">#api-key-authentication\u003C/span>)\n[\u003Cspan class=\"hljs-string\">Return to top\u003C/span>](\u003Cspan class=\"hljs-link\">#introduction-to-api-authentication\u003C/span>)\n\u003C/code>\u003C/pre>\u003Ch3 id=\"manual-anchor-creation\">Manual Anchor Creation\u003C/h3>\n\u003Cp>Create custom anchors for precise navigation control:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">\u003Cspan class=\"hljs-section\">## Database Configuration {#db-config}\u003C/span>\n\nConfigure your database connection settings:\n\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">a\u003C/span> \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"connection-string"\u003C/span>>\u003C/span>\u003C/span>\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">a\u003C/span>>\u003C/span>\u003C/span>\n\u003Cspan class=\"hljs-section\">### Connection String Format\u003C/span>\n\nThe connection string follows this pattern:\n\u003C/code>\u003C/pre>\u003Ch3 id=\"cross-reference-navigation\">Cross-Reference Navigation\u003C/h3>\n\u003Cp>Link between different sections and documents:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">\u003Cspan class=\"hljs-section\">## User Management\u003C/span>\n\nFor authentication setup, see the [\u003Cspan class=\"hljs-string\">Authentication Methods\u003C/span>](\u003Cspan class=\"hljs-link\">#authentication-methods\u003C/span>) section.\n\nFor database configuration, refer to [\u003Cspan class=\"hljs-string\">Database Configuration\u003C/span>](\u003Cspan class=\"hljs-link\">#db-config\u003C/span>).\n\nFor advanced topics, consult our [\u003Cspan class=\"hljs-string\">Advanced Configuration Guide\u003C/span>](\u003Cspan class=\"hljs-link\">advanced-config.md#security-settings\u003C/span>).\n\u003C/code>\u003C/pre>\u003Ch2 id=\"platform-specific-anchor-implementations\">Platform-Specific Anchor Implementations\u003C/h2>\n\u003Ch3 id=\"github-markdown-anchors\">GitHub Markdown Anchors\u003C/h3>\n\u003Cp>GitHub automatically generates anchors from headings with specific formatting rules:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">\u003Cspan class=\"hljs-section\"># How to Use GitHub Actions\u003C/span>\n<!-- Anchor: #how-to-use-github-actions -->\n\n\u003Cspan class=\"hljs-section\">## Setting Up Your First Workflow\u003C/span>\n<!-- Anchor: #setting-up-your-first-workflow -->\n\n\u003Cspan class=\"hljs-section\">### Step 1: Create .github Directory\u003C/span>\n<!-- Anchor: #step-1-create-github-directory -->\n\n\u003Cspan class=\"hljs-section\">### Step 2: Define Workflow YAML\u003C/span>\n<!-- Anchor: #step-2-define-workflow-yaml -->\n\n<!-- GitHub anchor links -->\n[\u003Cspan class=\"hljs-string\">Jump to workflow setup\u003C/span>](\u003Cspan class=\"hljs-link\">#setting-up-your-first-workflow\u003C/span>)\n[\u003Cspan class=\"hljs-string\">See YAML definition\u003C/span>](\u003Cspan class=\"hljs-link\">#step-2-define-workflow-yaml\u003C/span>)\n\u003C/code>\u003C/pre>\u003Cp>\u003Cstrong>GitHub Anchor Rules:\u003C/strong>\u003C/p>\n\u003Cul>\n\u003Cli>Converts to lowercase\u003C/li>\n\u003Cli>Replaces spaces with hyphens\u003C/li>\n\u003Cli>Removes special characters\u003C/li>\n\u003Cli>Handles duplicate headings by appending numbers\u003C/li>\n\u003C/ul>\n\u003Ch3 id=\"gitlab-anchor-links\">GitLab Anchor Links\u003C/h3>\n\u003Cp>GitLab supports enhanced anchor features with custom IDs:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">\u003Cspan class=\"hljs-section\"># Project Documentation {#main-docs}\u003C/span>\n\n\u003Cspan class=\"hljs-section\">## Installation Guide {#install}\u003C/span>\n\nFollow these steps to install the application:\n\n\u003Cspan class=\"hljs-section\">### Prerequisites {data-anchor="prereqs"}\u003C/span>\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> Node.js 16.0 or later\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> PostgreSQL 12.0 or later\n\n<!-- GitLab anchor references -->\n[\u003Cspan class=\"hljs-string\">Installation steps\u003C/span>](\u003Cspan class=\"hljs-link\">#install\u003C/span>)\n[\u003Cspan class=\"hljs-string\">Check prerequisites\u003C/span>](\u003Cspan class=\"hljs-link\">#prereqs\u003C/span>)\n\u003C/code>\u003C/pre>\u003Ch3 id=\"jekyll-anchor-links\">Jekyll Anchor Links\u003C/h3>\n\u003Cp>Jekyll provides automatic anchor generation with customization options:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-liquid\"><!-- _config.yml configuration -->\nkramdown:\n  auto_ids: true\n  smart_quotes: lsquo,rsquo,ldquo,rdquo\n  syntax_highlighter: rouge\n  toc_levels: 1..6\n\n<!-- Template with anchor links -->\n<nav class="table-of-contents">\n  <h2>Table of Contents</h2>\n  <ul>\n    <li><a href="#introduction">Introduction</a></li>\n    <li><a href="#getting-started">Getting Started</a></li>\n    <li><a href="#advanced-usage">Advanced Usage</a></li>\n  </ul>\n</nav>\n\n<!-- Content with anchors -->\n## Introduction {#introduction}\nWelcome to our documentation.\n\n## Getting Started {#getting-started}\nLet's begin with basic setup.\n\n## Advanced Usage {#advanced-usage}\nExplore advanced features and customization.\n\u003C/code>\u003C/pre>\u003Ch2 id=\"advanced-navigation-patterns\">Advanced Navigation Patterns\u003C/h2>\n\u003Ch3 id=\"hierarchical-navigation-systems\">Hierarchical Navigation Systems\u003C/h3>\n\u003Cp>Create nested navigation structures for complex documents:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">\u003Cspan class=\"hljs-section\"># Complete API Reference\u003C/span>\n\n\u003Cspan class=\"hljs-section\">## Table of Contents\u003C/span>\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> [\u003Cspan class=\"hljs-string\">Authentication\u003C/span>](\u003Cspan class=\"hljs-link\">#authentication\u003C/span>)\n\u003Cspan class=\"hljs-bullet\">  -\u003C/span> [\u003Cspan class=\"hljs-string\">OAuth 2.0\u003C/span>](\u003Cspan class=\"hljs-link\">#oauth-20\u003C/span>)\n\u003Cspan class=\"hljs-bullet\">    -\u003C/span> [\u003Cspan class=\"hljs-string\">Authorization Code Flow\u003C/span>](\u003Cspan class=\"hljs-link\">#authorization-code-flow\u003C/span>)\n\u003Cspan class=\"hljs-bullet\">    -\u003C/span> [\u003Cspan class=\"hljs-string\">Client Credentials Flow\u003C/span>](\u003Cspan class=\"hljs-link\">#client-credentials-flow\u003C/span>)\n\u003Cspan class=\"hljs-bullet\">  -\u003C/span> [\u003Cspan class=\"hljs-string\">API Keys\u003C/span>](\u003Cspan class=\"hljs-link\">#api-keys\u003C/span>)\n\u003Cspan class=\"hljs-bullet\">    -\u003C/span> [\u003Cspan class=\"hljs-string\">Creating API Keys\u003C/span>](\u003Cspan class=\"hljs-link\">#creating-api-keys\u003C/span>)\n\u003Cspan class=\"hljs-bullet\">    -\u003C/span> [\u003Cspan class=\"hljs-string\">Key Management\u003C/span>](\u003Cspan class=\"hljs-link\">#key-management\u003C/span>)\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> [\u003Cspan class=\"hljs-string\">Endpoints\u003C/span>](\u003Cspan class=\"hljs-link\">#endpoints\u003C/span>)\n\u003Cspan class=\"hljs-bullet\">  -\u003C/span> [\u003Cspan class=\"hljs-string\">User Management\u003C/span>](\u003Cspan class=\"hljs-link\">#user-management\u003C/span>)\n\u003Cspan class=\"hljs-bullet\">    -\u003C/span> [\u003Cspan class=\"hljs-string\">Create User\u003C/span>](\u003Cspan class=\"hljs-link\">#create-user\u003C/span>)\n\u003Cspan class=\"hljs-bullet\">    -\u003C/span> [\u003Cspan class=\"hljs-string\">Update User\u003C/span>](\u003Cspan class=\"hljs-link\">#update-user\u003C/span>)\n\u003Cspan class=\"hljs-bullet\">    -\u003C/span> [\u003Cspan class=\"hljs-string\">Delete User\u003C/span>](\u003Cspan class=\"hljs-link\">#delete-user\u003C/span>)\n\u003Cspan class=\"hljs-bullet\">  -\u003C/span> [\u003Cspan class=\"hljs-string\">Data Operations\u003C/span>](\u003Cspan class=\"hljs-link\">#data-operations\u003C/span>)\n\u003Cspan class=\"hljs-bullet\">    -\u003C/span> [\u003Cspan class=\"hljs-string\">Retrieve Data\u003C/span>](\u003Cspan class=\"hljs-link\">#retrieve-data\u003C/span>)\n\u003Cspan class=\"hljs-bullet\">    -\u003C/span> [\u003Cspan class=\"hljs-string\">Submit Data\u003C/span>](\u003Cspan class=\"hljs-link\">#submit-data\u003C/span>)\n\n\u003Cspan class=\"hljs-section\">## Authentication\u003C/span>\n\n\u003Cspan class=\"hljs-section\">### OAuth 2.0\u003C/span>\n\nOAuth 2.0 provides secure, standardized authentication:\n\n\u003Cspan class=\"hljs-section\">#### Authorization Code Flow\u003C/span>\n\nThe authorization code flow is recommended for web applications:\n\n\u003Cspan class=\"hljs-bullet\">1.\u003C/span> \u003Cspan class=\"hljs-strong\">**Redirect User**\u003C/span>: Direct users to authorization server\n\u003Cspan class=\"hljs-bullet\">2.\u003C/span> \u003Cspan class=\"hljs-strong\">**Receive Code**\u003C/span>: Handle authorization code callback\n\u003Cspan class=\"hljs-bullet\">3.\u003C/span> \u003Cspan class=\"hljs-strong\">**Exchange Token**\u003C/span>: Trade code for access token\n\u003Cspan class=\"hljs-bullet\">4.\u003C/span> \u003Cspan class=\"hljs-strong\">**Make Requests**\u003C/span>: Use token for API requests\n\n[\u003Cspan class=\"hljs-string\">Back to Authentication\u003C/span>](\u003Cspan class=\"hljs-link\">#authentication\u003C/span>) | [\u003Cspan class=\"hljs-string\">Skip to API Keys\u003C/span>](\u003Cspan class=\"hljs-link\">#api-keys\u003C/span>)\n\n\u003Cspan class=\"hljs-section\">#### Client Credentials Flow\u003C/span>\n\nServer-to-server authentication using client credentials:\n\n\u003Cspan class=\"hljs-bullet\">1.\u003C/span> \u003Cspan class=\"hljs-strong\">**Authenticate Client**\u003C/span>: Verify client credentials\n\u003Cspan class=\"hljs-bullet\">2.\u003C/span> \u003Cspan class=\"hljs-strong\">**Request Token**\u003C/span>: Obtain access token directly\n\u003Cspan class=\"hljs-bullet\">3.\u003C/span> \u003Cspan class=\"hljs-strong\">**Use Token**\u003C/span>: Include token in API requests\n\n[\u003Cspan class=\"hljs-string\">Back to OAuth\u003C/span>](\u003Cspan class=\"hljs-link\">#oauth-20\u003C/span>) | [\u003Cspan class=\"hljs-string\">Next: API Keys\u003C/span>](\u003Cspan class=\"hljs-link\">#api-keys\u003C/span>)\n\u003C/code>\u003C/pre>\u003Ch3 id=\"cross-document-navigation\">Cross-Document Navigation\u003C/h3>\n\u003Cp>Link between multiple documentation files:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\"><!-- main-guide.md -->\n\u003Cspan class=\"hljs-section\"># User Guide\u003C/span>\n\n\u003Cspan class=\"hljs-section\">## Quick Start\u003C/span>\nGet started quickly with our [\u003Cspan class=\"hljs-string\">Installation Guide\u003C/span>](\u003Cspan class=\"hljs-link\">installation.md#quick-setup\u003C/span>).\n\n\u003Cspan class=\"hljs-section\">## Configuration\u003C/span>\nFor detailed configuration options, see [\u003Cspan class=\"hljs-string\">Configuration Reference\u003C/span>](\u003Cspan class=\"hljs-link\">config-reference.md\u003C/span>).\n\nFor environment-specific settings:\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> [\u003Cspan class=\"hljs-string\">Development Setup\u003C/span>](\u003Cspan class=\"hljs-link\">config-reference.md#development-environment\u003C/span>)\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> [\u003Cspan class=\"hljs-string\">Production Configuration\u003C/span>](\u003Cspan class=\"hljs-link\">config-reference.md#production-environment\u003C/span>)\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> [\u003Cspan class=\"hljs-string\">Testing Settings\u003C/span>](\u003Cspan class=\"hljs-link\">config-reference.md#test-configuration\u003C/span>)\n\n\u003Cspan class=\"hljs-section\">## Troubleshooting\u003C/span>\nCommon issues and solutions are documented in our [\u003Cspan class=\"hljs-string\">Troubleshooting Guide\u003C/span>](\u003Cspan class=\"hljs-link\">troubleshooting.md\u003C/span>).\n\nSpecific problem areas:\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> [\u003Cspan class=\"hljs-string\">Connection Issues\u003C/span>](\u003Cspan class=\"hljs-link\">troubleshooting.md#connection-problems\u003C/span>)\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> [\u003Cspan class=\"hljs-string\">Performance Problems\u003C/span>](\u003Cspan class=\"hljs-link\">troubleshooting.md#performance-issues\u003C/span>)\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> [\u003Cspan class=\"hljs-string\">Authentication Errors\u003C/span>](\u003Cspan class=\"hljs-link\">troubleshooting.md#auth-errors\u003C/span>)\n\n<!-- installation.md -->\n\u003Cspan class=\"hljs-section\"># Installation Guide\u003C/span>\n\n\u003Cspan class=\"hljs-section\">## Quick Setup {#quick-setup}\u003C/span>\nFast installation for development environments.\n\n\u003Cspan class=\"hljs-section\">## Production Setup {#production-setup}\u003C/span>\nComprehensive installation for production use.\n\nReturn to [\u003Cspan class=\"hljs-string\">User Guide\u003C/span>](\u003Cspan class=\"hljs-link\">main-guide.md\u003C/span>) or continue with [\u003Cspan class=\"hljs-string\">Configuration\u003C/span>](\u003Cspan class=\"hljs-link\">config-reference.md\u003C/span>).\n\u003C/code>\u003C/pre>\u003Ch3 id=\"interactive-table-of-contents\">Interactive Table of Contents\u003C/h3>\n\u003Cp>Generate dynamic navigation with JavaScript enhancement:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-html\">\u003Cspan class=\"hljs-comment\"><!-- Enhanced TOC with JavaScript -->\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\">"toc-container"\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">nav\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"table-of-contents"\u003C/span> \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"toc"\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">h2\u003C/span>>\u003C/span>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\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"toc-list"\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-comment\"><!-- Dynamically generated -->\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\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">script\u003C/span>>\u003C/span>\u003Cspan class=\"language-javascript\">\n\u003Cspan class=\"hljs-comment\">// Generate TOC from headings\u003C/span>\n\u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'DOMContentLoaded'\u003C/span>, \u003Cspan class=\"hljs-keyword\">function\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> headings = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'h1, h2, h3, h4, h5, h6'\u003C/span>);\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> tocList = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">getElementById\u003C/span>(\u003Cspan class=\"hljs-string\">'toc-list'\u003C/span>);\n    \n    headings.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-keyword\">function\u003C/span>(\u003Cspan class=\"hljs-params\">heading, index\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Create anchor if none exists\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-string\">'heading-'\u003C/span> + index;\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Create TOC entry\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> listItem = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'li'\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> = \u003Cspan class=\"hljs-string\">'#'\u003C/span> + heading.\u003Cspan class=\"hljs-property\">id\u003C/span>;\n        link.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = heading.\u003Cspan class=\"hljs-property\">textContent\u003C/span>;\n        link.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'toc-level-'\u003C/span> + heading.\u003Cspan class=\"hljs-property\">tagName\u003C/span>.\u003Cspan class=\"hljs-title function_\">toLowerCase\u003C/span>();\n        \n        listItem.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(link);\n        tocList.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(listItem);\n    });\n});\n\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">script\u003C/span>>\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch2 id=\"navigation-enhancement-techniques\">Navigation Enhancement Techniques\u003C/h2>\n\u003Ch3 id=\"smooth-scrolling-implementation\">Smooth Scrolling Implementation\u003C/h3>\n\u003Cp>Add smooth scrolling behavior for better user experience:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-css\">\u003Cspan class=\"hljs-comment\">/* CSS for smooth scrolling */\u003C/span>\n\u003Cspan class=\"hljs-selector-tag\">html\u003C/span> {\n    scroll-behavior: smooth;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Alternative: JavaScript implementation */\u003C/span>\n<script>\ndocument\u003Cspan class=\"hljs-selector-class\">.querySelectorAll\u003C/span>('\u003Cspan class=\"hljs-selector-tag\">a\u003C/span>\u003Cspan class=\"hljs-selector-attr\">[href^=\u003Cspan class=\"hljs-string\">"#"\u003C/span>]\u003C/span>')\u003Cspan class=\"hljs-selector-class\">.forEach\u003C/span>(anchor => {\n    anchor\u003Cspan class=\"hljs-selector-class\">.addEventListener\u003C/span>('click', function (e) {\n        e\u003Cspan class=\"hljs-selector-class\">.preventDefault\u003C/span>();\n        const target = document\u003Cspan class=\"hljs-selector-class\">.querySelector\u003C/span>(this\u003Cspan class=\"hljs-selector-class\">.getAttribute\u003C/span>('href'));\n        if (target) {\n            target\u003Cspan class=\"hljs-selector-class\">.scrollIntoView\u003C/span>({\n                behavior: \u003Cspan class=\"hljs-string\">'smooth'\u003C/span>,\n                block: \u003Cspan class=\"hljs-string\">'start'\u003C/span>\n            });\n        }\n    });\n});\n</script>\n\u003C/code>\u003C/pre>\u003Ch3 id=\"back-to-top-links\">Back-to-Top Links\u003C/h3>\n\u003Cp>Implement convenient return navigation:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">\u003Cspan class=\"hljs-section\">## Long Section Content\u003C/span>\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n\n\u003Cspan class=\"hljs-section\">### Subsection A\u003C/span>\n\nDetailed content here...\n\n[\u003Cspan class=\"hljs-string\">↑ Back to top\u003C/span>](\u003Cspan class=\"hljs-link\">#top\u003C/span>)\n\n\u003Cspan class=\"hljs-section\">### Subsection B  \u003C/span>\n\nMore detailed content...\n\n[\u003Cspan class=\"hljs-string\">↑ Back to top\u003C/span>](\u003Cspan class=\"hljs-link\">#top\u003C/span>) | [\u003Cspan class=\"hljs-string\">← Previous section\u003C/span>](\u003Cspan class=\"hljs-link\">#subsection-a\u003C/span>)\n\n\u003Cspan class=\"hljs-section\">### Subsection C\u003C/span>\n\nFinal content in this section...\n\n[\u003Cspan class=\"hljs-string\">↑ Back to top\u003C/span>](\u003Cspan class=\"hljs-link\">#top\u003C/span>) | [\u003Cspan class=\"hljs-string\">← Previous\u003C/span>](\u003Cspan class=\"hljs-link\">#subsection-b\u003C/span>) | [\u003Cspan class=\"hljs-string\">Next section →\u003C/span>](\u003Cspan class=\"hljs-link\">#next-major-section\u003C/span>)\n\u003C/code>\u003C/pre>\u003Ch3 id=\"contextual-navigation\">Contextual Navigation\u003C/h3>\n\u003Cp>Provide section-specific navigation aids:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">\u003Cspan class=\"hljs-section\">## API Endpoints\u003C/span>\n\n\u003Cspan class=\"hljs-quote\">> \u003Cspan class=\"hljs-strong\">**Navigation**\u003C/span>: [\u003Cspan class=\"hljs-string\">Overview\u003C/span>](\u003Cspan class=\"hljs-link\">#api-overview\u003C/span>) | [\u003Cspan class=\"hljs-string\">Authentication\u003C/span>](\u003Cspan class=\"hljs-link\">#authentication\u003C/span>) | [\u003Cspan class=\"hljs-string\">Rate Limits\u003C/span>](\u003Cspan class=\"hljs-link\">#rate-limits\u003C/span>) | [\u003Cspan class=\"hljs-string\">Error Handling\u003C/span>](\u003Cspan class=\"hljs-link\">#error-handling\u003C/span>)\u003C/span>\n\n\u003Cspan class=\"hljs-section\">### User Endpoints\u003C/span>\n\n\u003Cspan class=\"hljs-section\">#### GET /users\u003C/span>\n\nRetrieve user information:\n\n\u003Cspan class=\"hljs-code\">```http\nGET /api/v1/users/{user_id}\nAuthorization: Bearer {access_token}\u003C/span>\n\u003C/code>\u003C/pre>\u003Cp>\u003Cstrong>Related sections\u003C/strong>: \u003Ca href=\"#authentication\">Authentication\u003C/a> | \u003Ca href=\"#user-management\">User Management\u003C/a> | \u003Ca href=\"#error-responses\">Error Responses\u003C/a>\u003C/p>\n\u003Ch4 id=\"post-users\">POST /users\u003C/h4>\n\u003Cp>Create new user account:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-http\">POST /api/v1/users\n\u003Cspan class=\"hljs-attribute\">Content-Type\u003C/span>\u003Cspan class=\"hljs-punctuation\">: \u003C/span>application/json\n\u003Cspan class=\"hljs-attribute\">Authorization\u003C/span>\u003Cspan class=\"hljs-punctuation\">: \u003C/span>Bearer {access_token}\n\n{\n  "username": "newuser",\n  "email": "user@example.com"\n}\n\u003C/code>\u003C/pre>\u003Cp>\u003Cstrong>See also\u003C/strong>: \u003Ca href=\"#user-creation-examples\">User Creation Examples\u003C/a> | \u003Ca href=\"#input-validation\">Validation Rules\u003C/a>\u003C/p>\n\u003Cpre>\u003Ccode>\n## Accessibility and Usability Features\n\n### Screen Reader Optimization\n\nEnsure anchor links work well with assistive technologies:\n\n```markdown\n<!-- Accessible navigation structure -->\n<nav aria-label="Document navigation">\n  <h2 id="toc-heading">Table of Contents</h2>\n  <ul role="list" aria-labelledby="toc-heading">\n    <li><a href="#introduction" aria-describedby="intro-desc">Introduction</a>\n        <span id="intro-desc" class="sr-only">Overview and getting started</span></li>\n    <li><a href="#setup" aria-describedby="setup-desc">Setup Guide</a>\n        <span id="setup-desc" class="sr-only">Installation and configuration</span></li>\n    <li><a href="#examples" aria-describedby="examples-desc">Examples</a>\n        <span id="examples-desc" class="sr-only">Code examples and tutorials</span></li>\n  </ul>\n</nav>\n\n<!-- Skip links for keyboard navigation -->\n<a href="#main-content" class="skip-link">Skip to main content</a>\n<a href="#navigation" class="skip-link">Skip to navigation</a>\n\n<main id="main-content">\n  <h1 id="introduction">Introduction</h1>\n  <!-- Main content -->\n</main>\n\u003C/code>\u003C/pre>\u003Ch3 id=\"keyboard-navigation-support\">Keyboard Navigation Support\u003C/h3>\n\u003Cp>Implement keyboard-friendly navigation:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-html\">\u003Cspan class=\"hljs-comment\"><!-- Focusable navigation elements -->\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">nav\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"document-nav"\u003C/span> \u003Cspan class=\"hljs-attr\">role\u003C/span>=\u003Cspan class=\"hljs-string\">"navigation"\u003C/span> \u003Cspan class=\"hljs-attr\">aria-label\u003C/span>=\u003Cspan class=\"hljs-string\">"Document sections"\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\">li\u003C/span>>\u003C/span>\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\">tabindex\u003C/span>=\u003Cspan class=\"hljs-string\">"0"\u003C/span>>\u003C/span>Section 1\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">a\u003C/span>>\u003C/span>\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>>\u003C/span>\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\">tabindex\u003C/span>=\u003Cspan class=\"hljs-string\">"0"\u003C/span>>\u003C/span>Section 2\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">a\u003C/span>>\u003C/span>\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>>\u003C/span>\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">a\u003C/span> \u003Cspan class=\"hljs-attr\">href\u003C/span>=\u003Cspan class=\"hljs-string\">"#section3"\u003C/span> \u003Cspan class=\"hljs-attr\">tabindex\u003C/span>=\u003Cspan class=\"hljs-string\">"0"\u003C/span>>\u003C/span>Section 3\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">a\u003C/span>>\u003C/span>\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-tag\"><\u003Cspan class=\"hljs-name\">script\u003C/span>>\u003C/span>\u003Cspan class=\"language-javascript\">\n\u003Cspan class=\"hljs-comment\">// Enhanced keyboard navigation\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-keyword\">function\u003C/span>(\u003Cspan class=\"hljs-params\">event\u003C/span>) {\n    \u003Cspan class=\"hljs-comment\">// Jump to sections with number keys\u003C/span>\n    \u003Cspan class=\"hljs-keyword\">if\u003C/span> (event.\u003Cspan class=\"hljs-property\">altKey\u003C/span> && event.\u003Cspan class=\"hljs-property\">key\u003C/span> >= \u003Cspan class=\"hljs-string\">'1'\u003C/span> && event.\u003Cspan class=\"hljs-property\">key\u003C/span> <= \u003Cspan class=\"hljs-string\">'9'\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> sectionNumber = \u003Cspan class=\"hljs-built_in\">parseInt\u003C/span>(event.\u003Cspan class=\"hljs-property\">key\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> section = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">getElementById\u003C/span>(\u003Cspan class=\"hljs-string\">'section'\u003C/span> + sectionNumber);\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (section) {\n            section.\u003Cspan class=\"hljs-title function_\">scrollIntoView\u003C/span>({ \u003Cspan class=\"hljs-attr\">behavior\u003C/span>: \u003Cspan class=\"hljs-string\">'smooth'\u003C/span> });\n            section.\u003Cspan class=\"hljs-title function_\">focus\u003C/span>();\n        }\n    }\n    \n    \u003Cspan class=\"hljs-comment\">// Navigate with arrow keys in TOC\u003C/span>\n    \u003Cspan class=\"hljs-keyword\">if\u003C/span> (event.\u003Cspan class=\"hljs-property\">target\u003C/span>.\u003Cspan class=\"hljs-title function_\">closest\u003C/span>(\u003Cspan class=\"hljs-string\">'.toc-container'\u003C/span>)) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> links = event.\u003Cspan class=\"hljs-property\">target\u003C/span>.\u003Cspan class=\"hljs-title function_\">closest\u003C/span>(\u003Cspan class=\"hljs-string\">'.toc-container'\u003C/span>).\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'a'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> currentIndex = \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">from\u003C/span>(links).\u003Cspan class=\"hljs-title function_\">indexOf\u003C/span>(event.\u003Cspan class=\"hljs-property\">target\u003C/span>);\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (event.\u003Cspan class=\"hljs-property\">key\u003C/span> === \u003Cspan class=\"hljs-string\">'ArrowDown'\u003C/span> && currentIndex < links.\u003Cspan class=\"hljs-property\">length\u003C/span> - \u003Cspan class=\"hljs-number\">1\u003C/span>) {\n            links[currentIndex + \u003Cspan class=\"hljs-number\">1\u003C/span>].\u003Cspan class=\"hljs-title function_\">focus\u003C/span>();\n            event.\u003Cspan class=\"hljs-title function_\">preventDefault\u003C/span>();\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (event.\u003Cspan class=\"hljs-property\">key\u003C/span> === \u003Cspan class=\"hljs-string\">'ArrowUp'\u003C/span> && currentIndex > \u003Cspan class=\"hljs-number\">0\u003C/span>) {\n            links[currentIndex - \u003Cspan class=\"hljs-number\">1\u003C/span>].\u003Cspan class=\"hljs-title function_\">focus\u003C/span>();\n            event.\u003Cspan class=\"hljs-title function_\">preventDefault\u003C/span>();\n        }\n    }\n});\n\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">script\u003C/span>>\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch2 id=\"advanced-anchor-techniques\">Advanced Anchor Techniques\u003C/h2>\n\u003Ch3 id=\"dynamic-content-anchors\">Dynamic Content Anchors\u003C/h3>\n\u003Cp>Handle dynamically generated content:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-javascript\">\u003Cspan class=\"hljs-comment\">// Create anchors for dynamically loaded content\u003C/span>\n\u003Cspan class=\"hljs-keyword\">function\u003C/span> \u003Cspan class=\"hljs-title function_\">addAnchorsToContent\u003C/span>(\u003Cspan class=\"hljs-params\">container\u003C/span>) {\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> headings = container.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'h1, h2, h3, h4, h5, h6'\u003C/span>);\n    \n    headings.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">heading, index\u003C/span>) =>\u003C/span> {\n        \u003Cspan class=\"hljs-comment\">// Generate unique ID\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> id = heading.\u003Cspan class=\"hljs-property\">textContent\u003C/span>\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_\">trim\u003C/span>();\n        \n        \u003Cspan class=\"hljs-comment\">// Handle duplicates\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> finalId = id;\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> counter = \u003Cspan class=\"hljs-number\">1\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">while\u003C/span> (\u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">getElementById\u003C/span>(finalId)) {\n            finalId = \u003Cspan class=\"hljs-string\">`\u003Cspan class=\"hljs-subst\">${id}\u003C/span>-\u003Cspan class=\"hljs-subst\">${counter}\u003C/span>`\u003C/span>;\n            counter++;\n        }\n        \n        heading.\u003Cspan class=\"hljs-property\">id\u003C/span> = finalId;\n        \n        \u003Cspan class=\"hljs-comment\">// Add anchor link\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> anchor = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'a'\u003C/span>);\n        anchor.\u003Cspan class=\"hljs-property\">href\u003C/span> = \u003Cspan class=\"hljs-string\">'#'\u003C/span> + finalId;\n        anchor.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'heading-anchor'\u003C/span>;\n        anchor.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'aria-label'\u003C/span>, \u003Cspan class=\"hljs-string\">`Link to \u003Cspan class=\"hljs-subst\">${heading.textContent}\u003C/span>`\u003C/span>);\n        anchor.\u003Cspan class=\"hljs-property\">innerHTML\u003C/span> = \u003Cspan class=\"hljs-string\">'🔗'\u003C/span>;\n        \n        heading.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(anchor);\n    });\n}\n\n\u003Cspan class=\"hljs-comment\">// Auto-apply to new content\u003C/span>\n\u003Cspan class=\"hljs-keyword\">const\u003C/span> observer = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">MutationObserver\u003C/span>(\u003Cspan class=\"hljs-keyword\">function\u003C/span>(\u003Cspan class=\"hljs-params\">mutations\u003C/span>) {\n    mutations.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-keyword\">function\u003C/span>(\u003Cspan class=\"hljs-params\">mutation\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (mutation.\u003Cspan class=\"hljs-property\">type\u003C/span> === \u003Cspan class=\"hljs-string\">'childList'\u003C/span>) {\n            mutation.\u003Cspan class=\"hljs-property\">addedNodes\u003C/span>.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-keyword\">function\u003C/span>(\u003Cspan class=\"hljs-params\">node\u003C/span>) {\n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (node.\u003Cspan class=\"hljs-property\">nodeType\u003C/span> === \u003Cspan class=\"hljs-number\">1\u003C/span>) { \u003Cspan class=\"hljs-comment\">// Element node\u003C/span>\n                    \u003Cspan class=\"hljs-title function_\">addAnchorsToContent\u003C/span>(node);\n                }\n            });\n        }\n    });\n});\n\nobserver.\u003Cspan class=\"hljs-title function_\">observe\u003C/span>(\u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-property\">body\u003C/span>, {\n    \u003Cspan class=\"hljs-attr\">childList\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n    \u003Cspan class=\"hljs-attr\">subtree\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>\n});\n\u003C/code>\u003C/pre>\u003Ch3 id=\"url-fragment-handling\">URL Fragment Handling\u003C/h3>\n\u003Cp>Manage URL fragments and browser history:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-javascript\">\u003Cspan class=\"hljs-comment\">// Enhanced fragment handling\u003C/span>\n\u003Cspan class=\"hljs-keyword\">class\u003C/span> \u003Cspan class=\"hljs-title class_\">FragmentManager\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-title function_\">setupEventListeners\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">highlightCurrentSection\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">setupEventListeners\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Handle hash changes\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'hashchange'\u003C/span>, \u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">highlightCurrentSection\u003C/span>();\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">scrollToFragment\u003C/span>();\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// Handle page load with fragment\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'load'\u003C/span>, \u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-property\">location\u003C/span>.\u003Cspan class=\"hljs-property\">hash\u003C/span>) {\n                \u003Cspan class=\"hljs-built_in\">setTimeout\u003C/span>(\u003Cspan class=\"hljs-function\">() =>\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">scrollToFragment\u003C/span>(), \u003Cspan class=\"hljs-number\">100\u003C/span>);\n            }\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">highlightCurrentSection\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Remove previous highlights\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'.current-section'\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\">'current-section'\u003C/span>);\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// Highlight current section\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-property\">location\u003C/span>.\u003Cspan class=\"hljs-property\">hash\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> target = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-property\">location\u003C/span>.\u003Cspan class=\"hljs-property\">hash\u003C/span>);\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (target) {\n                target.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">add\u003C/span>(\u003Cspan class=\"hljs-string\">'current-section'\u003C/span>);\n                \n                \u003Cspan class=\"hljs-comment\">// Update TOC active state\u003C/span>\n                \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'.toc a.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\">const\u003C/span> tocLink = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">`.toc a[href="\u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">window\u003C/span>.location.hash}\u003C/span>"]`\u003C/span>);\n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (tocLink) {\n                    tocLink.\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    \n    \u003Cspan class=\"hljs-title function_\">scrollToFragment\u003C/span>(\u003Cspan class=\"hljs-params\">\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) \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> target = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(hash);\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (target) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> offset = \u003Cspan class=\"hljs-number\">80\u003C/span>; \u003Cspan class=\"hljs-comment\">// Account for fixed header\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> elementPosition = target.\u003Cspan class=\"hljs-title function_\">getBoundingClientRect\u003C/span>().\u003Cspan class=\"hljs-property\">top\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> offsetPosition = elementPosition + \u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-property\">pageYOffset\u003C/span> - offset;\n            \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>: offsetPosition,\n                \u003Cspan class=\"hljs-attr\">behavior\u003C/span>: \u003Cspan class=\"hljs-string\">'smooth'\u003C/span>\n            });\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">updateFragment\u003C/span>(\u003Cspan class=\"hljs-params\">fragment\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>, fragment);\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">highlightCurrentSection\u003C/span>();\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">// Initialize fragment manager\u003C/span>\n\u003Cspan class=\"hljs-keyword\">const\u003C/span> fragmentManager = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">FragmentManager\u003C/span>();\n\u003C/code>\u003C/pre>\u003Ch3 id=\"cross-platform-compatibility\">Cross-Platform Compatibility\u003C/h3>\n\u003Cp>Ensure anchor links work across different Markdown processors:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\"><!-- Universal anchor syntax -->\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">a\u003C/span> \u003Cspan class=\"hljs-attr\">name\u003C/span>=\u003Cspan class=\"hljs-string\">"section-anchor"\u003C/span>>\u003C/span>\u003C/span>\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">a\u003C/span>>\u003C/span>\u003C/span>\n\u003Cspan class=\"hljs-section\">## Section Title {#section-anchor}\u003C/span>\n\n<!-- Alternative approaches -->\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\u003C/span> \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"another-anchor"\u003C/span>>\u003C/span>\u003C/span>\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">span\u003C/span>>\u003C/span>\u003C/span>\n\u003Cspan class=\"hljs-section\">### Another Section\u003C/span>\n\n<!-- Platform-specific enhancements -->\n{::options auto\u003Cspan class=\"hljs-emphasis\">_ids="true" /}  <!-- Kramdown -->\n<!-- {#custom-id} -->             <!-- Pandoc -->\n{: #element-id}                   <!-- Markdown Extra -->\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch2 id=\"documentation-workflow-integration\">Documentation Workflow Integration\u003C/h2>\n\u003Ch3 id=\"automated-link-validation\">Automated Link Validation\u003C/h3>\n\u003Cp>Validate internal links with scripts:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-python\">\u003Cspan class=\"hljs-comment\"># Link validation script\u003C/span>\n\u003Cspan class=\"hljs-keyword\">import\u003C/span> re\n\u003Cspan class=\"hljs-keyword\">import\u003C/span> os\n\u003Cspan class=\"hljs-keyword\">from\u003C/span> pathlib \u003Cspan class=\"hljs-keyword\">import\u003C/span> Path\n\n\u003Cspan class=\"hljs-keyword\">def\u003C/span> \u003Cspan class=\"hljs-title function_\">validate_internal_links\u003C/span>(\u003Cspan class=\"hljs-params\">markdown_file\u003C/span>):\n    \u003Cspan class=\"hljs-string\">"""Validate internal anchor links in Markdown file"""\u003C/span>\n    \u003Cspan class=\"hljs-keyword\">with\u003C/span> \u003Cspan class=\"hljs-built_in\">open\u003C/span>(markdown_file, \u003Cspan class=\"hljs-string\">'r'\u003C/span>, encoding=\u003Cspan class=\"hljs-string\">'utf-8'\u003C/span>) \u003Cspan class=\"hljs-keyword\">as\u003C/span> f:\n        content = f.read()\n    \n    \u003Cspan class=\"hljs-comment\"># Extract headings and their generated anchors\u003C/span>\n    heading_pattern = \u003Cspan class=\"hljs-string\">r'^#{1,6}\\s+(.+?)(?:\\s*\\{#([^}]+)\\})?$'\u003C/span>\n    headings = re.findall(heading_pattern, content, re.MULTILINE)\n    \n    valid_anchors = \u003Cspan class=\"hljs-built_in\">set\u003C/span>()\n    \u003Cspan class=\"hljs-keyword\">for\u003C/span> heading_text, custom_id \u003Cspan class=\"hljs-keyword\">in\u003C/span> headings:\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> custom_id:\n            valid_anchors.add(custom_id)\n        \u003Cspan class=\"hljs-keyword\">else\u003C/span>:\n            \u003Cspan class=\"hljs-comment\"># Generate default anchor from heading text\u003C/span>\n            anchor = heading_text.lower().replace(\u003Cspan class=\"hljs-string\">' '\u003C/span>, \u003Cspan class=\"hljs-string\">'-'\u003C/span>).replace(\u003Cspan class=\"hljs-string\">'#'\u003C/span>, \u003Cspan class=\"hljs-string\">''\u003C/span>)\n            anchor = re.sub(\u003Cspan class=\"hljs-string\">r'[^\\w-]'\u003C/span>, \u003Cspan class=\"hljs-string\">''\u003C/span>, anchor)\n            valid_anchors.add(anchor)\n    \n    \u003Cspan class=\"hljs-comment\"># Find internal anchor links\u003C/span>\n    link_pattern = \u003Cspan class=\"hljs-string\">r'\\[([^\\]]+)\\]\\(#([^)]+)\\)'\u003C/span>\n    links = re.findall(link_pattern, content)\n    \n    \u003Cspan class=\"hljs-comment\"># Validate links\u003C/span>\n    broken_links = []\n    \u003Cspan class=\"hljs-keyword\">for\u003C/span> link_text, anchor \u003Cspan class=\"hljs-keyword\">in\u003C/span> links:\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> anchor \u003Cspan class=\"hljs-keyword\">not\u003C/span> \u003Cspan class=\"hljs-keyword\">in\u003C/span> valid_anchors:\n            broken_links.append((link_text, anchor))\n    \n    \u003Cspan class=\"hljs-keyword\">return\u003C/span> {\n        \u003Cspan class=\"hljs-string\">'file'\u003C/span>: markdown_file,\n        \u003Cspan class=\"hljs-string\">'valid_anchors'\u003C/span>: valid_anchors,\n        \u003Cspan class=\"hljs-string\">'broken_links'\u003C/span>: broken_links,\n        \u003Cspan class=\"hljs-string\">'total_links'\u003C/span>: \u003Cspan class=\"hljs-built_in\">len\u003C/span>(links)\n    }\n\n\u003Cspan class=\"hljs-comment\"># Validate all markdown files\u003C/span>\n\u003Cspan class=\"hljs-keyword\">def\u003C/span> \u003Cspan class=\"hljs-title function_\">validate_all_links\u003C/span>(\u003Cspan class=\"hljs-params\">directory\u003C/span>):\n    results = []\n    \u003Cspan class=\"hljs-keyword\">for\u003C/span> md_file \u003Cspan class=\"hljs-keyword\">in\u003C/span> Path(directory).rglob(\u003Cspan class=\"hljs-string\">'*.md'\u003C/span>):\n        result = validate_internal_links(md_file)\n        results.append(result)\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> result[\u003Cspan class=\"hljs-string\">'broken_links'\u003C/span>]:\n            \u003Cspan class=\"hljs-built_in\">print\u003C/span>(\u003Cspan class=\"hljs-string\">f"❌ \u003Cspan class=\"hljs-subst\">{md_file}\u003C/span>:"\u003C/span>)\n            \u003Cspan class=\"hljs-keyword\">for\u003C/span> text, anchor \u003Cspan class=\"hljs-keyword\">in\u003C/span> result[\u003Cspan class=\"hljs-string\">'broken_links'\u003C/span>]:\n                \u003Cspan class=\"hljs-built_in\">print\u003C/span>(\u003Cspan class=\"hljs-string\">f"   Broken link: [\u003Cspan class=\"hljs-subst\">{text}\u003C/span>](#\u003Cspan class=\"hljs-subst\">{anchor}\u003C/span>)"\u003C/span>)\n        \u003Cspan class=\"hljs-keyword\">else\u003C/span>:\n            \u003Cspan class=\"hljs-built_in\">print\u003C/span>(\u003Cspan class=\"hljs-string\">f"✅ \u003Cspan class=\"hljs-subst\">{md_file}\u003C/span>: All \u003Cspan class=\"hljs-subst\">{result[\u003Cspan class=\"hljs-string\">'total_links'\u003C/span>]}\u003C/span> links valid"\u003C/span>)\n    \n    \u003Cspan class=\"hljs-keyword\">return\u003C/span> results\n\n\u003Cspan class=\"hljs-comment\"># Usage\u003C/span>\nvalidation_results = validate_all_links(\u003Cspan class=\"hljs-string\">'_posts'\u003C/span>)\n\u003C/code>\u003C/pre>\u003Ch3 id=\"toc-generation-tools\">TOC Generation Tools\u003C/h3>\n\u003Cp>Automate table of contents creation:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-javascript\">\u003Cspan class=\"hljs-comment\">// TOC generator for Markdown files\u003C/span>\n\u003Cspan class=\"hljs-keyword\">class\u003C/span> \u003Cspan class=\"hljs-title class_\">TOCGenerator\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\">maxDepth\u003C/span>: \u003Cspan class=\"hljs-number\">6\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">minDepth\u003C/span>: \u003Cspan class=\"hljs-number\">1\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">containerSelector\u003C/span>: \u003Cspan class=\"hljs-string\">'.toc-container'\u003C/span>,\n            ...options\n        };\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">generate\u003C/span>(\u003Cspan class=\"hljs-params\">content\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> headings = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">extractHeadings\u003C/span>(content);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> tocHTML = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">buildTOCHTML\u003C/span>(headings);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> updatedContent = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">insertTOC\u003C/span>(content, tocHTML);\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> updatedContent;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">extractHeadings\u003C/span>(\u003Cspan class=\"hljs-params\">content\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> headingRegex = \u003Cspan class=\"hljs-regexp\">/^(#{1,6})\\s+(.+?)(?:\\s*\\{#([^}]+)\\})?$/gm\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> headings = [];\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> match;\n        \n        \u003Cspan class=\"hljs-keyword\">while\u003C/span> ((match = headingRegex.\u003Cspan class=\"hljs-title function_\">exec\u003C/span>(content)) !== \u003Cspan class=\"hljs-literal\">null\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> level = match[\u003Cspan class=\"hljs-number\">1\u003C/span>].\u003Cspan class=\"hljs-property\">length\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> text = match[\u003Cspan class=\"hljs-number\">2\u003C/span>].\u003Cspan class=\"hljs-title function_\">trim\u003C/span>();\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> customId = match[\u003Cspan class=\"hljs-number\">3\u003C/span>];\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (level >= \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">minDepth\u003C/span> && level <= \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">maxDepth\u003C/span>) {\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> id = customId || \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">generateAnchor\u003C/span>(text);\n                headings.\u003Cspan class=\"hljs-title function_\">push\u003C/span>({ level, text, id });\n            }\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> headings;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">generateAnchor\u003C/span>(\u003Cspan class=\"hljs-params\">text\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> 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_\">trim\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">buildTOCHTML\u003C/span>(\u003Cspan class=\"hljs-params\">headings\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (headings.\u003Cspan class=\"hljs-property\">length\u003C/span> === \u003Cspan class=\"hljs-number\">0\u003C/span>) \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">''\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> html = \u003Cspan class=\"hljs-string\">'<nav class="table-of-contents">\\n'\u003C/span>;\n        html += \u003Cspan class=\"hljs-string\">'  <h2>Table of Contents</h2>\\n'\u003C/span>;\n        html += \u003Cspan class=\"hljs-string\">'  <ul>\\n'\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">const\u003C/span> heading \u003Cspan class=\"hljs-keyword\">of\u003C/span> headings) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> indent = \u003Cspan class=\"hljs-string\">'    '\u003C/span>.\u003Cspan class=\"hljs-title function_\">repeat\u003C/span>(heading.\u003Cspan class=\"hljs-property\">level\u003C/span> - \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">minDepth\u003C/span>);\n            html += \u003Cspan class=\"hljs-string\">`\u003Cspan class=\"hljs-subst\">${indent}\u003C/span><li><a href="#\u003Cspan class=\"hljs-subst\">${heading.id}\u003C/span>">\u003Cspan class=\"hljs-subst\">${heading.text}\u003C/span></a></li>\\n`\u003C/span>;\n        }\n        \n        html += \u003Cspan class=\"hljs-string\">'  </ul>\\n'\u003C/span>;\n        html += \u003Cspan class=\"hljs-string\">'</nav>\\n\\n'\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> html;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">insertTOC\u003C/span>(\u003Cspan class=\"hljs-params\">content, tocHTML\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Replace TOC placeholder or insert after first heading\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> tocPlaceholder = \u003Cspan class=\"hljs-regexp\">/<!-- TOC -->/g\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (tocPlaceholder.\u003Cspan class=\"hljs-title function_\">test\u003C/span>(content)) {\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> content.\u003Cspan class=\"hljs-title function_\">replace\u003C/span>(tocPlaceholder, tocHTML.\u003Cspan class=\"hljs-title function_\">trim\u003C/span>());\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Insert after first heading\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> firstHeadingMatch = content.\u003Cspan class=\"hljs-title function_\">match\u003C/span>(\u003Cspan class=\"hljs-regexp\">/^#\\s+.+$/m\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (firstHeadingMatch) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> insertIndex = firstHeadingMatch.\u003Cspan class=\"hljs-property\">index\u003C/span> + firstHeadingMatch[\u003Cspan class=\"hljs-number\">0\u003C/span>].\u003Cspan class=\"hljs-property\">length\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> content.\u003Cspan class=\"hljs-title function_\">slice\u003C/span>(\u003Cspan class=\"hljs-number\">0\u003C/span>, insertIndex) + \u003Cspan class=\"hljs-string\">'\\n\\n'\u003C/span> + tocHTML + content.\u003Cspan class=\"hljs-title function_\">slice\u003C/span>(insertIndex);\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> tocHTML + content;\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">// Usage example\u003C/span>\n\u003Cspan class=\"hljs-keyword\">const\u003C/span> generator = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">TOCGenerator\u003C/span>({ \u003Cspan class=\"hljs-attr\">maxDepth\u003C/span>: \u003Cspan class=\"hljs-number\">4\u003C/span> });\n\u003Cspan class=\"hljs-keyword\">const\u003C/span> markdownWithTOC = generator.\u003Cspan class=\"hljs-title function_\">generate\u003C/span>(markdownContent);\n\u003C/code>\u003C/pre>\u003Ch2 id=\"integration-with-documentation-workflows\">Integration with Documentation Workflows\u003C/h2>\n\u003Cp>Anchor links work seamlessly with other advanced Markdown features to create comprehensive navigation systems. When building large documentation projects, combine anchor navigation with \u003Ca href=\"/blog/how-to-create-table-of-contents-in-markdown\">table of contents\u003C/a> to provide both automated and manual navigation options.\u003C/p>\n\u003Cp>For complex documents that include both detailed navigation and organized content presentation, anchor links complement \u003Ca href=\"/blog/markdown-multi-column-layouts-complete-guide\">multi-column layouts\u003C/a> by enabling quick navigation between columns and sections.\u003C/p>\n\u003Cp>When creating interactive documentation that includes both navigation and task management, anchor links integrate effectively with \u003Ca href=\"/blog/markdown-task-lists-and-checkboxes-complete-guide\">task lists and checkboxes\u003C/a> to create comprehensive workflow guides with direct navigation to specific steps.\u003C/p>\n\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 target sections\u003C/p>\n\u003Cp>\u003Cstrong>Solutions\u003C/strong>:\u003C/p>\n\u003Col>\n\u003Cli>Verify anchor IDs match link references exactly\u003C/li>\n\u003Cli>Check for special characters in headings that affect ID generation\u003C/li>\n\u003Cli>Ensure target elements actually exist in the document\u003C/li>\n\u003Cli>Test with URL fragments directly in browser address bar\u003C/li>\n\u003C/ol>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\"><!-- Common issues and fixes -->\n\u003Cspan class=\"hljs-section\"># Section With Special Characters!@#\u003C/span>\n<!-- Generated ID might be: section-with-special-characters -->\n\n[\u003Cspan class=\"hljs-string\">Working link\u003C/span>](\u003Cspan class=\"hljs-link\">#section-with-special-characters\u003C/span>)\n[\u003Cspan class=\"hljs-string\">Broken link\u003C/span>](\u003Cspan class=\"hljs-link\">#section-with-special-characters!@#\u003C/span>)  <!-- Special chars not encoded -->\n\n<!-- Manual ID specification -->\n\u003Cspan class=\"hljs-section\"># Section Title {#custom-id}\u003C/span>\n[\u003Cspan class=\"hljs-string\">Reliable link\u003C/span>](\u003Cspan class=\"hljs-link\">#custom-id\u003C/span>)\n\u003C/code>\u003C/pre>\u003Ch3 id=\"duplicate-heading-ids\">Duplicate Heading IDs\u003C/h3>\n\u003Cp>\u003Cstrong>Problem\u003C/strong>: Multiple sections with identical headings create ID conflicts\u003C/p>\n\u003Cp>\u003Cstrong>Solutions\u003C/strong>:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\"><!-- Problem: Duplicate headings -->\n\u003Cspan class=\"hljs-section\">## Setup\u003C/span>\nInstructions for development setup.\n\n\u003Cspan class=\"hljs-section\">## Setup\u003C/span>\nInstructions for production setup.\n\n<!-- Solution 1: Custom IDs -->\n\u003Cspan class=\"hljs-section\">## Setup {#dev-setup}\u003C/span>\nInstructions for development setup.\n\n\u003Cspan class=\"hljs-section\">## Setup {#prod-setup}\u003C/span>\nInstructions for production setup.\n\n<!-- Solution 2: Descriptive headings -->\n\u003Cspan class=\"hljs-section\">## Development Setup\u003C/span>\nInstructions for development setup.\n\n\u003Cspan class=\"hljs-section\">## Production Setup\u003C/span>\nInstructions for production setup.\n\u003C/code>\u003C/pre>\u003Ch3 id=\"platform-specific-rendering-issues\">Platform-Specific Rendering Issues\u003C/h3>\n\u003Cp>\u003Cstrong>Problem\u003C/strong>: Anchor links work in one platform but not another\u003C/p>\n\u003Cp>\u003Cstrong>Solutions\u003C/strong>:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\"><!-- Cross-platform compatible approach -->\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">a\u003C/span> \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"section-anchor"\u003C/span>>\u003C/span>\u003C/span>\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">a\u003C/span>>\u003C/span>\u003C/span>\n\u003Cspan class=\"hljs-section\">## Section Title\u003C/span>\n\n<!-- Multiple anchor methods -->\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\u003C/span> \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"backup-anchor"\u003C/span>>\u003C/span>\u003C/span>\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">span\u003C/span>>\u003C/span>\u003C/span>\n\u003Cspan class=\"hljs-section\">### Subsection {#primary-anchor}\u003C/span>\n\n[\u003Cspan class=\"hljs-string\">Link using primary\u003C/span>](\u003Cspan class=\"hljs-link\">#primary-anchor\u003C/span>)\n[\u003Cspan class=\"hljs-string\">Fallback link\u003C/span>](\u003Cspan class=\"hljs-link\">#backup-anchor\u003C/span>)\n\u003C/code>\u003C/pre>\u003Ch2 id=\"seo-and-accessibility-benefits\">SEO and Accessibility Benefits\u003C/h2>\n\u003Ch3 id=\"enhanced-user-experience\">Enhanced User Experience\u003C/h3>\n\u003Cp>Anchor links significantly improve documentation usability:\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>Quick Navigation\u003C/strong>: Users can jump directly to relevant information\u003C/li>\n\u003Cli>\u003Cstrong>Shareable References\u003C/strong>: Direct links to specific sections enable precise sharing\u003C/li>\n\u003Cli>\u003Cstrong>Improved Accessibility\u003C/strong>: Screen readers can navigate document structure efficiently\u003C/li>\n\u003Cli>\u003Cstrong>Better Engagement\u003C/strong>: Easy navigation encourages deeper content exploration\u003C/li>\n\u003C/ul>\n\u003Ch3 id=\"search-engine-optimization\">Search Engine Optimization\u003C/h3>\n\u003Cpre>\u003Ccode class=\"hljs language-html\">\u003Cspan class=\"hljs-comment\"><!-- Structured navigation for SEO -->\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\">"Document outline"\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">ol\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">li\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">a\u003C/span> \u003Cspan class=\"hljs-attr\">href\u003C/span>=\u003Cspan class=\"hljs-string\">"#introduction"\u003C/span>>\u003C/span>Introduction\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">a\u003C/span>>\u003C/span>\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>>\u003C/span>\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">a\u003C/span> \u003Cspan class=\"hljs-attr\">href\u003C/span>=\u003Cspan class=\"hljs-string\">"#getting-started"\u003C/span>>\u003C/span>Getting Started\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">a\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">ol\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">li\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">a\u003C/span> \u003Cspan class=\"hljs-attr\">href\u003C/span>=\u003Cspan class=\"hljs-string\">"#installation"\u003C/span>>\u003C/span>Installation\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">a\u003C/span>>\u003C/span>\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>>\u003C/span>\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">a\u003C/span> \u003Cspan class=\"hljs-attr\">href\u003C/span>=\u003Cspan class=\"hljs-string\">"#configuration"\u003C/span>>\u003C/span>Configuration\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">a\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">li\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">ol\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>>\u003C/span>\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">a\u003C/span> \u003Cspan class=\"hljs-attr\">href\u003C/span>=\u003Cspan class=\"hljs-string\">"#advanced-topics"\u003C/span>>\u003C/span>Advanced Topics\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">a\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">li\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">ol\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">nav\u003C/span>>\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch2 id=\"conclusion\">Conclusion\u003C/h2>\n\u003Cp>Markdown anchor links and navigation systems transform static documents into interactive, navigable resources that provide exceptional user experience and accessibility. By mastering anchor link implementation, navigation patterns, and integration techniques, you can create documentation that readers can efficiently explore and reference with confidence.\u003C/p>\n\u003Cp>The key to effective anchor navigation lies in creating logical, hierarchical link structures that serve real user needs while maintaining consistency across platforms and documents. Whether you're building API documentation, user guides, or comprehensive technical references, the techniques covered in this guide enable you to create navigation systems that truly enhance the documentation experience.\u003C/p>\n\u003Cp>Remember to validate anchor links regularly, provide multiple navigation paths for complex documents, and ensure accessibility compliance for all users. With proper implementation, anchor links become invisible infrastructure that dramatically improves how readers interact with and benefit from your documentation.\u003C/p>\n",[15,19,22,25,28,31,34,37,40,43,46],{"id":16,"text":17,"level":18},"why-use-anchor-links","Why Use Anchor Links?",2,{"id":20,"text":21,"level":18},"basic-anchor-link-syntax","Basic Anchor Link Syntax",{"id":23,"text":24,"level":18},"platform-specific-anchor-implementations","Platform-Specific Anchor Implementations",{"id":26,"text":27,"level":18},"advanced-navigation-patterns","Advanced Navigation Patterns",{"id":29,"text":30,"level":18},"navigation-enhancement-techniques","Navigation Enhancement Techniques",{"id":32,"text":33,"level":18},"advanced-anchor-techniques","Advanced Anchor Techniques",{"id":35,"text":36,"level":18},"documentation-workflow-integration","Documentation Workflow Integration",{"id":38,"text":39,"level":18},"integration-with-documentation-workflows","Integration with Documentation Workflows",{"id":41,"text":42,"level":18},"troubleshooting-common-issues","Troubleshooting Common Issues",{"id":44,"text":45,"level":18},"seo-and-accessibility-benefits","SEO and Accessibility Benefits",{"id":47,"text":48,"level":18},"conclusion","Conclusion",[],[51,59,67],{"slug":52,"title":53,"description":54,"excerpt":55,"date":56,"category":9,"author":10,"keywords":57,"readingMinutes":58},"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":60,"title":61,"description":62,"excerpt":63,"date":64,"category":9,"author":10,"keywords":65,"readingMinutes":66},"markdown-anchor-links-internal-navigation-guide","Markdown Anchor Links: Complete Guide to Internal Navigation and Cross-References","Learn how to create anchor links in Markdown for internal navigation, cross-references, and smooth scrolling. Master heading anchors, custom anchors, and platform-specific implementations.","Anchor links in Markdown allow you to create internal navigation within your documents, enabling readers to jump directly to specific sections. This is especially useful for long documents, table…","2025-12-03","markdown anchor links, markdown internal links, markdown navigation, heading anchors, markdown cross references, markdown table of contents, internal navigation markdown",4,{"slug":68,"title":69,"description":70,"excerpt":71,"date":72,"category":9,"author":10,"keywords":73,"readingMinutes":74},"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,1792184941308]