[{"data":1,"prerenderedAt":68},["Reactive",2],{"blog-post-react-markdown-rendering-guide":3},{"slug":4,"title":5,"description":6,"excerpt":7,"date":8,"category":9,"author":10,"keywords":11,"readingMinutes":12,"html":13,"headings":14,"tools":43,"related":44},"react-markdown-rendering-guide","React Markdown Rendering: Complete Guide for Dynamic Content Display and Component Integration","Master React Markdown rendering with advanced techniques for dynamic content display, custom components, syntax highlighting, and performance optimization. Learn integration patterns, security considerations, and real-world implementation examples.","React Markdown rendering enables dynamic content display by converting Markdown text into React components, providing powerful flexibility for content-driven applications, documentation systems,…","2025-09-20","Tutorial","Matthew Rathbone","react markdown rendering, react markdown component, markdown to react, dynamic markdown rendering, react markdown parser, markdown react integration, react markdown syntax highlighting, custom react markdown components",16,"\u003Cp>React Markdown rendering enables dynamic content display by converting Markdown text into React components, providing powerful flexibility for content-driven applications, documentation systems, and user-generated content platforms. While basic Markdown rendering is straightforward, advanced implementations require careful consideration of component customization, performance optimization, security handling, and integration with modern React patterns.\u003C/p>\n\u003Ch2 id=\"why-master-react-markdown-rendering\">Why Master React Markdown Rendering?\u003C/h2>\n\u003Cp>Professional React Markdown implementation provides essential benefits for modern web applications:\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>Dynamic Content Management\u003C/strong>: Enable real-time Markdown content updates without rebuilding applications\u003C/li>\n\u003Cli>\u003Cstrong>Component Integration\u003C/strong>: Seamlessly blend Markdown content with custom React components and interactive elements\u003C/li>\n\u003Cli>\u003Cstrong>User-Generated Content\u003C/strong>: Safely render user-provided Markdown with proper sanitization and validation\u003C/li>\n\u003Cli>\u003Cstrong>Documentation Systems\u003C/strong>: Create interactive documentation with live code examples and dynamic navigation\u003C/li>\n\u003Cli>\u003Cstrong>Performance Optimization\u003C/strong>: Implement efficient rendering strategies for large-scale content applications\u003C/li>\n\u003C/ul>\n\u003Ch2 id=\"foundation-react-markdown-setup\">Foundation React Markdown Setup\u003C/h2>\n\u003Ch3 id=\"basic-installation-and-configuration\">Basic Installation and Configuration\u003C/h3>\n\u003Cp>Essential packages for React Markdown rendering:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-bash\">\u003Cspan class=\"hljs-comment\"># Install core React Markdown packages\u003C/span>\nnpm install react-markdown remark-gfm rehype-highlight rehype-sanitize\nnpm install react-syntax-highlighter remark-math rehype-katex\n\n\u003Cspan class=\"hljs-comment\"># Additional utilities for advanced features\u003C/span>\nnpm install remark-toc remark-slug rehype-autolink-headings\nnpm install @types/react-syntax-highlighter \u003Cspan class=\"hljs-comment\"># For TypeScript projects\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch3 id=\"basic-react-markdown-implementation\">Basic React Markdown Implementation\u003C/h3>\n\u003Cpre>\u003Ccode class=\"hljs language-jsx\">\u003Cspan class=\"hljs-comment\">// BasicMarkdownRenderer.jsx - Simple React Markdown component\u003C/span>\n\u003Cspan class=\"hljs-keyword\">import\u003C/span> \u003Cspan class=\"hljs-title class_\">React\u003C/span> \u003Cspan class=\"hljs-keyword\">from\u003C/span> \u003Cspan class=\"hljs-string\">'react'\u003C/span>;\n\u003Cspan class=\"hljs-keyword\">import\u003C/span> \u003Cspan class=\"hljs-title class_\">ReactMarkdown\u003C/span> \u003Cspan class=\"hljs-keyword\">from\u003C/span> \u003Cspan class=\"hljs-string\">'react-markdown'\u003C/span>;\n\u003Cspan class=\"hljs-keyword\">import\u003C/span> remarkGfm \u003Cspan class=\"hljs-keyword\">from\u003C/span> \u003Cspan class=\"hljs-string\">'remark-gfm'\u003C/span>;\n\n\u003Cspan class=\"hljs-keyword\">const\u003C/span> \u003Cspan class=\"hljs-title function_\">BasicMarkdownRenderer\u003C/span> = (\u003Cspan class=\"hljs-params\">{ content }\u003C/span>) => {\n  \u003Cspan class=\"hljs-keyword\">return\u003C/span> (\n    \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">className\u003C/span>=\u003Cspan class=\"hljs-string\">"markdown-content"\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">ReactMarkdown\u003C/span>\n        \u003Cspan class=\"hljs-attr\">remarkPlugins\u003C/span>=\u003Cspan class=\"hljs-string\">{[remarkGfm]}\u003C/span>\n        \u003Cspan class=\"hljs-attr\">children\u003C/span>=\u003Cspan class=\"hljs-string\">{content}\u003C/span>\n      />\u003C/span>\n    \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\u003C/span>\n  );\n};\n\n\u003Cspan class=\"hljs-comment\">// Usage example\u003C/span>\n\u003Cspan class=\"hljs-keyword\">const\u003C/span> \u003Cspan class=\"hljs-title function_\">App\u003C/span> = (\u003Cspan class=\"hljs-params\">\u003C/span>) => {\n  \u003Cspan class=\"hljs-keyword\">const\u003C/span> markdownContent = \u003Cspan class=\"hljs-string\">`\n# Welcome to React Markdown\n\nThis is a **basic example** of React Markdown rendering.\n\n## Features Included\n\n- GitHub Flavored Markdown support\n- **Bold text** and *italic text*\n- \\`Inline code\\` formatting\n- [Links](https://example.com) work perfectly\n\n### Code Blocks\n\n\\`\\`\\`javascript\nfunction greetUser(name) {\n  return \\`Hello, \\${name}! Welcome to React Markdown.\\`;\n}\n\nconsole.log(greetUser('Developer'));\n\\`\\`\\`\n\n### Task Lists\n\n- [x] Set up React Markdown\n- [x] Add GitHub Flavored Markdown\n- [ ] Implement custom components\n- [ ] Add syntax highlighting\n\n| Feature | Status | Priority |\n|---------|--------|----------|\n| Basic rendering | ✅ Complete | High |\n| Custom components | 🚧 In Progress | High |\n| Syntax highlighting | ⏳ Planned | Medium |\n  `\u003C/span>;\n\n  \u003Cspan class=\"hljs-keyword\">return\u003C/span> (\n    \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">className\u003C/span>=\u003Cspan class=\"hljs-string\">"app"\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">h1\u003C/span>>\u003C/span>React Markdown Demo\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">h1\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">BasicMarkdownRenderer\u003C/span> \u003Cspan class=\"hljs-attr\">content\u003C/span>=\u003Cspan class=\"hljs-string\">{markdownContent}\u003C/span> />\u003C/span>\n    \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\u003C/span>\n  );\n};\n\n\u003Cspan class=\"hljs-keyword\">export\u003C/span> \u003Cspan class=\"hljs-keyword\">default\u003C/span> \u003Cspan class=\"hljs-title class_\">App\u003C/span>;\n\u003C/code>\u003C/pre>\u003Ch2 id=\"advanced-react-markdown-configuration\">Advanced React Markdown Configuration\u003C/h2>\n\u003Ch3 id=\"comprehensive-plugin-integration\">Comprehensive Plugin Integration\u003C/h3>\n\u003Cpre>\u003Ccode class=\"hljs language-jsx\">\u003Cspan class=\"hljs-comment\">// AdvancedMarkdownRenderer.jsx - Full-featured React Markdown setup\u003C/span>\n\u003Cspan class=\"hljs-keyword\">import\u003C/span> \u003Cspan class=\"hljs-title class_\">React\u003C/span> \u003Cspan class=\"hljs-keyword\">from\u003C/span> \u003Cspan class=\"hljs-string\">'react'\u003C/span>;\n\u003Cspan class=\"hljs-keyword\">import\u003C/span> \u003Cspan class=\"hljs-title class_\">ReactMarkdown\u003C/span> \u003Cspan class=\"hljs-keyword\">from\u003C/span> \u003Cspan class=\"hljs-string\">'react-markdown'\u003C/span>;\n\u003Cspan class=\"hljs-keyword\">import\u003C/span> remarkGfm \u003Cspan class=\"hljs-keyword\">from\u003C/span> \u003Cspan class=\"hljs-string\">'remark-gfm'\u003C/span>;\n\u003Cspan class=\"hljs-keyword\">import\u003C/span> remarkMath \u003Cspan class=\"hljs-keyword\">from\u003C/span> \u003Cspan class=\"hljs-string\">'remark-math'\u003C/span>;\n\u003Cspan class=\"hljs-keyword\">import\u003C/span> remarkToc \u003Cspan class=\"hljs-keyword\">from\u003C/span> \u003Cspan class=\"hljs-string\">'remark-toc'\u003C/span>;\n\u003Cspan class=\"hljs-keyword\">import\u003C/span> remarkSlug \u003Cspan class=\"hljs-keyword\">from\u003C/span> \u003Cspan class=\"hljs-string\">'remark-slug'\u003C/span>;\n\u003Cspan class=\"hljs-keyword\">import\u003C/span> rehypeKatex \u003Cspan class=\"hljs-keyword\">from\u003C/span> \u003Cspan class=\"hljs-string\">'rehype-katex'\u003C/span>;\n\u003Cspan class=\"hljs-keyword\">import\u003C/span> rehypeHighlight \u003Cspan class=\"hljs-keyword\">from\u003C/span> \u003Cspan class=\"hljs-string\">'rehype-highlight'\u003C/span>;\n\u003Cspan class=\"hljs-keyword\">import\u003C/span> rehypeAutolinkHeadings \u003Cspan class=\"hljs-keyword\">from\u003C/span> \u003Cspan class=\"hljs-string\">'rehype-autolink-headings'\u003C/span>;\n\u003Cspan class=\"hljs-keyword\">import\u003C/span> rehypeSanitize \u003Cspan class=\"hljs-keyword\">from\u003C/span> \u003Cspan class=\"hljs-string\">'rehype-sanitize'\u003C/span>;\n\u003Cspan class=\"hljs-keyword\">import\u003C/span> \u003Cspan class=\"hljs-string\">'katex/dist/katex.min.css'\u003C/span>;\n\u003Cspan class=\"hljs-keyword\">import\u003C/span> \u003Cspan class=\"hljs-string\">'highlight.js/styles/github.css'\u003C/span>;\n\n\u003Cspan class=\"hljs-keyword\">const\u003C/span> \u003Cspan class=\"hljs-title function_\">AdvancedMarkdownRenderer\u003C/span> = (\u003Cspan class=\"hljs-params\">{ \n  content, \n  options = {},\n  className = \u003Cspan class=\"hljs-string\">'markdown-content'\u003C/span> \n}\u003C/span>) => {\n  \u003Cspan class=\"hljs-keyword\">const\u003C/span> defaultOptions = {\n    \u003Cspan class=\"hljs-comment\">// Remark plugins (Markdown processing)\u003C/span>\n    \u003Cspan class=\"hljs-attr\">remarkPlugins\u003C/span>: [\n      remarkGfm,           \u003Cspan class=\"hljs-comment\">// GitHub Flavored Markdown\u003C/span>\n      remarkMath,          \u003Cspan class=\"hljs-comment\">// Math expression support\u003C/span>\n      remarkSlug,          \u003Cspan class=\"hljs-comment\">// Add IDs to headings\u003C/span>\n      [remarkToc, { \n        \u003Cspan class=\"hljs-attr\">heading\u003C/span>: \u003Cspan class=\"hljs-string\">'Table of Contents'\u003C/span>,\n        \u003Cspan class=\"hljs-attr\">maxDepth\u003C/span>: \u003Cspan class=\"hljs-number\">3\u003C/span> \n      }]\n    ],\n    \n    \u003Cspan class=\"hljs-comment\">// Rehype plugins (HTML processing)\u003C/span>\n    \u003Cspan class=\"hljs-attr\">rehypePlugins\u003C/span>: [\n      [rehypeSanitize, {\n        \u003Cspan class=\"hljs-comment\">// Allow math and code highlighting classes\u003C/span>\n        \u003Cspan class=\"hljs-attr\">tagNames\u003C/span>: [\u003Cspan class=\"hljs-string\">'math'\u003C/span>, \u003Cspan class=\"hljs-string\">'mi'\u003C/span>, \u003Cspan class=\"hljs-string\">'mo'\u003C/span>, \u003Cspan class=\"hljs-string\">'mn'\u003C/span>, \u003Cspan class=\"hljs-string\">'ms'\u003C/span>, \u003Cspan class=\"hljs-string\">'mtext'\u003C/span>, \u003Cspan class=\"hljs-string\">'annotation'\u003C/span>],\n        \u003Cspan class=\"hljs-attr\">attributes\u003C/span>: {\n          \u003Cspan class=\"hljs-string\">'*'\u003C/span>: [\u003Cspan class=\"hljs-string\">'className'\u003C/span>, \u003Cspan class=\"hljs-string\">'id'\u003C/span>],\n          \u003Cspan class=\"hljs-string\">'span'\u003C/span>: [\u003Cspan class=\"hljs-string\">'className'\u003C/span>, \u003Cspan class=\"hljs-string\">'style'\u003C/span>],\n          \u003Cspan class=\"hljs-string\">'div'\u003C/span>: [\u003Cspan class=\"hljs-string\">'className'\u003C/span>, \u003Cspan class=\"hljs-string\">'style'\u003C/span>]\n        }\n      }],\n      rehypeKatex,         \u003Cspan class=\"hljs-comment\">// Math rendering\u003C/span>\n      rehypeHighlight,     \u003Cspan class=\"hljs-comment\">// Syntax highlighting\u003C/span>\n      [rehypeAutolinkHeadings, {\n        \u003Cspan class=\"hljs-attr\">behavior\u003C/span>: \u003Cspan class=\"hljs-string\">'wrap'\u003C/span>,\n        \u003Cspan class=\"hljs-attr\">properties\u003C/span>: {\n          \u003Cspan class=\"hljs-attr\">className\u003C/span>: [\u003Cspan class=\"hljs-string\">'anchor-link'\u003C/span>]\n        }\n      }]\n    ],\n    \n    \u003Cspan class=\"hljs-comment\">// Custom renderers for HTML elements\u003C/span>\n    \u003Cspan class=\"hljs-attr\">components\u003C/span>: {\n      \u003Cspan class=\"hljs-comment\">// Custom heading with anchor links\u003C/span>\n      \u003Cspan class=\"hljs-attr\">h1\u003C/span>: \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">{ node, children, ...props }\u003C/span>) =>\u003C/span> (\n        \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">h1\u003C/span> \u003Cspan class=\"hljs-attr\">className\u003C/span>=\u003Cspan class=\"hljs-string\">"markdown-h1"\u003C/span> {\u003Cspan class=\"hljs-attr\">...props\u003C/span>}>\u003C/span>\n          {children}\n        \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">h1\u003C/span>>\u003C/span>\u003C/span>\n      ),\n      \n      \u003Cspan class=\"hljs-attr\">h2\u003C/span>: \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">{ node, children, ...props }\u003C/span>) =>\u003C/span> (\n        \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">h2\u003C/span> \u003Cspan class=\"hljs-attr\">className\u003C/span>=\u003Cspan class=\"hljs-string\">"markdown-h2"\u003C/span> {\u003Cspan class=\"hljs-attr\">...props\u003C/span>}>\u003C/span>\n          {children}\n        \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">h2\u003C/span>>\u003C/span>\u003C/span>\n      ),\n      \n      \u003Cspan class=\"hljs-attr\">h3\u003C/span>: \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">{ node, children, ...props }\u003C/span>) =>\u003C/span> (\n        \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">h3\u003C/span> \u003Cspan class=\"hljs-attr\">className\u003C/span>=\u003Cspan class=\"hljs-string\">"markdown-h3"\u003C/span> {\u003Cspan class=\"hljs-attr\">...props\u003C/span>}>\u003C/span>\n          {children}\n        \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">h3\u003C/span>>\u003C/span>\u003C/span>\n      ),\n      \n      \u003Cspan class=\"hljs-comment\">// Custom link renderer with external link handling\u003C/span>\n      \u003Cspan class=\"hljs-attr\">a\u003C/span>: \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">{ node, children, href, ...props }\u003C/span>) =>\u003C/span> {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> isExternal = href && (\n          href.\u003Cspan class=\"hljs-title function_\">startsWith\u003C/span>(\u003Cspan class=\"hljs-string\">'http://'\u003C/span>) || \n          href.\u003Cspan class=\"hljs-title function_\">startsWith\u003C/span>(\u003Cspan class=\"hljs-string\">'https://'\u003C/span>) || \n          href.\u003Cspan class=\"hljs-title function_\">startsWith\u003C/span>(\u003Cspan class=\"hljs-string\">'//'\u003C/span>)\n        );\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> (\n          \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">a\u003C/span>\n            \u003Cspan class=\"hljs-attr\">href\u003C/span>=\u003Cspan class=\"hljs-string\">{href}\u003C/span>\n            \u003Cspan class=\"hljs-attr\">className\u003C/span>=\u003Cspan class=\"hljs-string\">{\u003C/span>`\u003Cspan class=\"hljs-attr\">markdown-link\u003C/span> ${\u003Cspan class=\"hljs-attr\">isExternal\u003C/span> ? '\u003Cspan class=\"hljs-attr\">external-link\u003C/span>' \u003Cspan class=\"hljs-attr\">:\u003C/span> '\u003Cspan class=\"hljs-attr\">internal-link\u003C/span>'}`}\n            \u003Cspan class=\"hljs-attr\">target\u003C/span>=\u003Cspan class=\"hljs-string\">{isExternal\u003C/span> ? '\u003Cspan class=\"hljs-attr\">_blank\u003C/span>' \u003Cspan class=\"hljs-attr\">:\u003C/span> '\u003Cspan class=\"hljs-attr\">_self\u003C/span>'}\n            \u003Cspan class=\"hljs-attr\">rel\u003C/span>=\u003Cspan class=\"hljs-string\">{isExternal\u003C/span> ? '\u003Cspan class=\"hljs-attr\">noopener\u003C/span> \u003Cspan class=\"hljs-attr\">noreferrer\u003C/span>' \u003Cspan class=\"hljs-attr\">:\u003C/span> \u003Cspan class=\"hljs-attr\">undefined\u003C/span>}\n            {\u003Cspan class=\"hljs-attr\">...props\u003C/span>}\n          >\u003C/span>\n            {children}\n            {isExternal && (\n              \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">svg\u003C/span> \n                \u003Cspan class=\"hljs-attr\">className\u003C/span>=\u003Cspan class=\"hljs-string\">"external-link-icon"\u003C/span> \n                \u003Cspan class=\"hljs-attr\">width\u003C/span>=\u003Cspan class=\"hljs-string\">"12"\u003C/span> \n                \u003Cspan class=\"hljs-attr\">height\u003C/span>=\u003Cspan class=\"hljs-string\">"12"\u003C/span> \n                \u003Cspan class=\"hljs-attr\">viewBox\u003C/span>=\u003Cspan class=\"hljs-string\">"0 0 12 12"\u003C/span>\n                \u003Cspan class=\"hljs-attr\">aria-hidden\u003C/span>=\u003Cspan class=\"hljs-string\">"true"\u003C/span>\n              >\u003C/span>\n                \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">path\u003C/span> \n                  \u003Cspan class=\"hljs-attr\">d\u003C/span>=\u003Cspan class=\"hljs-string\">"M9 3L3 9M9 3H6M9 3V6"\u003C/span> \n                  \u003Cspan class=\"hljs-attr\">stroke\u003C/span>=\u003Cspan class=\"hljs-string\">"currentColor"\u003C/span> \n                  \u003Cspan class=\"hljs-attr\">strokeWidth\u003C/span>=\u003Cspan class=\"hljs-string\">"1.5"\u003C/span> \n                  \u003Cspan class=\"hljs-attr\">strokeLinecap\u003C/span>=\u003Cspan class=\"hljs-string\">"round"\u003C/span> \n                  \u003Cspan class=\"hljs-attr\">strokeLinejoin\u003C/span>=\u003Cspan class=\"hljs-string\">"round"\u003C/span>\n                />\u003C/span>\n              \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">svg\u003C/span>>\u003C/span>\n            )}\n          \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">a\u003C/span>>\u003C/span>\u003C/span>\n        );\n      },\n      \n      \u003Cspan class=\"hljs-comment\">// Custom code block with copy functionality\u003C/span>\n      \u003Cspan class=\"hljs-attr\">pre\u003C/span>: \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">{ node, children, ...props }\u003C/span>) =>\u003C/span> (\n        \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">className\u003C/span>=\u003Cspan class=\"hljs-string\">"code-block-wrapper"\u003C/span>>\u003C/span>\n          \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">pre\u003C/span> \u003Cspan class=\"hljs-attr\">className\u003C/span>=\u003Cspan class=\"hljs-string\">"markdown-pre"\u003C/span> {\u003Cspan class=\"hljs-attr\">...props\u003C/span>}>\u003C/span>\n            {children}\n          \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">pre\u003C/span>>\u003C/span>\n          \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">button\u003C/span> \n            \u003Cspan class=\"hljs-attr\">className\u003C/span>=\u003Cspan class=\"hljs-string\">"copy-code-button"\u003C/span>\n            \u003Cspan class=\"hljs-attr\">onClick\u003C/span>=\u003Cspan class=\"hljs-string\">{(e)\u003C/span> =>\u003C/span> {\n              const codeElement = e.target.previousSibling.querySelector('code');\n              if (codeElement) {\n                navigator.clipboard.writeText(codeElement.textContent);\n                e.target.textContent = 'Copied!';\n                setTimeout(() => {\n                  e.target.textContent = 'Copy';\n                }, 2000);\n              }\n            }}\n            aria-label="Copy code to clipboard"\n          >\n            Copy\n          \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">button\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\u003C/span>\n      ),\n      \n      \u003Cspan class=\"hljs-comment\">// Custom inline code\u003C/span>\n      \u003Cspan class=\"hljs-attr\">code\u003C/span>: \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">{ node, inline, className, children, ...props }\u003C/span>) =>\u003C/span> {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!inline) {\n          \u003Cspan class=\"hljs-keyword\">return\u003C/span> (\n            \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">code\u003C/span> \u003Cspan class=\"hljs-attr\">className\u003C/span>=\u003Cspan class=\"hljs-string\">{\u003C/span>`${\u003Cspan class=\"hljs-attr\">className\u003C/span> || ''} \u003Cspan class=\"hljs-attr\">markdown-code-block\u003C/span>`} {\u003Cspan class=\"hljs-attr\">...props\u003C/span>}>\u003C/span>\n              {children}\n            \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">code\u003C/span>>\u003C/span>\u003C/span>\n          );\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> (\n          \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">code\u003C/span> \u003Cspan class=\"hljs-attr\">className\u003C/span>=\u003Cspan class=\"hljs-string\">"markdown-inline-code"\u003C/span> {\u003Cspan class=\"hljs-attr\">...props\u003C/span>}>\u003C/span>\n            {children}\n          \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">code\u003C/span>>\u003C/span>\u003C/span>\n        );\n      },\n      \n      \u003Cspan class=\"hljs-comment\">// Custom blockquote with citation support\u003C/span>\n      \u003Cspan class=\"hljs-attr\">blockquote\u003C/span>: \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">{ node, children, ...props }\u003C/span>) =>\u003C/span> (\n        \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">blockquote\u003C/span> \u003Cspan class=\"hljs-attr\">className\u003C/span>=\u003Cspan class=\"hljs-string\">"markdown-blockquote"\u003C/span> {\u003Cspan class=\"hljs-attr\">...props\u003C/span>}>\u003C/span>\n          \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">className\u003C/span>=\u003Cspan class=\"hljs-string\">"quote-content"\u003C/span>>\u003C/span>\n            {children}\n          \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">blockquote\u003C/span>>\u003C/span>\u003C/span>\n      ),\n      \n      \u003Cspan class=\"hljs-comment\">// Custom table rendering\u003C/span>\n      \u003Cspan class=\"hljs-attr\">table\u003C/span>: \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">{ node, children, ...props }\u003C/span>) =>\u003C/span> (\n        \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">className\u003C/span>=\u003Cspan class=\"hljs-string\">"table-wrapper"\u003C/span>>\u003C/span>\n          \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">table\u003C/span> \u003Cspan class=\"hljs-attr\">className\u003C/span>=\u003Cspan class=\"hljs-string\">"markdown-table"\u003C/span> {\u003Cspan class=\"hljs-attr\">...props\u003C/span>}>\u003C/span>\n            {children}\n          \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">table\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\u003C/span>\n      ),\n      \n      \u003Cspan class=\"hljs-comment\">// Custom list rendering with enhanced styling\u003C/span>\n      \u003Cspan class=\"hljs-attr\">ul\u003C/span>: \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">{ node, children, ...props }\u003C/span>) =>\u003C/span> (\n        \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">ul\u003C/span> \u003Cspan class=\"hljs-attr\">className\u003C/span>=\u003Cspan class=\"hljs-string\">"markdown-ul"\u003C/span> {\u003Cspan class=\"hljs-attr\">...props\u003C/span>}>\u003C/span>\n          {children}\n        \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">ul\u003C/span>>\u003C/span>\u003C/span>\n      ),\n      \n      \u003Cspan class=\"hljs-attr\">ol\u003C/span>: \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">{ node, children, ...props }\u003C/span>) =>\u003C/span> (\n        \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">ol\u003C/span> \u003Cspan class=\"hljs-attr\">className\u003C/span>=\u003Cspan class=\"hljs-string\">"markdown-ol"\u003C/span> {\u003Cspan class=\"hljs-attr\">...props\u003C/span>}>\u003C/span>\n          {children}\n        \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">ol\u003C/span>>\u003C/span>\u003C/span>\n      ),\n      \n      \u003Cspan class=\"hljs-comment\">// Custom list item with task list support\u003C/span>\n      \u003Cspan class=\"hljs-attr\">li\u003C/span>: \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">{ node, children, ...props }\u003C/span>) =>\u003C/span> {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> isTaskList = node?.\u003Cspan class=\"hljs-property\">properties\u003C/span>?.\u003Cspan class=\"hljs-property\">className\u003C/span>?.\u003Cspan class=\"hljs-title function_\">includes\u003C/span>(\u003Cspan class=\"hljs-string\">'task-list-item'\u003C/span>);\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> (\n          \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">li\u003C/span> \u003Cspan class=\"hljs-attr\">className\u003C/span>=\u003Cspan class=\"hljs-string\">{\u003C/span>`\u003Cspan class=\"hljs-attr\">markdown-li\u003C/span> ${\u003Cspan class=\"hljs-attr\">isTaskList\u003C/span> ? '\u003Cspan class=\"hljs-attr\">task-list-item\u003C/span>' \u003Cspan class=\"hljs-attr\">:\u003C/span> ''}`} {\u003Cspan class=\"hljs-attr\">...props\u003C/span>}>\u003C/span>\n            {children}\n          \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">li\u003C/span>>\u003C/span>\u003C/span>\n        );\n      },\n      \n      \u003Cspan class=\"hljs-comment\">// Custom image with lazy loading and captions\u003C/span>\n      \u003Cspan class=\"hljs-attr\">img\u003C/span>: \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">{ node, src, alt, title, ...props }\u003C/span>) =>\u003C/span> (\n        \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">figure\u003C/span> \u003Cspan class=\"hljs-attr\">className\u003C/span>=\u003Cspan class=\"hljs-string\">"markdown-image"\u003C/span>>\u003C/span>\n          \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">img\u003C/span>\n            \u003Cspan class=\"hljs-attr\">src\u003C/span>=\u003Cspan class=\"hljs-string\">{src}\u003C/span>\n            \u003Cspan class=\"hljs-attr\">alt\u003C/span>=\u003Cspan class=\"hljs-string\">{alt}\u003C/span>\n            \u003Cspan class=\"hljs-attr\">title\u003C/span>=\u003Cspan class=\"hljs-string\">{title}\u003C/span>\n            \u003Cspan class=\"hljs-attr\">loading\u003C/span>=\u003Cspan class=\"hljs-string\">"lazy"\u003C/span>\n            \u003Cspan class=\"hljs-attr\">className\u003C/span>=\u003Cspan class=\"hljs-string\">"markdown-img"\u003C/span>\n            {\u003Cspan class=\"hljs-attr\">...props\u003C/span>}\n          />\u003C/span>\n          {(alt || title) && (\n            \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">figcaption\u003C/span> \u003Cspan class=\"hljs-attr\">className\u003C/span>=\u003Cspan class=\"hljs-string\">"image-caption"\u003C/span>>\u003C/span>\n              {title || alt}\n            \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">figcaption\u003C/span>>\u003C/span>\n          )}\n        \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">figure\u003C/span>>\u003C/span>\u003C/span>\n      )\n    },\n    \n    ...options \u003Cspan class=\"hljs-comment\">// Merge with custom options\u003C/span>\n  };\n\n  \u003Cspan class=\"hljs-keyword\">return\u003C/span> (\n    \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">className\u003C/span>=\u003Cspan class=\"hljs-string\">{className}\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">ReactMarkdown\u003C/span> {\u003Cspan class=\"hljs-attr\">...defaultOptions\u003C/span>}>\u003C/span>\n        {content}\n      \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">ReactMarkdown\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\u003C/span>\n  );\n};\n\n\u003Cspan class=\"hljs-keyword\">export\u003C/span> \u003Cspan class=\"hljs-keyword\">default\u003C/span> \u003Cspan class=\"hljs-title class_\">AdvancedMarkdownRenderer\u003C/span>;\n\u003C/code>\u003C/pre>\u003Ch3 id=\"custom-component-integration\">Custom Component Integration\u003C/h3>\n\u003Cpre>\u003Ccode class=\"hljs language-jsx\">\u003Cspan class=\"hljs-comment\">// CustomComponentRenderer.jsx - Integration with custom React components\u003C/span>\n\u003Cspan class=\"hljs-keyword\">import\u003C/span> \u003Cspan class=\"hljs-title class_\">React\u003C/span>, { useState } \u003Cspan class=\"hljs-keyword\">from\u003C/span> \u003Cspan class=\"hljs-string\">'react'\u003C/span>;\n\u003Cspan class=\"hljs-keyword\">import\u003C/span> \u003Cspan class=\"hljs-title class_\">ReactMarkdown\u003C/span> \u003Cspan class=\"hljs-keyword\">from\u003C/span> \u003Cspan class=\"hljs-string\">'react-markdown'\u003C/span>;\n\u003Cspan class=\"hljs-keyword\">import\u003C/span> remarkGfm \u003Cspan class=\"hljs-keyword\">from\u003C/span> \u003Cspan class=\"hljs-string\">'remark-gfm'\u003C/span>;\n\u003Cspan class=\"hljs-keyword\">import\u003C/span> remarkDirective \u003Cspan class=\"hljs-keyword\">from\u003C/span> \u003Cspan class=\"hljs-string\">'remark-directive'\u003C/span>;\n\u003Cspan class=\"hljs-keyword\">import\u003C/span> { visit } \u003Cspan class=\"hljs-keyword\">from\u003C/span> \u003Cspan class=\"hljs-string\">'unist-util-visit'\u003C/span>;\n\n\u003Cspan class=\"hljs-comment\">// Custom interactive components\u003C/span>\n\u003Cspan class=\"hljs-keyword\">const\u003C/span> \u003Cspan class=\"hljs-title function_\">InteractiveCodeBlock\u003C/span> = (\u003Cspan class=\"hljs-params\">{ children, language, live = \u003Cspan class=\"hljs-literal\">false\u003C/span> }\u003C/span>) => {\n  \u003Cspan class=\"hljs-keyword\">const\u003C/span> [code, setCode] = \u003Cspan class=\"hljs-title function_\">useState\u003C/span>(children);\n  \u003Cspan class=\"hljs-keyword\">const\u003C/span> [output, setOutput] = \u003Cspan class=\"hljs-title function_\">useState\u003C/span>(\u003Cspan class=\"hljs-string\">''\u003C/span>);\n  \n  \u003Cspan class=\"hljs-keyword\">const\u003C/span> \u003Cspan class=\"hljs-title function_\">executeCode\u003C/span> = (\u003Cspan class=\"hljs-params\">\u003C/span>) => {\n    \u003Cspan class=\"hljs-keyword\">try\u003C/span> {\n      \u003Cspan class=\"hljs-comment\">// Simple JavaScript execution (use with caution in production)\u003C/span>\n      \u003Cspan class=\"hljs-keyword\">if\u003C/span> (language === \u003Cspan class=\"hljs-string\">'javascript'\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> result = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Function\u003C/span>(code)();\n        \u003Cspan class=\"hljs-title function_\">setOutput\u003C/span>(\u003Cspan class=\"hljs-title class_\">String\u003C/span>(result));\n      }\n    } \u003Cspan class=\"hljs-keyword\">catch\u003C/span> (error) {\n      \u003Cspan class=\"hljs-title function_\">setOutput\u003C/span>(\u003Cspan class=\"hljs-string\">`Error: \u003Cspan class=\"hljs-subst\">${error.message}\u003C/span>`\u003C/span>);\n    }\n  };\n  \n  \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!live) {\n    \u003Cspan class=\"hljs-keyword\">return\u003C/span> (\n      \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">pre\u003C/span> \u003Cspan class=\"hljs-attr\">className\u003C/span>=\u003Cspan class=\"hljs-string\">"code-block"\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">code\u003C/span> \u003Cspan class=\"hljs-attr\">className\u003C/span>=\u003Cspan class=\"hljs-string\">{\u003C/span>`\u003Cspan class=\"hljs-attr\">language-\u003C/span>${\u003Cspan class=\"hljs-attr\">language\u003C/span>}`}>\u003C/span>{children}\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">code\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">pre\u003C/span>>\u003C/span>\u003C/span>\n    );\n  }\n  \n  \u003Cspan class=\"hljs-keyword\">return\u003C/span> (\n    \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">className\u003C/span>=\u003Cspan class=\"hljs-string\">"interactive-code-block"\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">textarea\u003C/span>\n        \u003Cspan class=\"hljs-attr\">value\u003C/span>=\u003Cspan class=\"hljs-string\">{code}\u003C/span>\n        \u003Cspan class=\"hljs-attr\">onChange\u003C/span>=\u003Cspan class=\"hljs-string\">{(e)\u003C/span> =>\u003C/span> setCode(e.target.value)}\n        className="code-editor"\n        rows={6}\n      />\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">button\u003C/span> \u003Cspan class=\"hljs-attr\">onClick\u003C/span>=\u003Cspan class=\"hljs-string\">{executeCode}\u003C/span> \u003Cspan class=\"hljs-attr\">className\u003C/span>=\u003Cspan class=\"hljs-string\">"run-code-button"\u003C/span>>\u003C/span>\n        Run Code\n      \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">button\u003C/span>>\u003C/span>\n      {output && (\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">className\u003C/span>=\u003Cspan class=\"hljs-string\">"code-output"\u003C/span>>\u003C/span>\n          \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span>Output:\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span>\n          \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">pre\u003C/span>>\u003C/span>{output}\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">pre\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>>\u003C/span>\u003C/span>\n  );\n};\n\n\u003Cspan class=\"hljs-keyword\">const\u003C/span> \u003Cspan class=\"hljs-title function_\">AlertBox\u003C/span> = (\u003Cspan class=\"hljs-params\">{ type = \u003Cspan class=\"hljs-string\">'info'\u003C/span>, title, children }\u003C/span>) => {\n  \u003Cspan class=\"hljs-keyword\">const\u003C/span> alertIcons = {\n    \u003Cspan class=\"hljs-attr\">info\u003C/span>: \u003Cspan class=\"hljs-string\">'💡'\u003C/span>,\n    \u003Cspan class=\"hljs-attr\">warning\u003C/span>: \u003Cspan class=\"hljs-string\">'⚠️'\u003C/span>,\n    \u003Cspan class=\"hljs-attr\">error\u003C/span>: \u003Cspan class=\"hljs-string\">'❌'\u003C/span>,\n    \u003Cspan class=\"hljs-attr\">success\u003C/span>: \u003Cspan class=\"hljs-string\">'✅'\u003C/span>\n  };\n  \n  \u003Cspan class=\"hljs-keyword\">return\u003C/span> (\n    \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">className\u003C/span>=\u003Cspan class=\"hljs-string\">{\u003C/span>`\u003Cspan class=\"hljs-attr\">alert\u003C/span> \u003Cspan class=\"hljs-attr\">alert-\u003C/span>${\u003Cspan class=\"hljs-attr\">type\u003C/span>}`}>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">className\u003C/span>=\u003Cspan class=\"hljs-string\">"alert-header"\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\u003C/span> \u003Cspan class=\"hljs-attr\">className\u003C/span>=\u003Cspan class=\"hljs-string\">"alert-icon"\u003C/span>>\u003C/span>{alertIcons[type]}\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">span\u003C/span>>\u003C/span>\n        {title && \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\u003C/span> \u003Cspan class=\"hljs-attr\">className\u003C/span>=\u003Cspan class=\"hljs-string\">"alert-title"\u003C/span>>\u003C/span>{title}\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      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">className\u003C/span>=\u003Cspan class=\"hljs-string\">"alert-content"\u003C/span>>\u003C/span>\n        {children}\n      \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>\u003C/span>\n  );\n};\n\n\u003Cspan class=\"hljs-keyword\">const\u003C/span> \u003Cspan class=\"hljs-title function_\">TabContainer\u003C/span> = (\u003Cspan class=\"hljs-params\">{ children }\u003C/span>) => {\n  \u003Cspan class=\"hljs-keyword\">const\u003C/span> [activeTab, setActiveTab] = \u003Cspan class=\"hljs-title function_\">useState\u003C/span>(\u003Cspan class=\"hljs-number\">0\u003C/span>);\n  \n  \u003Cspan class=\"hljs-keyword\">const\u003C/span> tabs = \u003Cspan class=\"hljs-title class_\">React\u003C/span>.\u003Cspan class=\"hljs-property\">Children\u003C/span>.\u003Cspan class=\"hljs-title function_\">toArray\u003C/span>(children);\n  \n  \u003Cspan class=\"hljs-keyword\">return\u003C/span> (\n    \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">className\u003C/span>=\u003Cspan class=\"hljs-string\">"tab-container"\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">className\u003C/span>=\u003Cspan class=\"hljs-string\">"tab-headers"\u003C/span>>\u003C/span>\n        {tabs.map((tab, index) => (\n          \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">button\u003C/span>\n            \u003Cspan class=\"hljs-attr\">key\u003C/span>=\u003Cspan class=\"hljs-string\">{index}\u003C/span>\n            \u003Cspan class=\"hljs-attr\">className\u003C/span>=\u003Cspan class=\"hljs-string\">{\u003C/span>`\u003Cspan class=\"hljs-attr\">tab-header\u003C/span> ${\u003Cspan class=\"hljs-attr\">activeTab\u003C/span> === \u003Cspan class=\"hljs-string\">index\u003C/span> ? '\u003Cspan class=\"hljs-attr\">active\u003C/span>' \u003Cspan class=\"hljs-attr\">:\u003C/span> ''}`}\n            \u003Cspan class=\"hljs-attr\">onClick\u003C/span>=\u003Cspan class=\"hljs-string\">{()\u003C/span> =>\u003C/span> setActiveTab(index)}\n          >\n            {tab.props.title}\n          \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">button\u003C/span>>\u003C/span>\n        ))}\n      \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> \u003Cspan class=\"hljs-attr\">className\u003C/span>=\u003Cspan class=\"hljs-string\">"tab-content"\u003C/span>>\u003C/span>\n        {tabs[activeTab]}\n      \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>\u003C/span>\n  );\n};\n\n\u003Cspan class=\"hljs-keyword\">const\u003C/span> \u003Cspan class=\"hljs-title function_\">TabPanel\u003C/span> = (\u003Cspan class=\"hljs-params\">{ title, children }\u003C/span>) => (\n  \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">className\u003C/span>=\u003Cspan class=\"hljs-string\">"tab-panel"\u003C/span>>\u003C/span>\n    {children}\n  \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\u003C/span>\n);\n\n\u003Cspan class=\"hljs-comment\">// Plugin to handle custom directives\u003C/span>\n\u003Cspan class=\"hljs-keyword\">const\u003C/span> \u003Cspan class=\"hljs-title function_\">customDirectivePlugin\u003C/span> = (\u003Cspan class=\"hljs-params\">\u003C/span>) => {\n  \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">tree\u003C/span>) =>\u003C/span> {\n    \u003Cspan class=\"hljs-title function_\">visit\u003C/span>(tree, \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">node\u003C/span>) =>\u003C/span> {\n      \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\n        node.\u003Cspan class=\"hljs-property\">type\u003C/span> === \u003Cspan class=\"hljs-string\">'textDirective'\u003C/span> ||\n        node.\u003Cspan class=\"hljs-property\">type\u003C/span> === \u003Cspan class=\"hljs-string\">'leafDirective'\u003C/span> ||\n        node.\u003Cspan class=\"hljs-property\">type\u003C/span> === \u003Cspan class=\"hljs-string\">'containerDirective'\u003C/span>\n      ) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> data = node.\u003Cspan class=\"hljs-property\">data\u003C/span> || (node.\u003Cspan class=\"hljs-property\">data\u003C/span> = {});\n        data.\u003Cspan class=\"hljs-property\">hName\u003C/span> = node.\u003Cspan class=\"hljs-property\">name\u003C/span>;\n        data.\u003Cspan class=\"hljs-property\">hProperties\u003C/span> = node.\u003Cspan class=\"hljs-property\">attributes\u003C/span>;\n      }\n    });\n  };\n};\n\n\u003Cspan class=\"hljs-keyword\">const\u003C/span> \u003Cspan class=\"hljs-title function_\">CustomComponentRenderer\u003C/span> = (\u003Cspan class=\"hljs-params\">{ content }\u003C/span>) => {\n  \u003Cspan class=\"hljs-keyword\">const\u003C/span> components = {\n    \u003Cspan class=\"hljs-comment\">// Standard markdown elements\u003C/span>\n    \u003Cspan class=\"hljs-attr\">pre\u003C/span>: \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">{ node, children, ...props }\u003C/span>) =>\u003C/span> {\n      \u003Cspan class=\"hljs-keyword\">const\u003C/span> codeElement = children.\u003Cspan class=\"hljs-property\">props\u003C/span>;\n      \u003Cspan class=\"hljs-keyword\">const\u003C/span> language = codeElement?.\u003Cspan class=\"hljs-property\">className\u003C/span>?.\u003Cspan class=\"hljs-title function_\">replace\u003C/span>(\u003Cspan class=\"hljs-string\">'language-'\u003C/span>, \u003Cspan class=\"hljs-string\">''\u003C/span>) || \u003Cspan class=\"hljs-string\">''\u003C/span>;\n      \u003Cspan class=\"hljs-keyword\">const\u003C/span> isLive = codeElement?.\u003Cspan class=\"hljs-property\">live\u003C/span> === \u003Cspan class=\"hljs-string\">'true'\u003C/span>;\n      \n      \u003Cspan class=\"hljs-keyword\">return\u003C/span> (\n        \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">InteractiveCodeBlock\u003C/span> \n          \u003Cspan class=\"hljs-attr\">language\u003C/span>=\u003Cspan class=\"hljs-string\">{language}\u003C/span> \n          \u003Cspan class=\"hljs-attr\">live\u003C/span>=\u003Cspan class=\"hljs-string\">{isLive}\u003C/span>\n          {\u003Cspan class=\"hljs-attr\">...props\u003C/span>}\n        >\u003C/span>\n          {codeElement.children}\n        \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">InteractiveCodeBlock\u003C/span>>\u003C/span>\u003C/span>\n      );\n    },\n    \n    \u003Cspan class=\"hljs-comment\">// Custom directive components\u003C/span>\n    \u003Cspan class=\"hljs-attr\">alert\u003C/span>: \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">{ type, title, children }\u003C/span>) =>\u003C/span> (\n      \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">AlertBox\u003C/span> \u003Cspan class=\"hljs-attr\">type\u003C/span>=\u003Cspan class=\"hljs-string\">{type}\u003C/span> \u003Cspan class=\"hljs-attr\">title\u003C/span>=\u003Cspan class=\"hljs-string\">{title}\u003C/span>>\u003C/span>\n        {children}\n      \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">AlertBox\u003C/span>>\u003C/span>\u003C/span>\n    ),\n    \n    \u003Cspan class=\"hljs-attr\">tabs\u003C/span>: \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">{ children }\u003C/span>) =>\u003C/span> (\n      \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">TabContainer\u003C/span>>\u003C/span>\n        {children}\n      \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">TabContainer\u003C/span>>\u003C/span>\u003C/span>\n    ),\n    \n    \u003Cspan class=\"hljs-attr\">tab\u003C/span>: \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">{ title, children }\u003C/span>) =>\u003C/span> (\n      \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">TabPanel\u003C/span> \u003Cspan class=\"hljs-attr\">title\u003C/span>=\u003Cspan class=\"hljs-string\">{title}\u003C/span>>\u003C/span>\n        {children}\n      \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">TabPanel\u003C/span>>\u003C/span>\u003C/span>\n    ),\n    \n    \u003Cspan class=\"hljs-comment\">// Interactive elements\u003C/span>\n    \u003Cspan class=\"hljs-attr\">button\u003C/span>: \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">{ onClick, variant = \u003Cspan class=\"hljs-string\">'primary'\u003C/span>, children, ...props }\u003C/span>) =>\u003C/span> (\n      \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">button\u003C/span> \n        \u003Cspan class=\"hljs-attr\">className\u003C/span>=\u003Cspan class=\"hljs-string\">{\u003C/span>`\u003Cspan class=\"hljs-attr\">btn\u003C/span> \u003Cspan class=\"hljs-attr\">btn-\u003C/span>${\u003Cspan class=\"hljs-attr\">variant\u003C/span>}`} \n        \u003Cspan class=\"hljs-attr\">onClick\u003C/span>=\u003Cspan class=\"hljs-string\">{()\u003C/span> =>\u003C/span> onClick && onClick()}\n        {...props}\n      >\n        {children}\n      \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">button\u003C/span>>\u003C/span>\u003C/span>\n    ),\n    \n    \u003Cspan class=\"hljs-comment\">// Data visualization placeholder\u003C/span>\n    \u003Cspan class=\"hljs-attr\">chart\u003C/span>: \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">{ type, data, ...props }\u003C/span>) =>\u003C/span> (\n      \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">className\u003C/span>=\u003Cspan class=\"hljs-string\">"chart-placeholder"\u003C/span> {\u003Cspan class=\"hljs-attr\">...props\u003C/span>}>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">p\u003C/span>>\u003C/span>Chart: {type}\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">p\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">pre\u003C/span>>\u003C/span>{JSON.stringify(data, null, 2)}\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">pre\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\u003C/span>\n    )\n  };\n\n  \u003Cspan class=\"hljs-keyword\">return\u003C/span> (\n    \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">className\u003C/span>=\u003Cspan class=\"hljs-string\">"custom-markdown-content"\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">ReactMarkdown\u003C/span>\n        \u003Cspan class=\"hljs-attr\">remarkPlugins\u003C/span>=\u003Cspan class=\"hljs-string\">{[remarkGfm,\u003C/span> \u003Cspan class=\"hljs-attr\">remarkDirective\u003C/span>, \u003Cspan class=\"hljs-attr\">customDirectivePlugin\u003C/span>]}\n        \u003Cspan class=\"hljs-attr\">components\u003C/span>=\u003Cspan class=\"hljs-string\">{components}\u003C/span>\n        \u003Cspan class=\"hljs-attr\">children\u003C/span>=\u003Cspan class=\"hljs-string\">{content}\u003C/span>\n      />\u003C/span>\n    \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\u003C/span>\n  );\n};\n\n\u003Cspan class=\"hljs-keyword\">export\u003C/span> \u003Cspan class=\"hljs-keyword\">default\u003C/span> \u003Cspan class=\"hljs-title class_\">CustomComponentRenderer\u003C/span>;\n\u003C/code>\u003C/pre>\u003Ch2 id=\"security-and-sanitization\">Security and Sanitization\u003C/h2>\n\u003Ch3 id=\"safe-html-rendering\">Safe HTML Rendering\u003C/h3>\n\u003Cpre>\u003Ccode class=\"hljs language-jsx\">\u003Cspan class=\"hljs-comment\">// SecureMarkdownRenderer.jsx - Security-focused implementation\u003C/span>\n\u003Cspan class=\"hljs-keyword\">import\u003C/span> \u003Cspan class=\"hljs-title class_\">React\u003C/span> \u003Cspan class=\"hljs-keyword\">from\u003C/span> \u003Cspan class=\"hljs-string\">'react'\u003C/span>;\n\u003Cspan class=\"hljs-keyword\">import\u003C/span> \u003Cspan class=\"hljs-title class_\">ReactMarkdown\u003C/span> \u003Cspan class=\"hljs-keyword\">from\u003C/span> \u003Cspan class=\"hljs-string\">'react-markdown'\u003C/span>;\n\u003Cspan class=\"hljs-keyword\">import\u003C/span> remarkGfm \u003Cspan class=\"hljs-keyword\">from\u003C/span> \u003Cspan class=\"hljs-string\">'remark-gfm'\u003C/span>;\n\u003Cspan class=\"hljs-keyword\">import\u003C/span> rehypeSanitize, { defaultSchema } \u003Cspan class=\"hljs-keyword\">from\u003C/span> \u003Cspan class=\"hljs-string\">'rehype-sanitize'\u003C/span>;\n\u003Cspan class=\"hljs-keyword\">import\u003C/span> rehypeExternalLinks \u003Cspan class=\"hljs-keyword\">from\u003C/span> \u003Cspan class=\"hljs-string\">'rehype-external-links'\u003C/span>;\n\n\u003Cspan class=\"hljs-keyword\">const\u003C/span> \u003Cspan class=\"hljs-title function_\">SecureMarkdownRenderer\u003C/span> = (\u003Cspan class=\"hljs-params\">{ content, allowHtml = \u003Cspan class=\"hljs-literal\">false\u003C/span>, trustedDomains = [] }\u003C/span>) => {\n  \u003Cspan class=\"hljs-comment\">// Define strict sanitization schema\u003C/span>\n  \u003Cspan class=\"hljs-keyword\">const\u003C/span> securitySchema = {\n    ...defaultSchema,\n    \u003Cspan class=\"hljs-attr\">attributes\u003C/span>: {\n      ...defaultSchema.\u003Cspan class=\"hljs-property\">attributes\u003C/span>,\n      \u003Cspan class=\"hljs-comment\">// Restrict class names to prevent XSS\u003C/span>\n      \u003Cspan class=\"hljs-string\">'*'\u003C/span>: [\u003Cspan class=\"hljs-string\">'className'\u003C/span>].\u003Cspan class=\"hljs-title function_\">filter\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">attr\u003C/span> =>\u003C/span> \n        ![\u003Cspan class=\"hljs-string\">'onClick'\u003C/span>, \u003Cspan class=\"hljs-string\">'onLoad'\u003C/span>, \u003Cspan class=\"hljs-string\">'onError'\u003C/span>, \u003Cspan class=\"hljs-string\">'onMouseOver'\u003C/span>].\u003Cspan class=\"hljs-title function_\">includes\u003C/span>(attr)\n      ),\n      \u003Cspan class=\"hljs-comment\">// Allow specific attributes for links\u003C/span>\n      \u003Cspan class=\"hljs-attr\">a\u003C/span>: [\u003Cspan class=\"hljs-string\">'href'\u003C/span>, \u003Cspan class=\"hljs-string\">'title'\u003C/span>, \u003Cspan class=\"hljs-string\">'target'\u003C/span>, \u003Cspan class=\"hljs-string\">'rel'\u003C/span>],\n      \u003Cspan class=\"hljs-comment\">// Allow data attributes for custom functionality (carefully)\u003C/span>\n      \u003Cspan class=\"hljs-attr\">div\u003C/span>: [\u003Cspan class=\"hljs-string\">'className'\u003C/span>, \u003Cspan class=\"hljs-string\">'data-component-type'\u003C/span>],\n      \u003Cspan class=\"hljs-attr\">span\u003C/span>: [\u003Cspan class=\"hljs-string\">'className'\u003C/span>]\n    },\n    \u003Cspan class=\"hljs-attr\">tagNames\u003C/span>: [\n      ...defaultSchema.\u003Cspan class=\"hljs-property\">tagNames\u003C/span>,\n      \u003Cspan class=\"hljs-comment\">// Remove potentially dangerous tags\u003C/span>\n    ].\u003Cspan class=\"hljs-title function_\">filter\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">tag\u003C/span> =>\u003C/span> ![\u003Cspan class=\"hljs-string\">'script'\u003C/span>, \u003Cspan class=\"hljs-string\">'iframe'\u003C/span>, \u003Cspan class=\"hljs-string\">'embed'\u003C/span>, \u003Cspan class=\"hljs-string\">'object'\u003C/span>].\u003Cspan class=\"hljs-title function_\">includes\u003C/span>(tag))\n  };\n  \n  \u003Cspan class=\"hljs-comment\">// URL validation for links and images\u003C/span>\n  \u003Cspan class=\"hljs-keyword\">const\u003C/span> \u003Cspan class=\"hljs-title function_\">validateUrl\u003C/span> = (\u003Cspan class=\"hljs-params\">url\u003C/span>) => {\n    \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!url) \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-literal\">false\u003C/span>;\n    \n    \u003Cspan class=\"hljs-keyword\">try\u003C/span> {\n      \u003Cspan class=\"hljs-keyword\">const\u003C/span> parsed = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title function_\">URL\u003C/span>(url);\n      \n      \u003Cspan class=\"hljs-comment\">// Allow only safe protocols\u003C/span>\n      \u003Cspan class=\"hljs-keyword\">const\u003C/span> safeProtocols = [\u003Cspan class=\"hljs-string\">'http:'\u003C/span>, \u003Cspan class=\"hljs-string\">'https:'\u003C/span>, \u003Cspan class=\"hljs-string\">'mailto:'\u003C/span>];\n      \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!safeProtocols.\u003Cspan class=\"hljs-title function_\">includes\u003C/span>(parsed.\u003Cspan class=\"hljs-property\">protocol\u003C/span>)) {\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-literal\">false\u003C/span>;\n      }\n      \n      \u003Cspan class=\"hljs-comment\">// Check against trusted domains if specified\u003C/span>\n      \u003Cspan class=\"hljs-keyword\">if\u003C/span> (trustedDomains.\u003Cspan class=\"hljs-property\">length\u003C/span> > \u003Cspan class=\"hljs-number\">0\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> trustedDomains.\u003Cspan class=\"hljs-title function_\">some\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">domain\u003C/span> =>\u003C/span> \n          parsed.\u003Cspan class=\"hljs-property\">hostname\u003C/span>.\u003Cspan class=\"hljs-title function_\">endsWith\u003C/span>(domain)\n        );\n      }\n      \n      \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-literal\">true\u003C/span>;\n    } \u003Cspan class=\"hljs-keyword\">catch\u003C/span> {\n      \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-literal\">false\u003C/span>;\n    }\n  };\n  \n  \u003Cspan class=\"hljs-keyword\">const\u003C/span> secureComponents = {\n    \u003Cspan class=\"hljs-comment\">// Secure link rendering\u003C/span>\n    \u003Cspan class=\"hljs-attr\">a\u003C/span>: \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">{ node, children, href, ...props }\u003C/span>) =>\u003C/span> {\n      \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!\u003Cspan class=\"hljs-title function_\">validateUrl\u003C/span>(href)) {\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\u003C/span> \u003Cspan class=\"hljs-attr\">className\u003C/span>=\u003Cspan class=\"hljs-string\">"invalid-link"\u003C/span>>\u003C/span>{children}\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">span\u003C/span>>\u003C/span>\u003C/span>;\n      }\n      \n      \u003Cspan class=\"hljs-keyword\">const\u003C/span> isExternal = href && !href.\u003Cspan class=\"hljs-title function_\">startsWith\u003C/span>(\u003Cspan class=\"hljs-string\">'/'\u003C/span>);\n      \n      \u003Cspan class=\"hljs-keyword\">return\u003C/span> (\n        \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">a\u003C/span>\n          \u003Cspan class=\"hljs-attr\">href\u003C/span>=\u003Cspan class=\"hljs-string\">{href}\u003C/span>\n          \u003Cspan class=\"hljs-attr\">target\u003C/span>=\u003Cspan class=\"hljs-string\">{isExternal\u003C/span> ? '\u003Cspan class=\"hljs-attr\">_blank\u003C/span>' \u003Cspan class=\"hljs-attr\">:\u003C/span> '\u003Cspan class=\"hljs-attr\">_self\u003C/span>'}\n          \u003Cspan class=\"hljs-attr\">rel\u003C/span>=\u003Cspan class=\"hljs-string\">{isExternal\u003C/span> ? '\u003Cspan class=\"hljs-attr\">noopener\u003C/span> \u003Cspan class=\"hljs-attr\">noreferrer\u003C/span> \u003Cspan class=\"hljs-attr\">nofollow\u003C/span>' \u003Cspan class=\"hljs-attr\">:\u003C/span> \u003Cspan class=\"hljs-attr\">undefined\u003C/span>}\n          \u003Cspan class=\"hljs-attr\">className\u003C/span>=\u003Cspan class=\"hljs-string\">"secure-link"\u003C/span>\n          {\u003Cspan class=\"hljs-attr\">...props\u003C/span>}\n        >\u003C/span>\n          {children}\n        \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">a\u003C/span>>\u003C/span>\u003C/span>\n      );\n    },\n    \n    \u003Cspan class=\"hljs-comment\">// Secure image rendering\u003C/span>\n    \u003Cspan class=\"hljs-attr\">img\u003C/span>: \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">{ node, src, alt, ...props }\u003C/span>) =>\u003C/span> {\n      \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!\u003Cspan class=\"hljs-title function_\">validateUrl\u003C/span>(src)) {\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> (\n          \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">className\u003C/span>=\u003Cspan class=\"hljs-string\">"invalid-image"\u003C/span>>\u003C/span>\n            \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\u003C/span>>\u003C/span>Invalid image source\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">span\u003C/span>>\u003C/span>\n            {alt && \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\u003C/span> \u003Cspan class=\"hljs-attr\">className\u003C/span>=\u003Cspan class=\"hljs-string\">"alt-text"\u003C/span>>\u003C/span>Alt: {alt}\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>\u003C/span>\n        );\n      }\n      \n      \u003Cspan class=\"hljs-keyword\">return\u003C/span> (\n        \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">img\u003C/span>\n          \u003Cspan class=\"hljs-attr\">src\u003C/span>=\u003Cspan class=\"hljs-string\">{src}\u003C/span>\n          \u003Cspan class=\"hljs-attr\">alt\u003C/span>=\u003Cspan class=\"hljs-string\">{alt}\u003C/span>\n          \u003Cspan class=\"hljs-attr\">loading\u003C/span>=\u003Cspan class=\"hljs-string\">"lazy"\u003C/span>\n          \u003Cspan class=\"hljs-attr\">onError\u003C/span>=\u003Cspan class=\"hljs-string\">{(e)\u003C/span> =>\u003C/span> {\n            e.target.style.display = 'none';\n            e.target.nextSibling.style.display = 'block';\n          }}\n          {...props}\n        />\u003C/span>\n      );\n    },\n    \n    \u003Cspan class=\"hljs-comment\">// Prevent inline HTML if not explicitly allowed\u003C/span>\n    \u003Cspan class=\"hljs-attr\">html\u003C/span>: allowHtml ? \u003Cspan class=\"hljs-literal\">undefined\u003C/span> : \u003Cspan class=\"hljs-function\">() =>\u003C/span> \u003Cspan class=\"hljs-literal\">null\u003C/span>,\n    \n    \u003Cspan class=\"hljs-comment\">// Secure code blocks (prevent injection)\u003C/span>\n    \u003Cspan class=\"hljs-attr\">code\u003C/span>: \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">{ node, inline, className, children, ...props }\u003C/span>) =>\u003C/span> {\n      \u003Cspan class=\"hljs-comment\">// Sanitize code content\u003C/span>\n      \u003Cspan class=\"hljs-keyword\">const\u003C/span> codeContent = \u003Cspan class=\"hljs-title class_\">String\u003C/span>(children).\u003Cspan class=\"hljs-title function_\">replace\u003C/span>(\u003Cspan class=\"hljs-regexp\">/[<>&"']/g\u003C/span>, \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">char\u003C/span>) =>\u003C/span> {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> entities = { \u003Cspan class=\"hljs-string\">'<'\u003C/span>: \u003Cspan class=\"hljs-string\">'<'\u003C/span>, \u003Cspan class=\"hljs-string\">'>'\u003C/span>: \u003Cspan class=\"hljs-string\">'>'\u003C/span>, \u003Cspan class=\"hljs-string\">'&'\u003C/span>: \u003Cspan class=\"hljs-string\">'&'\u003C/span>, \u003Cspan class=\"hljs-string\">'"'\u003C/span>: \u003Cspan class=\"hljs-string\">'"'\u003C/span>, \u003Cspan class=\"hljs-string\">"'"\u003C/span>: \u003Cspan class=\"hljs-string\">'''\u003C/span> };\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> entities[char];\n      });\n      \n      \u003Cspan class=\"hljs-keyword\">if\u003C/span> (inline) {\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">code\u003C/span> \u003Cspan class=\"hljs-attr\">className\u003C/span>=\u003Cspan class=\"hljs-string\">"inline-code"\u003C/span> {\u003Cspan class=\"hljs-attr\">...props\u003C/span>}>\u003C/span>{codeContent}\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">code\u003C/span>>\u003C/span>\u003C/span>;\n      }\n      \n      \u003Cspan class=\"hljs-keyword\">return\u003C/span> (\n        \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">pre\u003C/span> \u003Cspan class=\"hljs-attr\">className\u003C/span>=\u003Cspan class=\"hljs-string\">"code-block"\u003C/span>>\u003C/span>\n          \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">code\u003C/span> \u003Cspan class=\"hljs-attr\">className\u003C/span>=\u003Cspan class=\"hljs-string\">{className}\u003C/span> {\u003Cspan class=\"hljs-attr\">...props\u003C/span>}>\u003C/span>{codeContent}\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">code\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">pre\u003C/span>>\u003C/span>\u003C/span>\n      );\n    }\n  };\n\n  \u003Cspan class=\"hljs-keyword\">return\u003C/span> (\n    \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">className\u003C/span>=\u003Cspan class=\"hljs-string\">"secure-markdown-content"\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">ReactMarkdown\u003C/span>\n        \u003Cspan class=\"hljs-attr\">remarkPlugins\u003C/span>=\u003Cspan class=\"hljs-string\">{[remarkGfm]}\u003C/span>\n        \u003Cspan class=\"hljs-attr\">rehypePlugins\u003C/span>=\u003Cspan class=\"hljs-string\">{[\u003C/span>\n          [\u003Cspan class=\"hljs-attr\">rehypeSanitize\u003C/span>, \u003Cspan class=\"hljs-attr\">securitySchema\u003C/span>],\n          [\u003Cspan class=\"hljs-attr\">rehypeExternalLinks\u003C/span>, {\n            \u003Cspan class=\"hljs-attr\">target:\u003C/span> '\u003Cspan class=\"hljs-attr\">_blank\u003C/span>',\n            \u003Cspan class=\"hljs-attr\">rel:\u003C/span> '\u003Cspan class=\"hljs-attr\">noopener\u003C/span> \u003Cspan class=\"hljs-attr\">noreferrer\u003C/span> \u003Cspan class=\"hljs-attr\">nofollow\u003C/span>'\n          }]\n        ]}\n        \u003Cspan class=\"hljs-attr\">components\u003C/span>=\u003Cspan class=\"hljs-string\">{secureComponents}\u003C/span>\n        \u003Cspan class=\"hljs-attr\">skipHtml\u003C/span>=\u003Cspan class=\"hljs-string\">{!allowHtml}\u003C/span>\n        \u003Cspan class=\"hljs-attr\">children\u003C/span>=\u003Cspan class=\"hljs-string\">{content}\u003C/span>\n      />\u003C/span>\n    \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\u003C/span>\n  );\n};\n\n\u003Cspan class=\"hljs-comment\">// Usage with security configuration\u003C/span>\n\u003Cspan class=\"hljs-keyword\">const\u003C/span> \u003Cspan class=\"hljs-title function_\">App\u003C/span> = (\u003Cspan class=\"hljs-params\">\u003C/span>) => {\n  \u003Cspan class=\"hljs-keyword\">const\u003C/span> userContent = \u003Cspan class=\"hljs-string\">`\n# User Generated Content\n\nThis content comes from users and needs **careful sanitization**.\n\n[Safe internal link](/docs)\n[External link](https://trusted-domain.com)\n[Unsafe link](javascript:alert('xss'))\n\n![Safe image](https://trusted-domain.com/image.jpg)\n![Unsafe image](javascript:void(0))\n\n\\`\\`\\`javascript\n// Code is automatically sanitized\nconst userInput = '<script>alert("xss")</script>';\nconsole.log(userInput);\n\\`\\`\\`\n  `\u003C/span>;\n\n  \u003Cspan class=\"hljs-keyword\">return\u003C/span> (\n    \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">SecureMarkdownRenderer\u003C/span> \n      \u003Cspan class=\"hljs-attr\">content\u003C/span>=\u003Cspan class=\"hljs-string\">{userContent}\u003C/span>\n      \u003Cspan class=\"hljs-attr\">trustedDomains\u003C/span>=\u003Cspan class=\"hljs-string\">{[\u003C/span>'\u003Cspan class=\"hljs-attr\">trusted-domain.com\u003C/span>', '\u003Cspan class=\"hljs-attr\">cdn.example.com\u003C/span>']}\n      \u003Cspan class=\"hljs-attr\">allowHtml\u003C/span>=\u003Cspan class=\"hljs-string\">{false}\u003C/span>\n    />\u003C/span>\u003C/span>\n  );\n};\n\u003C/code>\u003C/pre>\u003Ch2 id=\"performance-optimization-strategies\">Performance Optimization Strategies\u003C/h2>\n\u003Ch3 id=\"memoization-and-lazy-loading\">Memoization and Lazy Loading\u003C/h3>\n\u003Cpre>\u003Ccode class=\"hljs language-jsx\">\u003Cspan class=\"hljs-comment\">// OptimizedMarkdownRenderer.jsx - Performance-focused implementation\u003C/span>\n\u003Cspan class=\"hljs-keyword\">import\u003C/span> \u003Cspan class=\"hljs-title class_\">React\u003C/span>, { useState, useMemo, useCallback, lazy, \u003Cspan class=\"hljs-title class_\">Suspense\u003C/span> } \u003Cspan class=\"hljs-keyword\">from\u003C/span> \u003Cspan class=\"hljs-string\">'react'\u003C/span>;\n\u003Cspan class=\"hljs-keyword\">import\u003C/span> \u003Cspan class=\"hljs-title class_\">ReactMarkdown\u003C/span> \u003Cspan class=\"hljs-keyword\">from\u003C/span> \u003Cspan class=\"hljs-string\">'react-markdown'\u003C/span>;\n\u003Cspan class=\"hljs-keyword\">import\u003C/span> remarkGfm \u003Cspan class=\"hljs-keyword\">from\u003C/span> \u003Cspan class=\"hljs-string\">'remark-gfm'\u003C/span>;\n\u003Cspan class=\"hljs-keyword\">import\u003C/span> { \u003Cspan class=\"hljs-title class_\">FixedSizeList\u003C/span> \u003Cspan class=\"hljs-keyword\">as\u003C/span> \u003Cspan class=\"hljs-title class_\">List\u003C/span> } \u003Cspan class=\"hljs-keyword\">from\u003C/span> \u003Cspan class=\"hljs-string\">'react-window'\u003C/span>;\n\n\u003Cspan class=\"hljs-comment\">// Lazy load heavy components\u003C/span>\n\u003Cspan class=\"hljs-keyword\">const\u003C/span> \u003Cspan class=\"hljs-title class_\">SyntaxHighlighter\u003C/span> = \u003Cspan class=\"hljs-title function_\">lazy\u003C/span>(\u003Cspan class=\"hljs-function\">() =>\u003C/span> \u003Cspan class=\"hljs-keyword\">import\u003C/span>(\u003Cspan class=\"hljs-string\">'react-syntax-highlighter'\u003C/span>));\n\u003Cspan class=\"hljs-keyword\">const\u003C/span> \u003Cspan class=\"hljs-title class_\">MathRenderer\u003C/span> = \u003Cspan class=\"hljs-title function_\">lazy\u003C/span>(\u003Cspan class=\"hljs-function\">() =>\u003C/span> \u003Cspan class=\"hljs-keyword\">import\u003C/span>(\u003Cspan class=\"hljs-string\">'./MathRenderer'\u003C/span>));\n\n\u003Cspan class=\"hljs-comment\">// Memoized code block component\u003C/span>\n\u003Cspan class=\"hljs-keyword\">const\u003C/span> \u003Cspan class=\"hljs-title class_\">CodeBlock\u003C/span> = \u003Cspan class=\"hljs-title class_\">React\u003C/span>.\u003Cspan class=\"hljs-title function_\">memo\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">{ language, children, inline = \u003Cspan class=\"hljs-literal\">false\u003C/span> }\u003C/span>) =>\u003C/span> {\n  \u003Cspan class=\"hljs-keyword\">if\u003C/span> (inline) {\n    \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">code\u003C/span> \u003Cspan class=\"hljs-attr\">className\u003C/span>=\u003Cspan class=\"hljs-string\">"inline-code"\u003C/span>>\u003C/span>{children}\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">code\u003C/span>>\u003C/span>\u003C/span>;\n  }\n\n  \u003Cspan class=\"hljs-keyword\">return\u003C/span> (\n    \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">Suspense\u003C/span> \u003Cspan class=\"hljs-attr\">fallback\u003C/span>=\u003Cspan class=\"hljs-string\">{\u003C/span><\u003Cspan class=\"hljs-attr\">div\u003C/span> \u003Cspan class=\"hljs-attr\">className\u003C/span>=\u003Cspan class=\"hljs-string\">"loading-code"\u003C/span>>\u003C/span>Loading syntax highlighting...\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>}>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">SyntaxHighlighter\u003C/span> \u003Cspan class=\"hljs-attr\">language\u003C/span>=\u003Cspan class=\"hljs-string\">{language}\u003C/span> \u003Cspan class=\"hljs-attr\">className\u003C/span>=\u003Cspan class=\"hljs-string\">"code-block"\u003C/span>>\u003C/span>\n        {children}\n      \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">SyntaxHighlighter\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">Suspense\u003C/span>>\u003C/span>\u003C/span>\n  );\n});\n\n\u003Cspan class=\"hljs-comment\">// Virtualized markdown renderer for large content\u003C/span>\n\u003Cspan class=\"hljs-keyword\">const\u003C/span> \u003Cspan class=\"hljs-title function_\">VirtualizedMarkdownRenderer\u003C/span> = (\u003Cspan class=\"hljs-params\">{ content, itemHeight = \u003Cspan class=\"hljs-number\">50\u003C/span> }\u003C/span>) => {\n  \u003Cspan class=\"hljs-keyword\">const\u003C/span> paragraphs = \u003Cspan class=\"hljs-title function_\">useMemo\u003C/span>(\u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n    \u003Cspan class=\"hljs-keyword\">return\u003C/span> content.\u003Cspan class=\"hljs-title function_\">split\u003C/span>(\u003Cspan class=\"hljs-string\">'\\n\\n'\u003C/span>).\u003Cspan class=\"hljs-title function_\">filter\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">paragraph\u003C/span> =>\u003C/span> paragraph.\u003Cspan class=\"hljs-title function_\">trim\u003C/span>());\n  }, [content]);\n\n  \u003Cspan class=\"hljs-keyword\">const\u003C/span> renderRow = \u003Cspan class=\"hljs-title function_\">useCallback\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">{ index, style }\u003C/span>) =>\u003C/span> {\n    \u003Cspan class=\"hljs-keyword\">return\u003C/span> (\n      \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">{style}\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">ReactMarkdown\u003C/span>\n          \u003Cspan class=\"hljs-attr\">remarkPlugins\u003C/span>=\u003Cspan class=\"hljs-string\">{[remarkGfm]}\u003C/span>\n          \u003Cspan class=\"hljs-attr\">components\u003C/span>=\u003Cspan class=\"hljs-string\">{{\u003C/span>\n            \u003Cspan class=\"hljs-attr\">code:\u003C/span> \u003Cspan class=\"hljs-attr\">CodeBlock\u003C/span>\n          }}\n        >\u003C/span>\n          {paragraphs[index]}\n        \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">ReactMarkdown\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\u003C/span>\n    );\n  }, [paragraphs]);\n\n  \u003Cspan class=\"hljs-keyword\">return\u003C/span> (\n    \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">List\u003C/span>\n      \u003Cspan class=\"hljs-attr\">height\u003C/span>=\u003Cspan class=\"hljs-string\">{600}\u003C/span>\n      \u003Cspan class=\"hljs-attr\">itemCount\u003C/span>=\u003Cspan class=\"hljs-string\">{paragraphs.length}\u003C/span>\n      \u003Cspan class=\"hljs-attr\">itemSize\u003C/span>=\u003Cspan class=\"hljs-string\">{itemHeight}\u003C/span>\n      \u003Cspan class=\"hljs-attr\">className\u003C/span>=\u003Cspan class=\"hljs-string\">"virtualized-markdown"\u003C/span>\n    >\u003C/span>\n      {renderRow}\n    \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">List\u003C/span>>\u003C/span>\u003C/span>\n  );\n};\n\n\u003Cspan class=\"hljs-comment\">// Optimized renderer with caching\u003C/span>\n\u003Cspan class=\"hljs-keyword\">const\u003C/span> \u003Cspan class=\"hljs-title function_\">OptimizedMarkdownRenderer\u003C/span> = (\u003Cspan class=\"hljs-params\">{ content, enableVirtualization = \u003Cspan class=\"hljs-literal\">false\u003C/span> }\u003C/span>) => {\n  \u003Cspan class=\"hljs-comment\">// Memoize parsed content\u003C/span>\n  \u003Cspan class=\"hljs-keyword\">const\u003C/span> memoizedComponents = \u003Cspan class=\"hljs-title function_\">useMemo\u003C/span>(\u003Cspan class=\"hljs-function\">() =>\u003C/span> ({\n    \u003Cspan class=\"hljs-attr\">code\u003C/span>: \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">{ node, inline, className, children, ...props }\u003C/span>) =>\u003C/span> {\n      \u003Cspan class=\"hljs-keyword\">const\u003C/span> match = \u003Cspan class=\"hljs-regexp\">/language-(\\w+)/\u003C/span>.\u003Cspan class=\"hljs-title function_\">exec\u003C/span>(className || \u003Cspan class=\"hljs-string\">''\u003C/span>);\n      \u003Cspan class=\"hljs-keyword\">const\u003C/span> language = match ? match[\u003Cspan class=\"hljs-number\">1\u003C/span>] : \u003Cspan class=\"hljs-string\">''\u003C/span>;\n      \n      \u003Cspan class=\"hljs-keyword\">return\u003C/span> (\n        \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">CodeBlock\u003C/span> \n          \u003Cspan class=\"hljs-attr\">language\u003C/span>=\u003Cspan class=\"hljs-string\">{language}\u003C/span> \n          \u003Cspan class=\"hljs-attr\">inline\u003C/span>=\u003Cspan class=\"hljs-string\">{inline}\u003C/span> \n          {\u003Cspan class=\"hljs-attr\">...props\u003C/span>}\n        >\u003C/span>\n          {String(children).replace(/\\n$/, '')}\n        \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">CodeBlock\u003C/span>>\u003C/span>\u003C/span>\n      );\n    },\n\n    \u003Cspan class=\"hljs-comment\">// Memoized heading component\u003C/span>\n    \u003Cspan class=\"hljs-attr\">h1\u003C/span>: \u003Cspan class=\"hljs-title class_\">React\u003C/span>.\u003Cspan class=\"hljs-title function_\">memo\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">{ children, ...props }\u003C/span>) =>\u003C/span> (\n      \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">h1\u003C/span> \u003Cspan class=\"hljs-attr\">className\u003C/span>=\u003Cspan class=\"hljs-string\">"optimized-h1"\u003C/span> {\u003Cspan class=\"hljs-attr\">...props\u003C/span>}>\u003C/span>{children}\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">h1\u003C/span>>\u003C/span>\u003C/span>\n    )),\n\n    \u003Cspan class=\"hljs-attr\">h2\u003C/span>: \u003Cspan class=\"hljs-title class_\">React\u003C/span>.\u003Cspan class=\"hljs-title function_\">memo\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">{ children, ...props }\u003C/span>) =>\u003C/span> (\n      \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">h2\u003C/span> \u003Cspan class=\"hljs-attr\">className\u003C/span>=\u003Cspan class=\"hljs-string\">"optimized-h2"\u003C/span> {\u003Cspan class=\"hljs-attr\">...props\u003C/span>}>\u003C/span>{children}\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">h2\u003C/span>>\u003C/span>\u003C/span>\n    )),\n\n    \u003Cspan class=\"hljs-comment\">// Lazy-loaded math component\u003C/span>\n    \u003Cspan class=\"hljs-attr\">math\u003C/span>: \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">{ children }\u003C/span>) =>\u003C/span> (\n      \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">Suspense\u003C/span> \u003Cspan class=\"hljs-attr\">fallback\u003C/span>=\u003Cspan class=\"hljs-string\">{\u003C/span><\u003Cspan class=\"hljs-attr\">span\u003C/span> \u003Cspan class=\"hljs-attr\">className\u003C/span>=\u003Cspan class=\"hljs-string\">"loading-math"\u003C/span>>\u003C/span>Loading math...\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">span\u003C/span>>\u003C/span>}>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">MathRenderer\u003C/span>>\u003C/span>{children}\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">MathRenderer\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">Suspense\u003C/span>>\u003C/span>\u003C/span>\n    ),\n\n    \u003Cspan class=\"hljs-comment\">// Optimized image with intersection observer\u003C/span>\n    \u003Cspan class=\"hljs-attr\">img\u003C/span>: \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">{ src, alt, ...props }\u003C/span>) =>\u003C/span> {\n      \u003Cspan class=\"hljs-keyword\">const\u003C/span> [loaded, setLoaded] = \u003Cspan class=\"hljs-title function_\">useState\u003C/span>(\u003Cspan class=\"hljs-literal\">false\u003C/span>);\n      \u003Cspan class=\"hljs-keyword\">const\u003C/span> [inView, setInView] = \u003Cspan class=\"hljs-title function_\">useState\u003C/span>(\u003Cspan class=\"hljs-literal\">false\u003C/span>);\n      \n      \u003Cspan class=\"hljs-keyword\">const\u003C/span> imgRef = \u003Cspan class=\"hljs-title function_\">useCallback\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">node\u003C/span> =>\u003C/span> {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (node) {\n          \u003Cspan class=\"hljs-keyword\">const\u003C/span> observer = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">IntersectionObserver\u003C/span>(\n            \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>) {\n                \u003Cspan class=\"hljs-title function_\">setInView\u003C/span>(\u003Cspan class=\"hljs-literal\">true\u003C/span>);\n                observer.\u003Cspan class=\"hljs-title function_\">disconnect\u003C/span>();\n              }\n            },\n            { \u003Cspan class=\"hljs-attr\">threshold\u003C/span>: \u003Cspan class=\"hljs-number\">0.1\u003C/span> }\n          );\n          observer.\u003Cspan class=\"hljs-title function_\">observe\u003C/span>(node);\n        }\n      }, []);\n\n      \u003Cspan class=\"hljs-keyword\">return\u003C/span> (\n        \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">ref\u003C/span>=\u003Cspan class=\"hljs-string\">{imgRef}\u003C/span> \u003Cspan class=\"hljs-attr\">className\u003C/span>=\u003Cspan class=\"hljs-string\">"optimized-image-container"\u003C/span>>\u003C/span>\n          {inView && (\n            \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">img\u003C/span>\n              \u003Cspan class=\"hljs-attr\">src\u003C/span>=\u003Cspan class=\"hljs-string\">{src}\u003C/span>\n              \u003Cspan class=\"hljs-attr\">alt\u003C/span>=\u003Cspan class=\"hljs-string\">{alt}\u003C/span>\n              \u003Cspan class=\"hljs-attr\">onLoad\u003C/span>=\u003Cspan class=\"hljs-string\">{()\u003C/span> =>\u003C/span> setLoaded(true)}\n              className={`optimized-img ${loaded ? 'loaded' : 'loading'}`}\n              {...props}\n            />\n          )}\n          {!loaded && inView && (\n            \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">className\u003C/span>=\u003Cspan class=\"hljs-string\">"image-placeholder"\u003C/span>>\u003C/span>Loading image...\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>>\u003C/span>\u003C/span>\n      );\n    }\n  }), []);\n\n  \u003Cspan class=\"hljs-comment\">// Cache rendered content\u003C/span>\n  \u003Cspan class=\"hljs-keyword\">const\u003C/span> renderedContent = \u003Cspan class=\"hljs-title function_\">useMemo\u003C/span>(\u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n    \u003Cspan class=\"hljs-keyword\">if\u003C/span> (enableVirtualization && content.\u003Cspan class=\"hljs-property\">length\u003C/span> > \u003Cspan class=\"hljs-number\">10000\u003C/span>) {\n      \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">VirtualizedMarkdownRenderer\u003C/span> \u003Cspan class=\"hljs-attr\">content\u003C/span>=\u003Cspan class=\"hljs-string\">{content}\u003C/span> />\u003C/span>\u003C/span>;\n    }\n\n    \u003Cspan class=\"hljs-keyword\">return\u003C/span> (\n      \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">ReactMarkdown\u003C/span>\n        \u003Cspan class=\"hljs-attr\">remarkPlugins\u003C/span>=\u003Cspan class=\"hljs-string\">{[remarkGfm]}\u003C/span>\n        \u003Cspan class=\"hljs-attr\">components\u003C/span>=\u003Cspan class=\"hljs-string\">{memoizedComponents}\u003C/span>\n        \u003Cspan class=\"hljs-attr\">children\u003C/span>=\u003Cspan class=\"hljs-string\">{content}\u003C/span>\n      />\u003C/span>\u003C/span>\n    );\n  }, [content, memoizedComponents, enableVirtualization]);\n\n  \u003Cspan class=\"hljs-keyword\">return\u003C/span> (\n    \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">className\u003C/span>=\u003Cspan class=\"hljs-string\">"optimized-markdown-content"\u003C/span>>\u003C/span>\n      {renderedContent}\n    \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\u003C/span>\n  );\n};\n\n\u003Cspan class=\"hljs-comment\">// Performance monitoring hook\u003C/span>\n\u003Cspan class=\"hljs-keyword\">const\u003C/span> \u003Cspan class=\"hljs-title function_\">useMarkdownPerformance\u003C/span> = (\u003Cspan class=\"hljs-params\">\u003C/span>) => {\n  \u003Cspan class=\"hljs-keyword\">const\u003C/span> [renderTime, setRenderTime] = \u003Cspan class=\"hljs-title function_\">useState\u003C/span>(\u003Cspan class=\"hljs-number\">0\u003C/span>);\n\n  \u003Cspan class=\"hljs-keyword\">const\u003C/span> measureRender = \u003Cspan class=\"hljs-title function_\">useCallback\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">callback\u003C/span>) =>\u003C/span> {\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> startTime = performance.\u003Cspan class=\"hljs-title function_\">now\u003C/span>();\n    \u003Cspan class=\"hljs-title function_\">callback\u003C/span>();\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> endTime = performance.\u003Cspan class=\"hljs-title function_\">now\u003C/span>();\n    \u003Cspan class=\"hljs-title function_\">setRenderTime\u003C/span>(endTime - startTime);\n  }, []);\n\n  \u003Cspan class=\"hljs-keyword\">return\u003C/span> { renderTime, measureRender };\n};\n\n\u003Cspan class=\"hljs-keyword\">export\u003C/span> \u003Cspan class=\"hljs-keyword\">default\u003C/span> \u003Cspan class=\"hljs-title class_\">OptimizedMarkdownRenderer\u003C/span>;\n\u003C/code>\u003C/pre>\u003Ch2 id=\"real-world-implementation-examples\">Real-World Implementation Examples\u003C/h2>\n\u003Ch3 id=\"documentation-system-integration\">Documentation System Integration\u003C/h3>\n\u003Cpre>\u003Ccode class=\"hljs language-jsx\">\u003Cspan class=\"hljs-comment\">// DocumentationSystem.jsx - Complete documentation application\u003C/span>\n\u003Cspan class=\"hljs-keyword\">import\u003C/span> \u003Cspan class=\"hljs-title class_\">React\u003C/span>, { useState, useEffect } \u003Cspan class=\"hljs-keyword\">from\u003C/span> \u003Cspan class=\"hljs-string\">'react'\u003C/span>;\n\u003Cspan class=\"hljs-keyword\">import\u003C/span> \u003Cspan class=\"hljs-title class_\">ReactMarkdown\u003C/span> \u003Cspan class=\"hljs-keyword\">from\u003C/span> \u003Cspan class=\"hljs-string\">'react-markdown'\u003C/span>;\n\u003Cspan class=\"hljs-keyword\">import\u003C/span> remarkGfm \u003Cspan class=\"hljs-keyword\">from\u003C/span> \u003Cspan class=\"hljs-string\">'remark-gfm'\u003C/span>;\n\u003Cspan class=\"hljs-keyword\">import\u003C/span> remarkSlug \u003Cspan class=\"hljs-keyword\">from\u003C/span> \u003Cspan class=\"hljs-string\">'remark-slug'\u003C/span>;\n\u003Cspan class=\"hljs-keyword\">import\u003C/span> remarkToc \u003Cspan class=\"hljs-keyword\">from\u003C/span> \u003Cspan class=\"hljs-string\">'remark-toc'\u003C/span>;\n\u003Cspan class=\"hljs-keyword\">import\u003C/span> rehypeHighlight \u003Cspan class=\"hljs-keyword\">from\u003C/span> \u003Cspan class=\"hljs-string\">'rehype-highlight'\u003C/span>;\n\u003Cspan class=\"hljs-keyword\">import\u003C/span> rehypeAutolinkHeadings \u003Cspan class=\"hljs-keyword\">from\u003C/span> \u003Cspan class=\"hljs-string\">'rehype-autolink-headings'\u003C/span>;\n\n\u003Cspan class=\"hljs-keyword\">const\u003C/span> \u003Cspan class=\"hljs-title function_\">DocumentationSystem\u003C/span> = (\u003Cspan class=\"hljs-params\">\u003C/span>) => {\n  \u003Cspan class=\"hljs-keyword\">const\u003C/span> [content, setContent] = \u003Cspan class=\"hljs-title function_\">useState\u003C/span>(\u003Cspan class=\"hljs-string\">''\u003C/span>);\n  \u003Cspan class=\"hljs-keyword\">const\u003C/span> [tableOfContents, setTableOfContents] = \u003Cspan class=\"hljs-title function_\">useState\u003C/span>([]);\n  \u003Cspan class=\"hljs-keyword\">const\u003C/span> [searchQuery, setSearchQuery] = \u003Cspan class=\"hljs-title function_\">useState\u003C/span>(\u003Cspan class=\"hljs-string\">''\u003C/span>);\n  \u003Cspan class=\"hljs-keyword\">const\u003C/span> [activeSection, setActiveSection] = \u003Cspan class=\"hljs-title function_\">useState\u003C/span>(\u003Cspan class=\"hljs-string\">''\u003C/span>);\n\n  \u003Cspan class=\"hljs-comment\">// Load documentation content\u003C/span>\n  \u003Cspan class=\"hljs-title function_\">useEffect\u003C/span>(\u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> \u003Cspan class=\"hljs-title function_\">loadDocumentation\u003C/span> = \u003Cspan class=\"hljs-keyword\">async\u003C/span> (\u003Cspan class=\"hljs-params\">\u003C/span>) => {\n      \u003Cspan class=\"hljs-keyword\">try\u003C/span> {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> response = \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-title function_\">fetch\u003C/span>(\u003Cspan class=\"hljs-string\">'/api/docs/current'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> markdown = \u003Cspan class=\"hljs-keyword\">await\u003C/span> response.\u003Cspan class=\"hljs-title function_\">text\u003C/span>();\n        \u003Cspan class=\"hljs-title function_\">setContent\u003C/span>(markdown);\n        \n        \u003Cspan class=\"hljs-comment\">// Generate table of contents\u003C/span>\n        \u003Cspan class=\"hljs-title function_\">generateTableOfContents\u003C/span>(markdown);\n      } \u003Cspan class=\"hljs-keyword\">catch\u003C/span> (error) {\n        \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">error\u003C/span>(\u003Cspan class=\"hljs-string\">'Failed to load documentation:'\u003C/span>, error);\n      }\n    };\n\n    \u003Cspan class=\"hljs-title function_\">loadDocumentation\u003C/span>();\n  }, []);\n\n  \u003Cspan class=\"hljs-comment\">// Generate table of contents from markdown headings\u003C/span>\n  \u003Cspan class=\"hljs-keyword\">const\u003C/span> \u003Cspan class=\"hljs-title function_\">generateTableOfContents\u003C/span> = (\u003Cspan class=\"hljs-params\">markdown\u003C/span>) => {\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> headingRegex = \u003Cspan class=\"hljs-regexp\">/^(#{1,6})\\s+(.+)$/gm\u003C/span>;\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> toc = [];\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>(markdown)) !== \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> title = match[\u003Cspan class=\"hljs-number\">2\u003C/span>];\n      \u003Cspan class=\"hljs-keyword\">const\u003C/span> slug = title.\u003Cspan class=\"hljs-title function_\">toLowerCase\u003C/span>().\u003Cspan class=\"hljs-title function_\">replace\u003C/span>(\u003Cspan class=\"hljs-regexp\">/[^\\w\\s-]/g\u003C/span>, \u003Cspan class=\"hljs-string\">''\u003C/span>).\u003Cspan class=\"hljs-title function_\">replace\u003C/span>(\u003Cspan class=\"hljs-regexp\">/\\s+/g\u003C/span>, \u003Cspan class=\"hljs-string\">'-'\u003C/span>);\n      \n      toc.\u003Cspan class=\"hljs-title function_\">push\u003C/span>({\n        level,\n        title,\n        slug,\n        \u003Cspan class=\"hljs-attr\">id\u003C/span>: \u003Cspan class=\"hljs-string\">`heading-\u003Cspan class=\"hljs-subst\">${slug}\u003C/span>`\u003C/span>\n      });\n    }\n\n    \u003Cspan class=\"hljs-title function_\">setTableOfContents\u003C/span>(toc);\n  };\n\n  \u003Cspan class=\"hljs-comment\">// Search functionality\u003C/span>\n  \u003Cspan class=\"hljs-keyword\">const\u003C/span> \u003Cspan class=\"hljs-title function_\">searchContent\u003C/span> = (\u003Cspan class=\"hljs-params\">query\u003C/span>) => {\n    \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!query.\u003Cspan class=\"hljs-title function_\">trim\u003C/span>()) \u003Cspan class=\"hljs-keyword\">return\u003C/span> content;\n    \n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> lines = content.\u003Cspan class=\"hljs-title function_\">split\u003C/span>(\u003Cspan class=\"hljs-string\">'\\n'\u003C/span>);\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> matchedLines = lines.\u003Cspan class=\"hljs-title function_\">filter\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">line\u003C/span> =>\u003C/span> \n      line.\u003Cspan class=\"hljs-title function_\">toLowerCase\u003C/span>().\u003Cspan class=\"hljs-title function_\">includes\u003C/span>(query.\u003Cspan class=\"hljs-title function_\">toLowerCase\u003C/span>())\n    );\n    \n    \u003Cspan class=\"hljs-keyword\">return\u003C/span> matchedLines.\u003Cspan class=\"hljs-title function_\">join\u003C/span>(\u003Cspan class=\"hljs-string\">'\\n'\u003C/span>);\n  };\n\n  \u003Cspan class=\"hljs-comment\">// Custom components for documentation\u003C/span>\n  \u003Cspan class=\"hljs-keyword\">const\u003C/span> documentationComponents = {\n    \u003Cspan class=\"hljs-attr\">h1\u003C/span>: \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">{ children, ...props }\u003C/span>) =>\u003C/span> (\n      \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">h1\u003C/span> \u003Cspan class=\"hljs-attr\">className\u003C/span>=\u003Cspan class=\"hljs-string\">"doc-heading doc-h1"\u003C/span> {\u003Cspan class=\"hljs-attr\">...props\u003C/span>}>\u003C/span>\n        {children}\n      \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">h1\u003C/span>>\u003C/span>\u003C/span>\n    ),\n\n    \u003Cspan class=\"hljs-attr\">h2\u003C/span>: \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">{ children, ...props }\u003C/span>) =>\u003C/span> (\n      \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">h2\u003C/span> \u003Cspan class=\"hljs-attr\">className\u003C/span>=\u003Cspan class=\"hljs-string\">"doc-heading doc-h2"\u003C/span> {\u003Cspan class=\"hljs-attr\">...props\u003C/span>}>\u003C/span>\n        {children}\n      \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">h2\u003C/span>>\u003C/span>\u003C/span>\n    ),\n\n    \u003Cspan class=\"hljs-attr\">h3\u003C/span>: \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">{ children, ...props }\u003C/span>) =>\u003C/span> (\n      \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">h3\u003C/span> \u003Cspan class=\"hljs-attr\">className\u003C/span>=\u003Cspan class=\"hljs-string\">"doc-heading doc-h3"\u003C/span> {\u003Cspan class=\"hljs-attr\">...props\u003C/span>}>\u003C/span>\n        {children}\n      \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">h3\u003C/span>>\u003C/span>\u003C/span>\n    ),\n\n    \u003Cspan class=\"hljs-attr\">code\u003C/span>: \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">{ node, inline, className, children, ...props }\u003C/span>) =>\u003C/span> {\n      \u003Cspan class=\"hljs-keyword\">const\u003C/span> match = \u003Cspan class=\"hljs-regexp\">/language-(\\w+)/\u003C/span>.\u003Cspan class=\"hljs-title function_\">exec\u003C/span>(className || \u003Cspan class=\"hljs-string\">''\u003C/span>);\n      \u003Cspan class=\"hljs-keyword\">const\u003C/span> language = match ? match[\u003Cspan class=\"hljs-number\">1\u003C/span>] : \u003Cspan class=\"hljs-string\">''\u003C/span>;\n\n      \u003Cspan class=\"hljs-keyword\">if\u003C/span> (inline) {\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">code\u003C/span> \u003Cspan class=\"hljs-attr\">className\u003C/span>=\u003Cspan class=\"hljs-string\">"inline-code"\u003C/span> {\u003Cspan class=\"hljs-attr\">...props\u003C/span>}>\u003C/span>{children}\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">code\u003C/span>>\u003C/span>\u003C/span>;\n      }\n\n      \u003Cspan class=\"hljs-keyword\">return\u003C/span> (\n        \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">className\u003C/span>=\u003Cspan class=\"hljs-string\">"code-example"\u003C/span>>\u003C/span>\n          \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">className\u003C/span>=\u003Cspan class=\"hljs-string\">"code-header"\u003C/span>>\u003C/span>\n            \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\u003C/span> \u003Cspan class=\"hljs-attr\">className\u003C/span>=\u003Cspan class=\"hljs-string\">"language-label"\u003C/span>>\u003C/span>{language}\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">span\u003C/span>>\u003C/span>\n            \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">button\u003C/span>\n              \u003Cspan class=\"hljs-attr\">className\u003C/span>=\u003Cspan class=\"hljs-string\">"copy-button"\u003C/span>\n              \u003Cspan class=\"hljs-attr\">onClick\u003C/span>=\u003Cspan class=\"hljs-string\">{(e)\u003C/span> =>\u003C/span> {\n                const code = String(children).replace(/\\n$/, '');\n                navigator.clipboard.writeText(code);\n                e.target.textContent = 'Copied!';\n                setTimeout(() => {\n                  e.target.textContent = 'Copy';\n                }, 2000);\n              }}\n            >\n              Copy\n            \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">button\u003C/span>>\u003C/span>\n          \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n          \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">pre\u003C/span> \u003Cspan class=\"hljs-attr\">className\u003C/span>=\u003Cspan class=\"hljs-string\">"code-content"\u003C/span>>\u003C/span>\n            \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">code\u003C/span> \u003Cspan class=\"hljs-attr\">className\u003C/span>=\u003Cspan class=\"hljs-string\">{className}\u003C/span> {\u003Cspan class=\"hljs-attr\">...props\u003C/span>}>\u003C/span>\n              {children}\n            \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">code\u003C/span>>\u003C/span>\n          \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">pre\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\u003C/span>\n      );\n    },\n\n    \u003Cspan class=\"hljs-comment\">// Custom callout boxes\u003C/span>\n    \u003Cspan class=\"hljs-attr\">blockquote\u003C/span>: \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">{ children, ...props }\u003C/span>) =>\u003C/span> (\n      \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">className\u003C/span>=\u003Cspan class=\"hljs-string\">"callout-box"\u003C/span> {\u003Cspan class=\"hljs-attr\">...props\u003C/span>}>\u003C/span>\n        {children}\n      \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\u003C/span>\n    ),\n\n    \u003Cspan class=\"hljs-comment\">// Enhanced link handling\u003C/span>\n    \u003Cspan class=\"hljs-attr\">a\u003C/span>: \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">{ href, children, ...props }\u003C/span>) =>\u003C/span> {\n      \u003Cspan class=\"hljs-keyword\">const\u003C/span> isInternal = href && href.\u003Cspan class=\"hljs-title function_\">startsWith\u003C/span>(\u003Cspan class=\"hljs-string\">'#'\u003C/span>);\n      \u003Cspan class=\"hljs-keyword\">const\u003C/span> isExternal = href && (href.\u003Cspan class=\"hljs-title function_\">startsWith\u003C/span>(\u003Cspan class=\"hljs-string\">'http'\u003C/span>) || href.\u003Cspan class=\"hljs-title function_\">startsWith\u003C/span>(\u003Cspan class=\"hljs-string\">'//'\u003C/span>));\n\n      \u003Cspan class=\"hljs-keyword\">if\u003C/span> (isInternal) {\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> (\n          \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">a\u003C/span>\n            \u003Cspan class=\"hljs-attr\">href\u003C/span>=\u003Cspan class=\"hljs-string\">{href}\u003C/span>\n            \u003Cspan class=\"hljs-attr\">className\u003C/span>=\u003Cspan class=\"hljs-string\">"internal-link"\u003C/span>\n            \u003Cspan class=\"hljs-attr\">onClick\u003C/span>=\u003Cspan class=\"hljs-string\">{(e)\u003C/span> =>\u003C/span> {\n              e.preventDefault();\n              const element = document.getElementById(href.slice(1));\n              if (element) {\n                element.scrollIntoView({ behavior: 'smooth' });\n                setActiveSection(href.slice(1));\n              }\n            }}\n            {...props}\n          >\n            {children}\n          \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">a\u003C/span>>\u003C/span>\u003C/span>\n        );\n      }\n\n      \u003Cspan class=\"hljs-keyword\">return\u003C/span> (\n        \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">a\u003C/span>\n          \u003Cspan class=\"hljs-attr\">href\u003C/span>=\u003Cspan class=\"hljs-string\">{href}\u003C/span>\n          \u003Cspan class=\"hljs-attr\">className\u003C/span>=\u003Cspan class=\"hljs-string\">{\u003C/span>`\u003Cspan class=\"hljs-attr\">doc-link\u003C/span> ${\u003Cspan class=\"hljs-attr\">isExternal\u003C/span> ? '\u003Cspan class=\"hljs-attr\">external-link\u003C/span>' \u003Cspan class=\"hljs-attr\">:\u003C/span> ''}`}\n          \u003Cspan class=\"hljs-attr\">target\u003C/span>=\u003Cspan class=\"hljs-string\">{isExternal\u003C/span> ? '\u003Cspan class=\"hljs-attr\">_blank\u003C/span>' \u003Cspan class=\"hljs-attr\">:\u003C/span> '\u003Cspan class=\"hljs-attr\">_self\u003C/span>'}\n          \u003Cspan class=\"hljs-attr\">rel\u003C/span>=\u003Cspan class=\"hljs-string\">{isExternal\u003C/span> ? '\u003Cspan class=\"hljs-attr\">noopener\u003C/span> \u003Cspan class=\"hljs-attr\">noreferrer\u003C/span>' \u003Cspan class=\"hljs-attr\">:\u003C/span> \u003Cspan class=\"hljs-attr\">undefined\u003C/span>}\n          {\u003Cspan class=\"hljs-attr\">...props\u003C/span>}\n        >\u003C/span>\n          {children}\n          {isExternal && \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\u003C/span> \u003Cspan class=\"hljs-attr\">className\u003C/span>=\u003Cspan class=\"hljs-string\">"external-icon"\u003C/span>>\u003C/span>↗\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">span\u003C/span>>\u003C/span>}\n        \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">a\u003C/span>>\u003C/span>\u003C/span>\n      );\n    }\n  };\n\n  \u003Cspan class=\"hljs-keyword\">const\u003C/span> displayContent = searchQuery ? \u003Cspan class=\"hljs-title function_\">searchContent\u003C/span>(searchQuery) : content;\n\n  \u003Cspan class=\"hljs-keyword\">return\u003C/span> (\n    \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">className\u003C/span>=\u003Cspan class=\"hljs-string\">"documentation-system"\u003C/span>>\u003C/span>\n      {/* Header */}\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">header\u003C/span> \u003Cspan class=\"hljs-attr\">className\u003C/span>=\u003Cspan class=\"hljs-string\">"doc-header"\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">h1\u003C/span>>\u003C/span>Documentation\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">h1\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">className\u003C/span>=\u003Cspan class=\"hljs-string\">"search-container"\u003C/span>>\u003C/span>\n          \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">input\u003C/span>\n            \u003Cspan class=\"hljs-attr\">type\u003C/span>=\u003Cspan class=\"hljs-string\">"text"\u003C/span>\n            \u003Cspan class=\"hljs-attr\">placeholder\u003C/span>=\u003Cspan class=\"hljs-string\">"Search documentation..."\u003C/span>\n            \u003Cspan class=\"hljs-attr\">value\u003C/span>=\u003Cspan class=\"hljs-string\">{searchQuery}\u003C/span>\n            \u003Cspan class=\"hljs-attr\">onChange\u003C/span>=\u003Cspan class=\"hljs-string\">{(e)\u003C/span> =>\u003C/span> setSearchQuery(e.target.value)}\n            className="search-input"\n          />\n        \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">header\u003C/span>>\u003C/span>\n\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">className\u003C/span>=\u003Cspan class=\"hljs-string\">"doc-layout"\u003C/span>>\u003C/span>\n        {/* Table of Contents Sidebar */}\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">aside\u003C/span> \u003Cspan class=\"hljs-attr\">className\u003C/span>=\u003Cspan class=\"hljs-string\">"doc-sidebar"\u003C/span>>\u003C/span>\n          \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">h2\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\">nav\u003C/span> \u003Cspan class=\"hljs-attr\">className\u003C/span>=\u003Cspan class=\"hljs-string\">"toc-nav"\u003C/span>>\u003C/span>\n            {tableOfContents.map((item, index) => (\n              \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">a\u003C/span>\n                \u003Cspan class=\"hljs-attr\">key\u003C/span>=\u003Cspan class=\"hljs-string\">{index}\u003C/span>\n                \u003Cspan class=\"hljs-attr\">href\u003C/span>=\u003Cspan class=\"hljs-string\">{\u003C/span>`#${\u003Cspan class=\"hljs-attr\">item.slug\u003C/span>}`}\n                \u003Cspan class=\"hljs-attr\">className\u003C/span>=\u003Cspan class=\"hljs-string\">{\u003C/span>`\u003Cspan class=\"hljs-attr\">toc-link\u003C/span> \u003Cspan class=\"hljs-attr\">toc-level-\u003C/span>${\u003Cspan class=\"hljs-attr\">item.level\u003C/span>} ${\n                  \u003Cspan class=\"hljs-attr\">activeSection\u003C/span> === \u003Cspan class=\"hljs-string\">item.slug\u003C/span> ? '\u003Cspan class=\"hljs-attr\">active\u003C/span>' \u003Cspan class=\"hljs-attr\">:\u003C/span> ''\n                }`}\n                \u003Cspan class=\"hljs-attr\">onClick\u003C/span>=\u003Cspan class=\"hljs-string\">{(e)\u003C/span> =>\u003C/span> {\n                  e.preventDefault();\n                  const element = document.getElementById(item.slug);\n                  if (element) {\n                    element.scrollIntoView({ behavior: 'smooth' });\n                    setActiveSection(item.slug);\n                  }\n                }}\n              >\n                {item.title}\n              \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">a\u003C/span>>\u003C/span>\n            ))}\n          \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">nav\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">aside\u003C/span>>\u003C/span>\n\n        {/* Main Content */}\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">main\u003C/span> \u003Cspan class=\"hljs-attr\">className\u003C/span>=\u003Cspan class=\"hljs-string\">"doc-content"\u003C/span>>\u003C/span>\n          \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">ReactMarkdown\u003C/span>\n            \u003Cspan class=\"hljs-attr\">remarkPlugins\u003C/span>=\u003Cspan class=\"hljs-string\">{[\u003C/span>\n              \u003Cspan class=\"hljs-attr\">remarkGfm\u003C/span>,\n              \u003Cspan class=\"hljs-attr\">remarkSlug\u003C/span>,\n              [\u003Cspan class=\"hljs-attr\">remarkToc\u003C/span>, { \u003Cspan class=\"hljs-attr\">heading:\u003C/span> '\u003Cspan class=\"hljs-attr\">Table\u003C/span> \u003Cspan class=\"hljs-attr\">of\u003C/span> \u003Cspan class=\"hljs-attr\">Contents\u003C/span>', \u003Cspan class=\"hljs-attr\">maxDepth:\u003C/span> \u003Cspan class=\"hljs-attr\">3\u003C/span> }]\n            ]}\n            \u003Cspan class=\"hljs-attr\">rehypePlugins\u003C/span>=\u003Cspan class=\"hljs-string\">{[\u003C/span>\n              \u003Cspan class=\"hljs-attr\">rehypeHighlight\u003C/span>,\n              [\u003Cspan class=\"hljs-attr\">rehypeAutolinkHeadings\u003C/span>, {\n                \u003Cspan class=\"hljs-attr\">behavior:\u003C/span> '\u003Cspan class=\"hljs-attr\">wrap\u003C/span>',\n                \u003Cspan class=\"hljs-attr\">properties:\u003C/span> {\n                  \u003Cspan class=\"hljs-attr\">className:\u003C/span> ['\u003Cspan class=\"hljs-attr\">heading-anchor\u003C/span>']\n                }\n              }]\n            ]}\n            \u003Cspan class=\"hljs-attr\">components\u003C/span>=\u003Cspan class=\"hljs-string\">{documentationComponents}\u003C/span>\n            \u003Cspan class=\"hljs-attr\">children\u003C/span>=\u003Cspan class=\"hljs-string\">{displayContent}\u003C/span>\n          />\u003C/span>\n        \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">main\u003C/span>>\u003C/span>\n      \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>\u003C/span>\n  );\n};\n\n\u003Cspan class=\"hljs-keyword\">export\u003C/span> \u003Cspan class=\"hljs-keyword\">default\u003C/span> \u003Cspan class=\"hljs-title class_\">DocumentationSystem\u003C/span>;\n\u003C/code>\u003C/pre>\u003Ch2 id=\"integration-with-modern-react-patterns\">Integration with Modern React Patterns\u003C/h2>\n\u003Cp>React Markdown rendering integrates seamlessly with comprehensive content management systems. When combined with \u003Ca href=\"/blog/markdown-navigation-menus-site-structure-complete-guide\">navigation menu structures\u003C/a>, dynamic Markdown rendering enables sophisticated documentation platforms with real-time content updates and interactive user experiences.\u003C/p>\n\u003Cp>For advanced content presentation, React Markdown works effectively with \u003Ca href=\"/blog/markdown-custom-css-classes-styling-complete-guide\">custom CSS styling frameworks\u003C/a> to create branded documentation systems that maintain consistent visual identity while leveraging the flexibility of component-based rendering architectures.\u003C/p>\n\u003Cp>When building comprehensive content platforms, Markdown rendering complements \u003Ca href=\"/blog/markdown-table-column-width-alignment-complete-guide\">table formatting and data presentation techniques\u003C/a> to create rich, interactive displays of complex information that scale efficiently across different content types and user interaction patterns.\u003C/p>\n\u003Ch2 id=\"troubleshooting-common-react-markdown-issues\">Troubleshooting Common React Markdown Issues\u003C/h2>\n\u003Ch3 id=\"plugin-compatibility-problems\">Plugin Compatibility Problems\u003C/h3>\n\u003Cp>\u003Cstrong>Problem\u003C/strong>: Remark and Rehype plugins not working together or causing rendering errors\u003C/p>\n\u003Cp>\u003Cstrong>Solutions\u003C/strong>:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-jsx\">\u003Cspan class=\"hljs-comment\">// Plugin compatibility debugging\u003C/span>\n\u003Cspan class=\"hljs-keyword\">import\u003C/span> { unified } \u003Cspan class=\"hljs-keyword\">from\u003C/span> \u003Cspan class=\"hljs-string\">'unified'\u003C/span>;\n\u003Cspan class=\"hljs-keyword\">import\u003C/span> remarkParse \u003Cspan class=\"hljs-keyword\">from\u003C/span> \u003Cspan class=\"hljs-string\">'remark-parse'\u003C/span>;\n\u003Cspan class=\"hljs-keyword\">import\u003C/span> remarkGfm \u003Cspan class=\"hljs-keyword\">from\u003C/span> \u003Cspan class=\"hljs-string\">'remark-gfm'\u003C/span>;\n\u003Cspan class=\"hljs-keyword\">import\u003C/span> remarkRehype \u003Cspan class=\"hljs-keyword\">from\u003C/span> \u003Cspan class=\"hljs-string\">'remark-rehype'\u003C/span>;\n\u003Cspan class=\"hljs-keyword\">import\u003C/span> rehypeHighlight \u003Cspan class=\"hljs-keyword\">from\u003C/span> \u003Cspan class=\"hljs-string\">'rehype-highlight'\u003C/span>;\n\u003Cspan class=\"hljs-keyword\">import\u003C/span> rehypeStringify \u003Cspan class=\"hljs-keyword\">from\u003C/span> \u003Cspan class=\"hljs-string\">'rehype-stringify'\u003C/span>;\n\n\u003Cspan class=\"hljs-keyword\">const\u003C/span> \u003Cspan class=\"hljs-title function_\">debugMarkdownProcessing\u003C/span> = \u003Cspan class=\"hljs-keyword\">async\u003C/span> (\u003Cspan class=\"hljs-params\">content\u003C/span>) => {\n  \u003Cspan class=\"hljs-keyword\">try\u003C/span> {\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> result = \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-title function_\">unified\u003C/span>()\n      .\u003Cspan class=\"hljs-title function_\">use\u003C/span>(remarkParse)           \u003Cspan class=\"hljs-comment\">// Parse markdown\u003C/span>\n      .\u003Cspan class=\"hljs-title function_\">use\u003C/span>(remarkGfm)             \u003Cspan class=\"hljs-comment\">// Add GFM support\u003C/span>\n      .\u003Cspan class=\"hljs-title function_\">use\u003C/span>(remarkRehype)          \u003Cspan class=\"hljs-comment\">// Convert to HTML AST\u003C/span>\n      .\u003Cspan class=\"hljs-title function_\">use\u003C/span>(rehypeHighlight)       \u003Cspan class=\"hljs-comment\">// Add syntax highlighting\u003C/span>\n      .\u003Cspan class=\"hljs-title function_\">use\u003C/span>(rehypeStringify)       \u003Cspan class=\"hljs-comment\">// Convert to HTML string\u003C/span>\n      .\u003Cspan class=\"hljs-title function_\">process\u003C/span>(content);\n      \n    \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">log\u003C/span>(\u003Cspan class=\"hljs-string\">'Processed content:'\u003C/span>, result.\u003Cspan class=\"hljs-title function_\">toString\u003C/span>());\n    \u003Cspan class=\"hljs-keyword\">return\u003C/span> result.\u003Cspan class=\"hljs-title function_\">toString\u003C/span>();\n  } \u003Cspan class=\"hljs-keyword\">catch\u003C/span> (error) {\n    \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">error\u003C/span>(\u003Cspan class=\"hljs-string\">'Processing error:'\u003C/span>, error);\n    \u003Cspan class=\"hljs-keyword\">return\u003C/span> content; \u003Cspan class=\"hljs-comment\">// Fallback to original content\u003C/span>\n  }\n};\n\n\u003Cspan class=\"hljs-comment\">// Safe plugin loading with error boundaries\u003C/span>\n\u003Cspan class=\"hljs-keyword\">const\u003C/span> \u003Cspan class=\"hljs-title function_\">SafeMarkdownRenderer\u003C/span> = (\u003Cspan class=\"hljs-params\">{ content, plugins = [] }\u003C/span>) => {\n  \u003Cspan class=\"hljs-keyword\">const\u003C/span> [error, setError] = \u003Cspan class=\"hljs-title function_\">useState\u003C/span>(\u003Cspan class=\"hljs-literal\">null\u003C/span>);\n  \n  \u003Cspan class=\"hljs-title function_\">useEffect\u003C/span>(\u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n    \u003Cspan class=\"hljs-title function_\">setError\u003C/span>(\u003Cspan class=\"hljs-literal\">null\u003C/span>);\n  }, [content, plugins]);\n\n  \u003Cspan class=\"hljs-keyword\">if\u003C/span> (error) {\n    \u003Cspan class=\"hljs-keyword\">return\u003C/span> (\n      \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">className\u003C/span>=\u003Cspan class=\"hljs-string\">"markdown-error"\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">h3\u003C/span>>\u003C/span>Rendering Error\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">h3\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">p\u003C/span>>\u003C/span>{error.message}\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">p\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">details\u003C/span>>\u003C/span>\n          \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">summary\u003C/span>>\u003C/span>Stack Trace\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">summary\u003C/span>>\u003C/span>\n          \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">pre\u003C/span>>\u003C/span>{error.stack}\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">pre\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">details\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\u003C/span>\n    );\n  }\n\n  \u003Cspan class=\"hljs-keyword\">return\u003C/span> (\n    \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">ErrorBoundary\u003C/span> \u003Cspan class=\"hljs-attr\">onError\u003C/span>=\u003Cspan class=\"hljs-string\">{setError}\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">ReactMarkdown\u003C/span>\n        \u003Cspan class=\"hljs-attr\">remarkPlugins\u003C/span>=\u003Cspan class=\"hljs-string\">{plugins.remark\u003C/span> || [\u003Cspan class=\"hljs-attr\">remarkGfm\u003C/span>]}\n        \u003Cspan class=\"hljs-attr\">rehypePlugins\u003C/span>=\u003Cspan class=\"hljs-string\">{plugins.rehype\u003C/span> || []}\n        \u003Cspan class=\"hljs-attr\">children\u003C/span>=\u003Cspan class=\"hljs-string\">{content}\u003C/span>\n      />\u003C/span>\n    \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">ErrorBoundary\u003C/span>>\u003C/span>\u003C/span>\n  );\n};\n\u003C/code>\u003C/pre>\u003Ch3 id=\"performance-issues-with-large-content\">Performance Issues with Large Content\u003C/h3>\n\u003Cp>\u003Cstrong>Problem\u003C/strong>: Slow rendering with large Markdown documents or frequent updates\u003C/p>\n\u003Cp>\u003Cstrong>Solutions\u003C/strong>:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-jsx\">\u003Cspan class=\"hljs-comment\">// Implement content chunking and lazy rendering\u003C/span>\n\u003Cspan class=\"hljs-keyword\">const\u003C/span> \u003Cspan class=\"hljs-title function_\">ChunkedMarkdownRenderer\u003C/span> = (\u003Cspan class=\"hljs-params\">{ content, chunkSize = \u003Cspan class=\"hljs-number\">5000\u003C/span> }\u003C/span>) => {\n  \u003Cspan class=\"hljs-keyword\">const\u003C/span> [visibleChunks, setVisibleChunks] = \u003Cspan class=\"hljs-title function_\">useState\u003C/span>(\u003Cspan class=\"hljs-number\">1\u003C/span>);\n  \u003Cspan class=\"hljs-keyword\">const\u003C/span> chunks = \u003Cspan class=\"hljs-title function_\">useMemo\u003C/span>(\u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> result = [];\n    \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">let\u003C/span> i = \u003Cspan class=\"hljs-number\">0\u003C/span>; i < content.\u003Cspan class=\"hljs-property\">length\u003C/span>; i += chunkSize) {\n      result.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(content.\u003Cspan class=\"hljs-title function_\">slice\u003C/span>(i, i + chunkSize));\n    }\n    \u003Cspan class=\"hljs-keyword\">return\u003C/span> result;\n  }, [content, chunkSize]);\n\n  \u003Cspan class=\"hljs-keyword\">const\u003C/span> loadMoreChunks = \u003Cspan class=\"hljs-title function_\">useCallback\u003C/span>(\u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n    \u003Cspan class=\"hljs-title function_\">setVisibleChunks\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">prev\u003C/span> =>\u003C/span> \u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">min\u003C/span>(prev + \u003Cspan class=\"hljs-number\">1\u003C/span>, chunks.\u003Cspan class=\"hljs-property\">length\u003C/span>));\n  }, [chunks.\u003Cspan class=\"hljs-property\">length\u003C/span>]);\n\n  \u003Cspan class=\"hljs-title function_\">useEffect\u003C/span>(\u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> \u003Cspan class=\"hljs-title function_\">handleScroll\u003C/span> = (\u003Cspan class=\"hljs-params\">\u003C/span>) => {\n      \u003Cspan class=\"hljs-keyword\">const\u003C/span> scrollPosition = \u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-property\">scrollY\u003C/span> + \u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-property\">innerHeight\u003C/span>;\n      \u003Cspan class=\"hljs-keyword\">const\u003C/span> documentHeight = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-property\">documentElement\u003C/span>.\u003Cspan class=\"hljs-property\">scrollHeight\u003C/span>;\n      \n      \u003Cspan class=\"hljs-keyword\">if\u003C/span> (scrollPosition > documentHeight * \u003Cspan class=\"hljs-number\">0.8\u003C/span> && visibleChunks < chunks.\u003Cspan class=\"hljs-property\">length\u003C/span>) {\n        \u003Cspan class=\"hljs-title function_\">loadMoreChunks\u003C/span>();\n      }\n    };\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>, handleScroll);\n    \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-function\">() =>\u003C/span> \u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-title function_\">removeEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'scroll'\u003C/span>, handleScroll);\n  }, [loadMoreChunks, visibleChunks, chunks.\u003Cspan class=\"hljs-property\">length\u003C/span>]);\n\n  \u003Cspan class=\"hljs-keyword\">return\u003C/span> (\n    \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">className\u003C/span>=\u003Cspan class=\"hljs-string\">"chunked-markdown"\u003C/span>>\u003C/span>\n      {chunks.slice(0, visibleChunks).map((chunk, index) => (\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">key\u003C/span>=\u003Cspan class=\"hljs-string\">{index}\u003C/span> \u003Cspan class=\"hljs-attr\">className\u003C/span>=\u003Cspan class=\"hljs-string\">"markdown-chunk"\u003C/span>>\u003C/span>\n          \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">ReactMarkdown\u003C/span> \u003Cspan class=\"hljs-attr\">remarkPlugins\u003C/span>=\u003Cspan class=\"hljs-string\">{[remarkGfm]}\u003C/span>>\u003C/span>\n            {chunk}\n          \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">ReactMarkdown\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n      ))}\n      {visibleChunks < chunks.length && (\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">className\u003C/span>=\u003Cspan class=\"hljs-string\">"loading-indicator"\u003C/span>>\u003C/span>\n          Loading more content...\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>>\u003C/span>\u003C/span>\n  );\n};\n\u003C/code>\u003C/pre>\u003Ch3 id=\"memory-leaks-in-dynamic-content\">Memory Leaks in Dynamic Content\u003C/h3>\n\u003Cp>\u003Cstrong>Problem\u003C/strong>: Memory usage increases with frequent content updates\u003C/p>\n\u003Cp>\u003Cstrong>Solutions\u003C/strong>:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-jsx\">\u003Cspan class=\"hljs-comment\">// Implement proper cleanup and memoization\u003C/span>\n\u003Cspan class=\"hljs-keyword\">const\u003C/span> \u003Cspan class=\"hljs-title function_\">MemoryEfficientRenderer\u003C/span> = (\u003Cspan class=\"hljs-params\">{ content }\u003C/span>) => {\n  \u003Cspan class=\"hljs-keyword\">const\u003C/span> [renderedContent, setRenderedContent] = \u003Cspan class=\"hljs-title function_\">useState\u003C/span>(\u003Cspan class=\"hljs-string\">''\u003C/span>);\n  \u003Cspan class=\"hljs-keyword\">const\u003C/span> contentRef = \u003Cspan class=\"hljs-title function_\">useRef\u003C/span>(content);\n  \u003Cspan class=\"hljs-keyword\">const\u003C/span> cleanupRef = \u003Cspan class=\"hljs-title function_\">useRef\u003C/span>(\u003Cspan class=\"hljs-literal\">null\u003C/span>);\n\n  \u003Cspan class=\"hljs-title function_\">useEffect\u003C/span>(\u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n    \u003Cspan class=\"hljs-comment\">// Debounce content updates\u003C/span>\n    \u003Cspan class=\"hljs-keyword\">if\u003C/span> (cleanupRef.\u003Cspan class=\"hljs-property\">current\u003C/span>) {\n      \u003Cspan class=\"hljs-built_in\">clearTimeout\u003C/span>(cleanupRef.\u003Cspan class=\"hljs-property\">current\u003C/span>);\n    }\n\n    cleanupRef.\u003Cspan class=\"hljs-property\">current\u003C/span> = \u003Cspan class=\"hljs-built_in\">setTimeout\u003C/span>(\u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n      \u003Cspan class=\"hljs-keyword\">if\u003C/span> (contentRef.\u003Cspan class=\"hljs-property\">current\u003C/span> !== content) {\n        contentRef.\u003Cspan class=\"hljs-property\">current\u003C/span> = content;\n        \u003Cspan class=\"hljs-title function_\">setRenderedContent\u003C/span>(content);\n      }\n    }, \u003Cspan class=\"hljs-number\">300\u003C/span>);\n\n    \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n      \u003Cspan class=\"hljs-keyword\">if\u003C/span> (cleanupRef.\u003Cspan class=\"hljs-property\">current\u003C/span>) {\n        \u003Cspan class=\"hljs-built_in\">clearTimeout\u003C/span>(cleanupRef.\u003Cspan class=\"hljs-property\">current\u003C/span>);\n      }\n    };\n  }, [content]);\n\n  \u003Cspan class=\"hljs-comment\">// Cleanup component instances\u003C/span>\n  \u003Cspan class=\"hljs-title function_\">useEffect\u003C/span>(\u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n    \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n      \u003Cspan class=\"hljs-title function_\">setRenderedContent\u003C/span>(\u003Cspan class=\"hljs-string\">''\u003C/span>);\n      contentRef.\u003Cspan class=\"hljs-property\">current\u003C/span> = \u003Cspan class=\"hljs-string\">''\u003C/span>;\n    };\n  }, []);\n\n  \u003Cspan class=\"hljs-keyword\">return\u003C/span> (\n    \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">ReactMarkdown\u003C/span>\n      \u003Cspan class=\"hljs-attr\">remarkPlugins\u003C/span>=\u003Cspan class=\"hljs-string\">{[remarkGfm]}\u003C/span>\n      \u003Cspan class=\"hljs-attr\">children\u003C/span>=\u003Cspan class=\"hljs-string\">{renderedContent}\u003C/span>\n    />\u003C/span>\u003C/span>\n  );\n};\n\u003C/code>\u003C/pre>\u003Ch2 id=\"conclusion\">Conclusion\u003C/h2>\n\u003Cp>React Markdown rendering transforms static content into dynamic, interactive experiences that leverage the full power of React's component ecosystem while maintaining the simplicity and portability of Markdown syntax. By implementing advanced customization techniques, security measures, and performance optimizations, developers can create sophisticated content platforms that scale efficiently while providing excellent user experiences.\u003C/p>\n\u003Cp>The key to successful React Markdown implementation lies in understanding the balance between functionality and performance, security and flexibility, and customization and maintainability. Whether you're building documentation systems, content management platforms, or user-generated content applications, the techniques covered in this guide provide the foundation for professional Markdown rendering that meets modern web development standards.\u003C/p>\n\u003Cp>Remember to test your implementations across different content types and sizes, implement proper error handling and security measures, and optimize performance for your specific use case. With proper React Markdown integration, your applications can deliver rich, dynamic content experiences that engage users while maintaining the developer-friendly workflow that makes Markdown such a powerful content creation tool.\u003C/p>\n",[15,19,22,25,28,31,34,37,40],{"id":16,"text":17,"level":18},"why-master-react-markdown-rendering","Why Master React Markdown Rendering?",2,{"id":20,"text":21,"level":18},"foundation-react-markdown-setup","Foundation React Markdown Setup",{"id":23,"text":24,"level":18},"advanced-react-markdown-configuration","Advanced React Markdown Configuration",{"id":26,"text":27,"level":18},"security-and-sanitization","Security and Sanitization",{"id":29,"text":30,"level":18},"performance-optimization-strategies","Performance Optimization Strategies",{"id":32,"text":33,"level":18},"real-world-implementation-examples","Real-World Implementation Examples",{"id":35,"text":36,"level":18},"integration-with-modern-react-patterns","Integration with Modern React Patterns",{"id":38,"text":39,"level":18},"troubleshooting-common-react-markdown-issues","Troubleshooting Common React Markdown Issues",{"id":41,"text":42,"level":18},"conclusion","Conclusion",[],[45,52,60],{"slug":46,"title":47,"description":48,"excerpt":48,"date":49,"category":9,"author":50,"keywords":51,"readingMinutes":18},"rendering-markdown-in-react","Rendering Markdown in React","Rendering Markdown in React is a popular method for displaying rich text content within a React application. Markdown is a lightweight markup language that uses simple, easy-to-read syntax to…","2022-02-15","Matthew Rathbone (with help from OpenAI)","2/15/2023",{"slug":53,"title":54,"description":55,"excerpt":56,"date":57,"category":9,"author":10,"keywords":58,"readingMinutes":59},"markdown-variables-templating-complete-guide","Markdown Variables and Templating: Complete Guide for Dynamic Content and Reusable Components","Master Markdown variables, templating, and dynamic content generation using Jekyll, Hugo, MkDocs, and other platforms. Learn to create maintainable documentation with reusable components and data-driven content.","Variables and templating transform static Markdown into dynamic, maintainable documentation systems that eliminate repetition and enable sophisticated content management. While basic Markdown…","2025-08-27","markdown variables, markdown templating, dynamic markdown, jekyll variables, hugo templating, mkdocs variables, markdown includes, reusable markdown",18,{"slug":61,"title":62,"description":63,"excerpt":64,"date":65,"category":9,"author":10,"keywords":66,"readingMinutes":67},"markdown-html-integration-mixed-content-complete-guide","Markdown HTML Integration and Mixed Content: Complete Guide to Seamless HTML-Markdown Workflows and Advanced Content Creation","Master HTML integration in Markdown documents. Learn to combine HTML and Markdown syntax, create custom components, handle complex layouts, and build sophisticated content systems that leverage both markup languages effectively.","Markdown HTML integration and mixed content systems enable sophisticated document creation through seamless combination of Markdown's simplicity with HTML's power and flexibility. By implementing…","2026-01-01","markdown html integration, mixed content markdown, html in markdown, custom html components, markdown html workflow, advanced markdown formatting, html markdown combination, custom content blocks",26,1792184942023]