[{"data":1,"prerenderedAt":79},["Reactive",2],{"blog-post-markdown-text-decoration-underlining-complete-guide":3},{"slug":4,"title":5,"description":6,"excerpt":7,"date":8,"category":9,"author":10,"keywords":11,"readingMinutes":12,"html":13,"headings":14,"tools":55,"related":56},"markdown-text-decoration-underlining-complete-guide","Markdown Text Decoration and Underlining: Complete Guide for Enhanced Typography and Visual Emphasis","Master text decoration techniques in Markdown including underlining, overlines, strikethrough, and advanced styling. Learn CSS integration, HTML solutions, and platform-specific approaches for comprehensive text formatting.","Text decoration and underlining in Markdown extends beyond basic formatting to provide sophisticated typography control that enhances document readability, creates visual hierarchy, and draws…","2026-01-06","Tutorial","Matthew Rathbone","markdown underline, markdown text decoration, underline text markdown, markdown strikethrough, markdown typography, text styling markdown, markdown formatting, markdown CSS styling",18,"\u003Cp>Text decoration and underlining in Markdown extends beyond basic formatting to provide sophisticated typography control that enhances document readability, creates visual hierarchy, and draws attention to important content. While standard Markdown syntax is intentionally minimal, various techniques using HTML, CSS integration, and platform-specific features enable comprehensive text decoration that transforms plain documentation into professionally styled content with rich visual emphasis.\u003C/p>\n\u003Ch2 id=\"why-use-text-decoration-in-markdown\">Why Use Text Decoration in Markdown?\u003C/h2>\n\u003Cp>Advanced text decoration provides essential benefits for professional documentation:\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>Visual Hierarchy\u003C/strong>: Different decoration styles create clear information architecture and guide reader attention\u003C/li>\n\u003Cli>\u003Cstrong>Semantic Emphasis\u003C/strong>: Proper text decoration conveys meaning and importance beyond basic bold and italic formatting\u003C/li>\n\u003Cli>\u003Cstrong>Accessibility Enhancement\u003C/strong>: Consistent decoration patterns help users with different reading abilities navigate content effectively\u003C/li>\n\u003Cli>\u003Cstrong>Brand Consistency\u003C/strong>: Standardized decoration styles maintain professional appearance across documentation platforms\u003C/li>\n\u003Cli>\u003Cstrong>Content Differentiation\u003C/strong>: Visual cues help distinguish between different types of information and content sections\u003C/li>\n\u003C/ul>\n\u003Ch2 id=\"standard-markdown-text-formatting\">Standard Markdown Text Formatting\u003C/h2>\n\u003Ch3 id=\"basic-formatting-syntax\">Basic Formatting Syntax\u003C/h3>\n\u003Cp>Markdown provides fundamental text styling that serves as the foundation for advanced decoration:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">\u003Cspan class=\"hljs-section\"># Basic Text Formatting Examples\u003C/span>\n\n\u003Cspan class=\"hljs-strong\">**Bold text**\u003C/span> for strong emphasis and important information\n\u003Cspan class=\"hljs-emphasis\">*Italic text*\u003C/span> for subtle emphasis and foreign terms\n~~Strikethrough text~~ for deleted or deprecated content\n\u003Cspan class=\"hljs-code\">`Inline code`\u003C/span> for technical terms and code references\n\n\u003Cspan class=\"hljs-section\">## Combining Basic Formatting\u003C/span>\n\u003Cspan class=\"hljs-strong\">**Bold \u003Cspan class=\"hljs-emphasis\">*italic*\u003C/span> text**\u003C/span> for maximum emphasis\n\u003Cspan class=\"hljs-emphasis\">*Italic text with `inline code`*\u003C/span> for technical emphasis\n~~Strikethrough \u003Cspan class=\"hljs-strong\">**bold**\u003C/span> text~~ for strongly deprecated content\n\u003C/code>\u003C/pre>\u003Ch3 id=\"extended-markdown-syntax\">Extended Markdown Syntax\u003C/h3>\n\u003Cp>GitHub Flavored Markdown and other extended syntaxes provide additional formatting options:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">\u003Cspan class=\"hljs-section\"># Extended Formatting Options\u003C/span>\n\n==Highlighted text== for important information (platform dependent)\n++Inserted text++ for added content (platform dependent)\n--Deleted text-- for removed content (platform dependent)\nH~2~O for subscript chemical formulas\nX^2^ for superscript mathematical expressions\n\n\u003Cspan class=\"hljs-section\">## Platform-Specific Extensions\u003C/span>\n~~Strikethrough~~ works across most platforms\n==Highlight== supported by some processors\n{++Addition++} available in CriticMarkup\n{--Deletion--} for editorial markup\n{~~old text~>new text~~} for substitutions\n\u003C/code>\u003C/pre>\u003Ch2 id=\"html-based-underlining-solutions\">HTML-Based Underlining Solutions\u003C/h2>\n\u003Ch3 id=\"direct-html-integration\">Direct HTML Integration\u003C/h3>\n\u003Cp>Since Markdown allows inline HTML, direct element usage provides immediate underlining capability:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-html\">\u003Cspan class=\"hljs-comment\"><!-- Basic HTML underlining in Markdown -->\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">u\u003C/span>>\u003C/span>Underlined text using HTML u element\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">u\u003C/span>>\u003C/span>\n\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"text-decoration: underline;"\u003C/span>>\u003C/span>CSS-styled underlined text\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">span\u003C/span>>\u003C/span>\n\n\u003Cspan class=\"hljs-comment\"><!-- Enhanced underlining with custom styling -->\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"text-decoration: underline; text-decoration-color: #007acc; text-decoration-thickness: 2px;"\u003C/span>>\u003C/span>\nThick blue underlined text\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">span\u003C/span>>\u003C/span>\n\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"text-decoration: underline dotted red;"\u003C/span>>\u003C/span>\nDotted red underlined text\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">span\u003C/span>>\u003C/span>\n\n\u003Cspan class=\"hljs-comment\"><!-- Multiple text decorations combined -->\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"text-decoration: underline overline; text-decoration-color: #333;"\u003C/span>>\u003C/span>\nText with both underline and overline\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">span\u003C/span>>\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch3 id=\"css-class-based-approaches\">CSS Class-Based Approaches\u003C/h3>\n\u003Cp>Systematic text decoration using CSS classes for maintainable styling:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">\u003Cspan class=\"hljs-section\">## CSS Class Examples\u003C/span>\n\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"underline-blue"\u003C/span>>\u003C/span>\u003C/span>Important blue underlined text\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">span\u003C/span>>\u003C/span>\u003C/span>\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"underline-thick"\u003C/span>>\u003C/span>\u003C/span>Thick underlined emphasis\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">span\u003C/span>>\u003C/span>\u003C/span>\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"underline-dotted"\u003C/span>>\u003C/span>\u003C/span>Dotted underlined annotation\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">span\u003C/span>>\u003C/span>\u003C/span>\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"text-decoration-combo"\u003C/span>>\u003C/span>\u003C/span>Multiple decoration effects\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">span\u003C/span>>\u003C/span>\u003C/span>\n\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">style\u003C/span>>\u003C/span>\u003C/span>\n.underline-blue {\n  text-decoration: underline;\n  text-decoration-color: #007acc;\n  text-decoration-thickness: 1.5px;\n}\n\n.underline-thick {\n  text-decoration: underline;\n  text-decoration-thickness: 3px;\n  text-decoration-color: #333;\n}\n\n.underline-dotted {\n  text-decoration: underline;\n  text-decoration-style: dotted;\n  text-decoration-color: #666;\n}\n\n.text-decoration-combo {\n  text-decoration: underline overline;\n  text-decoration-color: #007acc;\n  text-decoration-thickness: 2px;\n  text-decoration-style: solid;\n}\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">style\u003C/span>>\u003C/span>\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch3 id=\"advanced-html-text-decoration\">Advanced HTML Text Decoration\u003C/h3>\n\u003Cp>Sophisticated decoration techniques using modern HTML and CSS:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-html\">\u003Cspan class=\"hljs-comment\"><!-- Modern CSS text decoration properties -->\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"\n  text-decoration: underline;\n  text-decoration-color: #ff6b6b;\n  text-decoration-thickness: 2px;\n  text-decoration-style: wavy;\n  text-underline-offset: 3px;\n"\u003C/span>>\u003C/span>\nWavy red underline with custom offset\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">span\u003C/span>>\u003C/span>\n\n\u003Cspan class=\"hljs-comment\"><!-- Gradient underlines using CSS -->\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"\n  background: linear-gradient(to right, #667eea 0%, #764ba2 100%);\n  background-clip: text;\n  -webkit-background-clip: text;\n  color: transparent;\n  text-decoration: underline;\n  text-decoration-color: #667eea;\n"\u003C/span>>\u003C/span>\nGradient text with matching underline\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">span\u003C/span>>\u003C/span>\n\n\u003Cspan class=\"hljs-comment\"><!-- Animated underline effects -->\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"\n  position: relative;\n  text-decoration: none;\n  color: #333;\n"\u003C/span>>\u003C/span>\nAnimated underline effect\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">style\u003C/span>>\u003C/span>\u003Cspan class=\"language-css\">\n\u003Cspan class=\"hljs-selector-tag\">span\u003C/span>\u003Cspan class=\"hljs-selector-attr\">[style*=\u003Cspan class=\"hljs-string\">'position: relative'\u003C/span>]\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">::after\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">content\u003C/span>: \u003Cspan class=\"hljs-string\">''\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">position\u003C/span>: absolute;\n  \u003Cspan class=\"hljs-attribute\">bottom\u003C/span>: -\u003Cspan class=\"hljs-number\">2px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">left\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">height\u003C/span>: \u003Cspan class=\"hljs-number\">2px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#007acc\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">transition\u003C/span>: width \u003Cspan class=\"hljs-number\">0.3s\u003C/span> ease;\n}\n\n\u003Cspan class=\"hljs-selector-tag\">span\u003C/span>\u003Cspan class=\"hljs-selector-attr\">[style*=\u003Cspan class=\"hljs-string\">'position: relative'\u003C/span>]\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:hover\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">::after\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">100%\u003C/span>;\n}\n\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">style\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">span\u003C/span>>\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch2 id=\"platform-specific-implementation\">Platform-Specific Implementation\u003C/h2>\n\u003Ch3 id=\"github-markdown-enhancement\">GitHub Markdown Enhancement\u003C/h3>\n\u003Cp>GitHub's Markdown processor with custom CSS for enhanced text decoration:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">\u003Cspan class=\"hljs-section\">## GitHub-Style Text Decoration\u003C/span>\n\n<!-- Using GitHub's CSS classes -->\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">kbd\u003C/span>>\u003C/span>\u003C/span>Keyboard input styling\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">kbd\u003C/span>>\u003C/span>\u003C/span> for user interface elements\n\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">details\u003C/span>>\u003C/span>\u003C/span>\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">summary\u003C/span>>\u003C/span>\u003C/span>Click to expand decorated content\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">summary\u003C/span>>\u003C/span>\u003C/span>\n\nThis expanded content can include \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">u\u003C/span>>\u003C/span>\u003C/span>underlined text\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">u\u003C/span>>\u003C/span>\u003C/span> and other decorations that work within GitHub's rendering system.\n\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">details\u003C/span>>\u003C/span>\u003C/span>\n\n<!-- GitHub-compatible underline alternatives -->\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">ins\u003C/span>>\u003C/span>\u003C/span>Inserted text using semantic HTML\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">ins\u003C/span>>\u003C/span>\u003C/span>\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">del\u003C/span>>\u003C/span>\u003C/span>Deleted text using semantic HTML\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">del\u003C/span>>\u003C/span>\u003C/span>\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">mark\u003C/span>>\u003C/span>\u003C/span>Highlighted text using mark element\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">mark\u003C/span>>\u003C/span>\u003C/span>\n\n<!-- Custom CSS that works with GitHub Pages -->\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">style\u003C/span>>\u003C/span>\u003C/span>\n.github-underline {\n  border-bottom: 2px solid #0366d6;\n  text-decoration: none;\n  padding-bottom: 1px;\n}\n\n.github-highlight {\n  background: linear-gradient(180deg, transparent 60%, #fff3cd 60%);\n  padding: 0 2px;\n}\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">style\u003C/span>>\u003C/span>\u003C/span>\n\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"github-underline"\u003C/span>>\u003C/span>\u003C/span>GitHub-style border underline\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">span\u003C/span>>\u003C/span>\u003C/span>\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"github-highlight"\u003C/span>>\u003C/span>\u003C/span>GitHub-style highlight effect\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">span\u003C/span>>\u003C/span>\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch3 id=\"obsidian-text-decoration\">Obsidian Text Decoration\u003C/h3>\n\u003Cp>Obsidian's enhanced Markdown with custom CSS snippets:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">\u003Cspan class=\"hljs-section\">## Obsidian Text Decoration Examples\u003C/span>\n\n<!-- Obsidian callout integration with decoration -->\n\u003Cspan class=\"hljs-quote\">> [!NOTE] Decorated Callout\u003C/span>\n\u003Cspan class=\"hljs-quote\">> This callout contains \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">u\u003C/span>>\u003C/span>\u003C/span>underlined text\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">u\u003C/span>>\u003C/span>\u003C/span> and ==highlighted content== using Obsidian's extended syntax.\u003C/span>\n\n<!-- Obsidian CSS snippet usage -->\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"obsidian-underline-blue"\u003C/span>>\u003C/span>\u003C/span>Blue underlined text\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">span\u003C/span>>\u003C/span>\u003C/span>\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"obsidian-wavy-red"\u003C/span>>\u003C/span>\u003C/span>Wavy red underlined text\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">span\u003C/span>>\u003C/span>\u003C/span>\n\n%%\nObsidian CSS Snippet (obsidian-text-decoration.css):\n\u003Cspan class=\"hljs-code\">```css\n.obsidian-underline-blue {\n  text-decoration: underline;\n  text-decoration-color: #3b82f6;\n  text-decoration-thickness: 2px;\n}\n\n.obsidian-wavy-red {\n  text-decoration: underline wavy #ef4444;\n  text-decoration-thickness: 1.5px;\n}\n\n/* Hover effects for interactive documentation */\n.obsidian-hover-underline {\n  text-decoration: none;\n  border-bottom: 1px dotted #6b7280;\n  cursor: pointer;\n}\n\n.obsidian-hover-underline:hover {\n  text-decoration: underline;\n  text-decoration-color: #3b82f6;\n  border-bottom: none;\n}\u003C/span>\n\u003C/code>\u003C/pre>\u003Cp>%%\u003C/p>\n\u003Cpre>\u003Ccode>\n### Notion Markdown Compatibility\n\nText decoration approaches that work within Notion's Markdown support:\n\n```markdown\n## Notion-Compatible Text Decoration\n\n<!-- Using Notion's built-in formatting -->\n**Bold text** for strong emphasis\n*Italic text* for subtle emphasis\n~~Strikethrough text~~ for deprecated content\n`Inline code` for technical terms\n\n<!-- HTML that renders in Notion exports -->\n<span style="text-decoration: underline;">Underlined text in Notion</span>\n<span style="background-color: #fef3c7; padding: 2px 4px;">Highlighted text</span>\n\n<!-- Notion-style callouts using HTML -->\n<div style="background: #dbeafe; border-left: 4px solid #3b82f6; padding: 16px; margin: 16px 0;">\n<strong>💡 Information</strong><br>\nThis information box includes <u>underlined important terms</u> and maintains Notion's visual style.\n</div>\n\n<div style="background: #fef3c7; border-left: 4px solid #f59e0b; padding: 16px; margin: 16px 0;">\n<strong>⚠️ Warning</strong><br>\nWarning boxes can contain <span style="text-decoration: underline;">decorated text</span> for emphasis.\n</div>\n\u003C/code>\u003C/pre>\u003Ch2 id=\"css-integration-techniques\">CSS Integration Techniques\u003C/h2>\n\u003Ch3 id=\"comprehensive-text-decoration-stylesheet\">Comprehensive Text Decoration Stylesheet\u003C/h3>\n\u003Cp>Professional stylesheet for systematic text decoration across Markdown documents:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-css\">\u003Cspan class=\"hljs-comment\">/* markdown-text-decoration.css - Complete text decoration system */\u003C/span>\n\n\u003Cspan class=\"hljs-selector-pseudo\">:root\u003C/span> {\n  \u003Cspan class=\"hljs-comment\">/* Text decoration color palette */\u003C/span>\n  \u003Cspan class=\"hljs-attr\">--decoration-primary\u003C/span>: \u003Cspan class=\"hljs-number\">#3b82f6\u003C/span>;\n  \u003Cspan class=\"hljs-attr\">--decoration-secondary\u003C/span>: \u003Cspan class=\"hljs-number\">#6b7280\u003C/span>;\n  \u003Cspan class=\"hljs-attr\">--decoration-accent\u003C/span>: \u003Cspan class=\"hljs-number\">#10b981\u003C/span>;\n  \u003Cspan class=\"hljs-attr\">--decoration-warning\u003C/span>: \u003Cspan class=\"hljs-number\">#f59e0b\u003C/span>;\n  \u003Cspan class=\"hljs-attr\">--decoration-danger\u003C/span>: \u003Cspan class=\"hljs-number\">#ef4444\u003C/span>;\n  \u003Cspan class=\"hljs-attr\">--decoration-success\u003C/span>: \u003Cspan class=\"hljs-number\">#22c55e\u003C/span>;\n  \n  \u003Cspan class=\"hljs-comment\">/* Decoration thickness variables */\u003C/span>\n  \u003Cspan class=\"hljs-attr\">--decoration-thin\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span>;\n  \u003Cspan class=\"hljs-attr\">--decoration-medium\u003C/span>: \u003Cspan class=\"hljs-number\">2px\u003C/span>;\n  \u003Cspan class=\"hljs-attr\">--decoration-thick\u003C/span>: \u003Cspan class=\"hljs-number\">3px\u003C/span>;\n  \n  \u003Cspan class=\"hljs-comment\">/* Decoration spacing */\u003C/span>\n  \u003Cspan class=\"hljs-attr\">--decoration-offset\u003C/span>: \u003Cspan class=\"hljs-number\">2px\u003C/span>;\n  \u003Cspan class=\"hljs-attr\">--decoration-offset-large\u003C/span>: \u003Cspan class=\"hljs-number\">4px\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Basic underline styles */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.underline\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">text-decoration\u003C/span>: underline;\n  \u003Cspan class=\"hljs-attribute\">text-decoration-color\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--decoration-primary);\n  \u003Cspan class=\"hljs-attribute\">text-decoration\u003C/span>-thickness: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--decoration-medium);\n  text-underline-offset: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--decoration-offset);\n}\n\n\u003Cspan class=\"hljs-selector-class\">.underline-thin\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">text-decoration\u003C/span>: underline;\n  \u003Cspan class=\"hljs-attribute\">text-decoration-color\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--decoration-secondary);\n  \u003Cspan class=\"hljs-attribute\">text-decoration\u003C/span>-thickness: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--decoration-thin);\n  text-underline-offset: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--decoration-offset);\n}\n\n\u003Cspan class=\"hljs-selector-class\">.underline-thick\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">text-decoration\u003C/span>: underline;\n  \u003Cspan class=\"hljs-attribute\">text-decoration-color\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--decoration-primary);\n  \u003Cspan class=\"hljs-attribute\">text-decoration\u003C/span>-thickness: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--decoration-thick);\n  text-underline-offset: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--decoration-offset-large);\n}\n\n\u003Cspan class=\"hljs-comment\">/* Styled underline variations */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.underline-dotted\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">text-decoration\u003C/span>: underline dotted;\n  \u003Cspan class=\"hljs-attribute\">text-decoration-color\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--decoration-secondary);\n  \u003Cspan class=\"hljs-attribute\">text-decoration\u003C/span>-thickness: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--decoration-medium);\n  text-underline-offset: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--decoration-offset);\n}\n\n\u003Cspan class=\"hljs-selector-class\">.underline-dashed\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">text-decoration\u003C/span>: underline dashed;\n  \u003Cspan class=\"hljs-attribute\">text-decoration-color\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--decoration-accent);\n  \u003Cspan class=\"hljs-attribute\">text-decoration\u003C/span>-thickness: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--decoration-medium);\n  text-underline-offset: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--decoration-offset);\n}\n\n\u003Cspan class=\"hljs-selector-class\">.underline-wavy\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">text-decoration\u003C/span>: underline wavy;\n  \u003Cspan class=\"hljs-attribute\">text-decoration-color\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--decoration-warning);\n  \u003Cspan class=\"hljs-attribute\">text-decoration\u003C/span>-thickness: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--decoration-medium);\n  text-underline-offset: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--decoration-offset);\n}\n\n\u003Cspan class=\"hljs-selector-class\">.underline-double\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">text-decoration\u003C/span>: underline;\n  \u003Cspan class=\"hljs-attribute\">text-decoration-style\u003C/span>: double;\n  \u003Cspan class=\"hljs-attribute\">text-decoration-color\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--decoration-primary);\n  \u003Cspan class=\"hljs-attribute\">text-decoration\u003C/span>-thickness: \u003Cspan class=\"hljs-number\">3px\u003C/span>;\n  text-underline-offset: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--decoration-offset-large);\n}\n\n\u003Cspan class=\"hljs-comment\">/* Semantic decoration classes */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.text-important\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">text-decoration\u003C/span>: underline;\n  \u003Cspan class=\"hljs-attribute\">text-decoration-color\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--decoration-danger);\n  \u003Cspan class=\"hljs-attribute\">text-decoration\u003C/span>-thickness: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--decoration-medium);\n  text-underline-offset: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--decoration-offset);\n  \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">600\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.text-emphasis\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">text-decoration\u003C/span>: underline;\n  \u003Cspan class=\"hljs-attribute\">text-decoration-color\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--decoration-accent);\n  \u003Cspan class=\"hljs-attribute\">text-decoration\u003C/span>-thickness: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--decoration-thin);\n  text-underline-offset: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--decoration-offset);\n  \u003Cspan class=\"hljs-attribute\">font-style\u003C/span>: italic;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.text-technical\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">text-decoration\u003C/span>: underline dotted;\n  \u003Cspan class=\"hljs-attribute\">text-decoration-color\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--decoration-secondary);\n  \u003Cspan class=\"hljs-attribute\">text-decoration\u003C/span>-thickness: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--decoration-thin);\n  text-underline-offset: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--decoration-offset);\n  \u003Cspan class=\"hljs-attribute\">font-family\u003C/span>: monospace;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Multiple decoration effects */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.text-decorated-full\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">text-decoration\u003C/span>: underline overline;\n  \u003Cspan class=\"hljs-attribute\">text-decoration-color\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--decoration-primary);\n  \u003Cspan class=\"hljs-attribute\">text-decoration\u003C/span>-thickness: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--decoration-medium);\n  text-underline-offset: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--decoration-offset);\n  \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">4px\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.text-strikethrough-underline\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">text-decoration\u003C/span>: line-through underline;\n  \u003Cspan class=\"hljs-attribute\">text-decoration-color\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--decoration-danger);\n  \u003Cspan class=\"hljs-attribute\">text-decoration\u003C/span>-thickness: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--decoration-medium);\n  \u003Cspan class=\"hljs-attribute\">opacity\u003C/span>: \u003Cspan class=\"hljs-number\">0.7\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Hover effects for interactive content */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.hover-underline\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">text-decoration\u003C/span>: none;\n  \u003Cspan class=\"hljs-attribute\">border-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> dotted \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--decoration-secondary);\n  \u003Cspan class=\"hljs-attribute\">transition\u003C/span>: all \u003Cspan class=\"hljs-number\">0.2s\u003C/span> ease;\n  \u003Cspan class=\"hljs-attribute\">cursor\u003C/span>: pointer;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.hover-underline\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:hover\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">text-decoration\u003C/span>: underline;\n  \u003Cspan class=\"hljs-attribute\">text-decoration-color\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--decoration-primary);\n  \u003Cspan class=\"hljs-attribute\">text-decoration\u003C/span>-thickness: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--decoration-medium);\n  \u003Cspan class=\"hljs-attribute\">border-bottom\u003C/span>: none;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Animated decoration effects */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.animated-underline\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">position\u003C/span>: relative;\n  \u003Cspan class=\"hljs-attribute\">text-decoration\u003C/span>: none;\n  \u003Cspan class=\"hljs-attribute\">color\u003C/span>: inherit;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.animated-underline\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">::after\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">content\u003C/span>: \u003Cspan class=\"hljs-string\">''\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">position\u003C/span>: absolute;\n  \u003Cspan class=\"hljs-attribute\">bottom\u003C/span>: -\u003Cspan class=\"hljs-number\">2px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">left\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">height\u003C/span>: \u003Cspan class=\"hljs-number\">2px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--decoration-primary);\n  \u003Cspan class=\"hljs-attribute\">transition\u003C/span>: width \u003Cspan class=\"hljs-number\">0.3s\u003C/span> ease;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.animated-underline\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:hover\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">::after\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">100%\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Gradient underline effects */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.gradient-underline\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">text-decoration\u003C/span>: none;\n  \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-built_in\">linear-gradient\u003C/span>(\n    to right,\n    \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--decoration-primary),\n    \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--decoration-accent)\n  );\n  \u003Cspan class=\"hljs-attribute\">background-size\u003C/span>: \u003Cspan class=\"hljs-number\">100%\u003C/span> \u003Cspan class=\"hljs-number\">2px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">background-position\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">100%\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">background-repeat\u003C/span>: no-repeat;\n  \u003Cspan class=\"hljs-attribute\">padding-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">4px\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Context-aware decorations */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.markdown-content\u003C/span> \u003Cspan class=\"hljs-selector-class\">.definition-term\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">text-decoration\u003C/span>: underline dotted;\n  \u003Cspan class=\"hljs-attribute\">text-decoration-color\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--decoration-accent);\n  \u003Cspan class=\"hljs-attribute\">text-decoration\u003C/span>-thickness: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--decoration-thin);\n  \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">600\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.markdown-content\u003C/span> \u003Cspan class=\"hljs-selector-class\">.external-link\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">text-decoration\u003C/span>: underline;\n  \u003Cspan class=\"hljs-attribute\">text-decoration-color\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--decoration-primary);\n  \u003Cspan class=\"hljs-attribute\">text-decoration\u003C/span>-thickness: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--decoration-thin);\n  text-underline-offset: \u003Cspan class=\"hljs-number\">2px\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.markdown-content\u003C/span> \u003Cspan class=\"hljs-selector-class\">.internal-link\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">text-decoration\u003C/span>: underline dashed;\n  \u003Cspan class=\"hljs-attribute\">text-decoration-color\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--decoration-secondary);\n  \u003Cspan class=\"hljs-attribute\">text-decoration\u003C/span>-thickness: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--decoration-thin);\n}\n\n\u003Cspan class=\"hljs-comment\">/* Print-optimized decorations */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> print {\n  \u003Cspan class=\"hljs-selector-class\">.underline\u003C/span>,\n  \u003Cspan class=\"hljs-selector-class\">.underline-thin\u003C/span>,\n  \u003Cspan class=\"hljs-selector-class\">.underline-thick\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">text-decoration\u003C/span>: underline;\n    \u003Cspan class=\"hljs-attribute\">text-decoration-color\u003C/span>: black;\n    \u003Cspan class=\"hljs-attribute\">text-decoration\u003C/span>-thickness: \u003Cspan class=\"hljs-number\">1pt\u003C/span>;\n  }\n  \n  \u003Cspan class=\"hljs-selector-class\">.underline-dotted\u003C/span>,\n  \u003Cspan class=\"hljs-selector-class\">.underline-dashed\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">text-decoration\u003C/span>: underline;\n    \u003Cspan class=\"hljs-attribute\">text-decoration-style\u003C/span>: solid;\n    \u003Cspan class=\"hljs-attribute\">text-decoration-color\u003C/span>: black;\n  }\n  \n  \u003Cspan class=\"hljs-selector-class\">.underline-wavy\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">text-decoration\u003C/span>: underline;\n    \u003Cspan class=\"hljs-attribute\">text-decoration-color\u003C/span>: black;\n  }\n  \n  \u003Cspan class=\"hljs-selector-class\">.animated-underline\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">::after\u003C/span>,\n  \u003Cspan class=\"hljs-selector-class\">.hover-underline\u003C/span>,\n  \u003Cspan class=\"hljs-selector-class\">.gradient-underline\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">text-decoration\u003C/span>: underline;\n    \u003Cspan class=\"hljs-attribute\">background\u003C/span>: none;\n  }\n}\n\n\u003Cspan class=\"hljs-comment\">/* Accessibility enhancements */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> (\u003Cspan class=\"hljs-attribute\">prefers-reduced-motion\u003C/span>: reduce) {\n  \u003Cspan class=\"hljs-selector-class\">.animated-underline\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">::after\u003C/span>,\n  \u003Cspan class=\"hljs-selector-class\">.hover-underline\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">transition\u003C/span>: none;\n  }\n}\n\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> (\u003Cspan class=\"hljs-attribute\">prefers-contrast\u003C/span>: high) {\n  \u003Cspan class=\"hljs-selector-pseudo\">:root\u003C/span> {\n    \u003Cspan class=\"hljs-attr\">--decoration-primary\u003C/span>: \u003Cspan class=\"hljs-number\">#000000\u003C/span>;\n    \u003Cspan class=\"hljs-attr\">--decoration-secondary\u003C/span>: \u003Cspan class=\"hljs-number\">#333333\u003C/span>;\n    \u003Cspan class=\"hljs-attr\">--decoration-accent\u003C/span>: \u003Cspan class=\"hljs-number\">#000000\u003C/span>;\n    \u003Cspan class=\"hljs-attr\">--decoration-warning\u003C/span>: \u003Cspan class=\"hljs-number\">#000000\u003C/span>;\n    \u003Cspan class=\"hljs-attr\">--decoration-danger\u003C/span>: \u003Cspan class=\"hljs-number\">#000000\u003C/span>;\n  }\n  \n  \u003Cspan class=\"hljs-selector-class\">.underline\u003C/span>,\n  \u003Cspan class=\"hljs-selector-class\">.underline-thin\u003C/span>,\n  \u003Cspan class=\"hljs-selector-class\">.underline-thick\u003C/span>,\n  \u003Cspan class=\"hljs-selector-class\">.underline-dotted\u003C/span>,\n  \u003Cspan class=\"hljs-selector-class\">.underline-dashed\u003C/span>,\n  \u003Cspan class=\"hljs-selector-class\">.underline-wavy\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">text-decoration-color\u003C/span>: black;\n    \u003Cspan class=\"hljs-attribute\">text-decoration\u003C/span>-thickness: \u003Cspan class=\"hljs-number\">2px\u003C/span>;\n  }\n}\n\u003C/code>\u003C/pre>\u003Ch3 id=\"dynamic-text-decoration-with-javascript\">Dynamic Text Decoration with JavaScript\u003C/h3>\n\u003Cp>Interactive decoration controls for enhanced user experience:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-javascript\">\u003Cspan class=\"hljs-comment\">// markdown-decoration-controller.js - Interactive text decoration management\u003C/span>\n\n\u003Cspan class=\"hljs-keyword\">class\u003C/span> \u003Cspan class=\"hljs-title class_\">MarkdownDecorationController\u003C/span> {\n  \u003Cspan class=\"hljs-title function_\">constructor\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">decorationStyles\u003C/span> = {\n      \u003Cspan class=\"hljs-attr\">underline\u003C/span>: \u003Cspan class=\"hljs-string\">'text-decoration: underline; text-decoration-color: #3b82f6; text-decoration-thickness: 2px;'\u003C/span>,\n      \u003Cspan class=\"hljs-attr\">dotted\u003C/span>: \u003Cspan class=\"hljs-string\">'text-decoration: underline dotted; text-decoration-color: #6b7280; text-decoration-thickness: 1.5px;'\u003C/span>,\n      \u003Cspan class=\"hljs-attr\">wavy\u003C/span>: \u003Cspan class=\"hljs-string\">'text-decoration: underline wavy; text-decoration-color: #f59e0b; text-decoration-thickness: 1.5px;'\u003C/span>,\n      \u003Cspan class=\"hljs-attr\">double\u003C/span>: \u003Cspan class=\"hljs-string\">'text-decoration: underline; text-decoration-style: double; text-decoration-color: #3b82f6;'\u003C/span>,\n      \u003Cspan class=\"hljs-attr\">overline\u003C/span>: \u003Cspan class=\"hljs-string\">'text-decoration: overline; text-decoration-color: #10b981; text-decoration-thickness: 2px;'\u003C/span>,\n      \u003Cspan class=\"hljs-attr\">strikethrough\u003C/span>: \u003Cspan class=\"hljs-string\">'text-decoration: line-through; text-decoration-color: #ef4444; text-decoration-thickness: 2px;'\u003C/span>\n    };\n    \n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">initializeDecorationControls\u003C/span>();\n  }\n  \n  \u003Cspan class=\"hljs-title function_\">initializeDecorationControls\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n    \u003Cspan class=\"hljs-comment\">// Add decoration toolbar to page\u003C/span>\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">createDecorationToolbar\u003C/span>();\n    \n    \u003Cspan class=\"hljs-comment\">// Enable text selection and decoration\u003C/span>\n    \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'mouseup'\u003C/span>, \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">event\u003C/span>) =>\u003C/span> {\n      \u003Cspan class=\"hljs-keyword\">const\u003C/span> selection = \u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-title function_\">getSelection\u003C/span>();\n      \u003Cspan class=\"hljs-keyword\">if\u003C/span> (selection.\u003Cspan class=\"hljs-title function_\">toString\u003C/span>().\u003Cspan class=\"hljs-property\">length\u003C/span> > \u003Cspan class=\"hljs-number\">0\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">showDecorationOptions\u003C/span>(event, selection);\n      }\n    });\n    \n    \u003Cspan class=\"hljs-comment\">// Hide options when clicking elsewhere\u003C/span>\n    \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'click'\u003C/span>, \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">event\u003C/span>) =>\u003C/span> {\n      \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!event.\u003Cspan class=\"hljs-property\">target\u003C/span>.\u003Cspan class=\"hljs-title function_\">closest\u003C/span>(\u003Cspan class=\"hljs-string\">'.decoration-toolbar'\u003C/span>)) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">hideDecorationOptions\u003C/span>();\n      }\n    });\n  }\n  \n  \u003Cspan class=\"hljs-title function_\">createDecorationToolbar\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> toolbar = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n    toolbar.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'decoration-toolbar'\u003C/span>;\n    toolbar.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">cssText\u003C/span> = \u003Cspan class=\"hljs-string\">`\n      position: fixed;\n      background: white;\n      border: 1px solid #d1d5db;\n      border-radius: 8px;\n      padding: 8px;\n      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n      z-index: 1000;\n      display: none;\n      gap: 4px;\n    `\u003C/span>;\n    \n    \u003Cspan class=\"hljs-comment\">// Create decoration buttons\u003C/span>\n    \u003Cspan class=\"hljs-title class_\">Object\u003C/span>.\u003Cspan class=\"hljs-title function_\">keys\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">decorationStyles\u003C/span>).\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">type\u003C/span> =>\u003C/span> {\n      \u003Cspan class=\"hljs-keyword\">const\u003C/span> button = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'button'\u003C/span>);\n      button.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">getDecorationIcon\u003C/span>(type);\n      button.\u003Cspan class=\"hljs-property\">title\u003C/span> = \u003Cspan class=\"hljs-string\">`Apply \u003Cspan class=\"hljs-subst\">${type}\u003C/span> decoration`\u003C/span>;\n      button.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">`decoration-btn decoration-\u003Cspan class=\"hljs-subst\">${type}\u003C/span>`\u003C/span>;\n      button.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">cssText\u003C/span> = \u003Cspan class=\"hljs-string\">`\n        padding: 6px 10px;\n        border: 1px solid #d1d5db;\n        background: white;\n        border-radius: 4px;\n        cursor: pointer;\n        font-size: 14px;\n      `\u003C/span>;\n      \n      button.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'click'\u003C/span>, \u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">applyDecoration\u003C/span>(type);\n      });\n      \n      toolbar.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(button);\n    });\n    \n    \u003Cspan class=\"hljs-comment\">// Add remove decoration button\u003C/span>\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> removeBtn = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'button'\u003C/span>);\n    removeBtn.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = \u003Cspan class=\"hljs-string\">'✗'\u003C/span>;\n    removeBtn.\u003Cspan class=\"hljs-property\">title\u003C/span> = \u003Cspan class=\"hljs-string\">'Remove decoration'\u003C/span>;\n    removeBtn.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'decoration-btn decoration-remove'\u003C/span>;\n    removeBtn.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">cssText\u003C/span> = \u003Cspan class=\"hljs-string\">`\n      padding: 6px 10px;\n      border: 1px solid #ef4444;\n      background: #fef2f2;\n      color: #ef4444;\n      border-radius: 4px;\n      cursor: pointer;\n      font-size: 14px;\n    `\u003C/span>;\n    \n    removeBtn.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'click'\u003C/span>, \u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n      \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">removeDecoration\u003C/span>();\n    });\n    \n    toolbar.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(removeBtn);\n    \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-property\">body\u003C/span>.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(toolbar);\n    \n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">toolbar\u003C/span> = toolbar;\n  }\n  \n  \u003Cspan class=\"hljs-title function_\">getDecorationIcon\u003C/span>(\u003Cspan class=\"hljs-params\">type\u003C/span>) {\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> icons = {\n      \u003Cspan class=\"hljs-attr\">underline\u003C/span>: \u003Cspan class=\"hljs-string\">'U̲'\u003C/span>,\n      \u003Cspan class=\"hljs-attr\">dotted\u003C/span>: \u003Cspan class=\"hljs-string\">'Ṳ'\u003C/span>,\n      \u003Cspan class=\"hljs-attr\">wavy\u003C/span>: \u003Cspan class=\"hljs-string\">'Ṵ'\u003C/span>,\n      \u003Cspan class=\"hljs-attr\">double\u003C/span>: \u003Cspan class=\"hljs-string\">'U̳'\u003C/span>,\n      \u003Cspan class=\"hljs-attr\">overline\u003C/span>: \u003Cspan class=\"hljs-string\">'Ū'\u003C/span>,\n      \u003Cspan class=\"hljs-attr\">strikethrough\u003C/span>: \u003Cspan class=\"hljs-string\">'U̶'\u003C/span>\n    };\n    \u003Cspan class=\"hljs-keyword\">return\u003C/span> icons[type] || type;\n  }\n  \n  \u003Cspan class=\"hljs-title function_\">showDecorationOptions\u003C/span>(\u003Cspan class=\"hljs-params\">event, selection\u003C/span>) {\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentSelection\u003C/span> = selection;\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">toolbar\u003C/span>.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">display\u003C/span> = \u003Cspan class=\"hljs-string\">'flex'\u003C/span>;\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">toolbar\u003C/span>.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">left\u003C/span> = \u003Cspan class=\"hljs-string\">`\u003Cspan class=\"hljs-subst\">${event.pageX}\u003C/span>px`\u003C/span>;\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">toolbar\u003C/span>.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">top\u003C/span> = \u003Cspan class=\"hljs-string\">`\u003Cspan class=\"hljs-subst\">${event.pageY - \u003Cspan class=\"hljs-number\">50\u003C/span>}\u003C/span>px`\u003C/span>;\n  }\n  \n  \u003Cspan class=\"hljs-title function_\">hideDecorationOptions\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">toolbar\u003C/span>.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">display\u003C/span> = \u003Cspan class=\"hljs-string\">'none'\u003C/span>;\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentSelection\u003C/span> = \u003Cspan class=\"hljs-literal\">null\u003C/span>;\n  }\n  \n  \u003Cspan class=\"hljs-title function_\">applyDecoration\u003C/span>(\u003Cspan class=\"hljs-params\">type\u003C/span>) {\n    \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentSelection\u003C/span> || \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentSelection\u003C/span>.\u003Cspan class=\"hljs-title function_\">toString\u003C/span>().\u003Cspan class=\"hljs-property\">length\u003C/span> === \u003Cspan class=\"hljs-number\">0\u003C/span>) {\n      \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> range = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentSelection\u003C/span>.\u003Cspan class=\"hljs-title function_\">getRangeAt\u003C/span>(\u003Cspan class=\"hljs-number\">0\u003C/span>);\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> selectedText = range.\u003Cspan class=\"hljs-title function_\">toString\u003C/span>();\n    \n    \u003Cspan class=\"hljs-comment\">// Create decorated span element\u003C/span>\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> span = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'span'\u003C/span>);\n    span.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">cssText\u003C/span> = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">decorationStyles\u003C/span>[type];\n    span.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">`markdown-decorated markdown-\u003Cspan class=\"hljs-subst\">${type}\u003C/span>`\u003C/span>;\n    span.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = selectedText;\n    \n    \u003Cspan class=\"hljs-comment\">// Replace selected text with decorated span\u003C/span>\n    range.\u003Cspan class=\"hljs-title function_\">deleteContents\u003C/span>();\n    range.\u003Cspan class=\"hljs-title function_\">insertNode\u003C/span>(span);\n    \n    \u003Cspan class=\"hljs-comment\">// Clear selection and hide toolbar\u003C/span>\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentSelection\u003C/span>.\u003Cspan class=\"hljs-title function_\">removeAllRanges\u003C/span>();\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">hideDecorationOptions\u003C/span>();\n    \n    \u003Cspan class=\"hljs-comment\">// Generate Markdown output\u003C/span>\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">generateMarkdownOutput\u003C/span>(selectedText, type);\n  }\n  \n  \u003Cspan class=\"hljs-title function_\">removeDecoration\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n    \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentSelection\u003C/span>) {\n      \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> range = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentSelection\u003C/span>.\u003Cspan class=\"hljs-title function_\">getRangeAt\u003C/span>(\u003Cspan class=\"hljs-number\">0\u003C/span>);\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> container = range.\u003Cspan class=\"hljs-property\">commonAncestorContainer\u003C/span>;\n    \n    \u003Cspan class=\"hljs-comment\">// Find decorated parent element\u003C/span>\n    \u003Cspan class=\"hljs-keyword\">let\u003C/span> decoratedElement = container.\u003Cspan class=\"hljs-property\">nodeType\u003C/span> === \u003Cspan class=\"hljs-title class_\">Node\u003C/span>.\u003Cspan class=\"hljs-property\">TEXT_NODE\u003C/span> ? \n                          container.\u003Cspan class=\"hljs-property\">parentElement\u003C/span> : container;\n    \n    \u003Cspan class=\"hljs-keyword\">while\u003C/span> (decoratedElement && !decoratedElement.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">contains\u003C/span>(\u003Cspan class=\"hljs-string\">'markdown-decorated'\u003C/span>)) {\n      decoratedElement = decoratedElement.\u003Cspan class=\"hljs-property\">parentElement\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-keyword\">if\u003C/span> (decoratedElement && decoratedElement.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">contains\u003C/span>(\u003Cspan class=\"hljs-string\">'markdown-decorated'\u003C/span>)) {\n      \u003Cspan class=\"hljs-comment\">// Replace decorated element with plain text\u003C/span>\n      \u003Cspan class=\"hljs-keyword\">const\u003C/span> textNode = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createTextNode\u003C/span>(decoratedElement.\u003Cspan class=\"hljs-property\">textContent\u003C/span>);\n      decoratedElement.\u003Cspan class=\"hljs-property\">parentNode\u003C/span>.\u003Cspan class=\"hljs-title function_\">replaceChild\u003C/span>(textNode, decoratedElement);\n    }\n    \n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">hideDecorationOptions\u003C/span>();\n  }\n  \n  \u003Cspan class=\"hljs-title function_\">generateMarkdownOutput\u003C/span>(\u003Cspan class=\"hljs-params\">text, decorationType\u003C/span>) {\n    \u003Cspan class=\"hljs-keyword\">let\u003C/span> markdownOutput = \u003Cspan class=\"hljs-string\">''\u003C/span>;\n    \n    \u003Cspan class=\"hljs-keyword\">switch\u003C/span> (decorationType) {\n      \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'underline'\u003C/span>:\n        markdownOutput = \u003Cspan class=\"hljs-string\">`<u>\u003Cspan class=\"hljs-subst\">${text}\u003C/span></u>`\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n      \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'dotted'\u003C/span>:\n        markdownOutput = \u003Cspan class=\"hljs-string\">`<span style="text-decoration: underline dotted;">\u003Cspan class=\"hljs-subst\">${text}\u003C/span></span>`\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n      \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'wavy'\u003C/span>:\n        markdownOutput = \u003Cspan class=\"hljs-string\">`<span style="text-decoration: underline wavy;">\u003Cspan class=\"hljs-subst\">${text}\u003C/span></span>`\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n      \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'double'\u003C/span>:\n        markdownOutput = \u003Cspan class=\"hljs-string\">`<span style="text-decoration: underline; text-decoration-style: double;">\u003Cspan class=\"hljs-subst\">${text}\u003C/span></span>`\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n      \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'overline'\u003C/span>:\n        markdownOutput = \u003Cspan class=\"hljs-string\">`<span style="text-decoration: overline;">\u003Cspan class=\"hljs-subst\">${text}\u003C/span></span>`\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n      \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'strikethrough'\u003C/span>:\n        markdownOutput = \u003Cspan class=\"hljs-string\">`~~\u003Cspan class=\"hljs-subst\">${text}\u003C/span>~~`\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n      \u003Cspan class=\"hljs-attr\">default\u003C/span>:\n        markdownOutput = \u003Cspan class=\"hljs-string\">`<span class="markdown-\u003Cspan class=\"hljs-subst\">${decorationType}\u003C/span>">\u003Cspan class=\"hljs-subst\">${text}\u003C/span></span>`\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-comment\">// Copy to clipboard for easy pasting into Markdown editors\u003C/span>\n    \u003Cspan class=\"hljs-keyword\">if\u003C/span> (navigator.\u003Cspan class=\"hljs-property\">clipboard\u003C/span>) {\n      navigator.\u003Cspan class=\"hljs-property\">clipboard\u003C/span>.\u003Cspan class=\"hljs-title function_\">writeText\u003C/span>(markdownOutput).\u003Cspan class=\"hljs-title function_\">then\u003C/span>(\u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">showNotification\u003C/span>(\u003Cspan class=\"hljs-string\">`Markdown code copied: \u003Cspan class=\"hljs-subst\">${markdownOutput}\u003C/span>`\u003C/span>);\n      });\n    }\n  }\n  \n  \u003Cspan class=\"hljs-title function_\">showNotification\u003C/span>(\u003Cspan class=\"hljs-params\">message\u003C/span>) {\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> notification = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n    notification.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = message;\n    notification.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">cssText\u003C/span> = \u003Cspan class=\"hljs-string\">`\n      position: fixed;\n      top: 20px;\n      right: 20px;\n      background: #10b981;\n      color: white;\n      padding: 12px 16px;\n      border-radius: 6px;\n      z-index: 1001;\n      font-size: 14px;\n      max-width: 300px;\n    `\u003C/span>;\n    \n    \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-property\">body\u003C/span>.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(notification);\n    \n    \u003Cspan class=\"hljs-built_in\">setTimeout\u003C/span>(\u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n      notification.\u003Cspan class=\"hljs-title function_\">remove\u003C/span>();\n    }, \u003Cspan class=\"hljs-number\">3000\u003C/span>);\n  }\n  \n  \u003Cspan class=\"hljs-comment\">// Export current document decorations as CSS\u003C/span>\n  \u003Cspan class=\"hljs-title function_\">exportDecorationsAsCSS\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> decoratedElements = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'.markdown-decorated'\u003C/span>);\n    \u003Cspan class=\"hljs-keyword\">let\u003C/span> cssOutput = \u003Cspan class=\"hljs-string\">'/* Generated Markdown text decoration CSS */\\n\\n'\u003C/span>;\n    \n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> usedTypes = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Set\u003C/span>();\n    decoratedElements.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">element\u003C/span> =>\u003C/span> {\n      \u003Cspan class=\"hljs-keyword\">const\u003C/span> classList = \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">from\u003C/span>(element.\u003Cspan class=\"hljs-property\">classList\u003C/span>);\n      classList.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">className\u003C/span> =>\u003C/span> {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (className.\u003Cspan class=\"hljs-title function_\">startsWith\u003C/span>(\u003Cspan class=\"hljs-string\">'markdown-'\u003C/span>) && className !== \u003Cspan class=\"hljs-string\">'markdown-decorated'\u003C/span>) {\n          usedTypes.\u003Cspan class=\"hljs-title function_\">add\u003C/span>(className);\n        }\n      });\n    });\n    \n    usedTypes.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">type\u003C/span> =>\u003C/span> {\n      \u003Cspan class=\"hljs-keyword\">const\u003C/span> decorationType = type.\u003Cspan class=\"hljs-title function_\">replace\u003C/span>(\u003Cspan class=\"hljs-string\">'markdown-'\u003C/span>, \u003Cspan class=\"hljs-string\">''\u003C/span>);\n      cssOutput += \u003Cspan class=\"hljs-string\">`.\u003Cspan class=\"hljs-subst\">${type}\u003C/span> {\\n  \u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.decorationStyles[decorationType]}\u003C/span>\\n}\\n\\n`\u003C/span>;\n    });\n    \n    \u003Cspan class=\"hljs-keyword\">return\u003C/span> cssOutput;\n  }\n  \n  \u003Cspan class=\"hljs-comment\">// Import decorations from existing Markdown\u003C/span>\n  \u003Cspan class=\"hljs-title function_\">importDecorations\u003C/span>(\u003Cspan class=\"hljs-params\">markdownContent\u003C/span>) {\n    \u003Cspan class=\"hljs-comment\">// Parse HTML decoration elements from Markdown\u003C/span>\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> tempDiv = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n    tempDiv.\u003Cspan class=\"hljs-property\">innerHTML\u003C/span> = markdownContent;\n    \n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> underlinedElements = tempDiv.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'u, span[style*="text-decoration"]'\u003C/span>);\n    \n    underlinedElements.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">element\u003C/span> =>\u003C/span> {\n      \u003Cspan class=\"hljs-keyword\">if\u003C/span> (element.\u003Cspan class=\"hljs-property\">tagName\u003C/span> === \u003Cspan class=\"hljs-string\">'U'\u003C/span>) {\n        element.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'markdown-decorated markdown-underline'\u003C/span>;\n      } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> style = element.\u003Cspan class=\"hljs-title function_\">getAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'style'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (style.\u003Cspan class=\"hljs-title function_\">includes\u003C/span>(\u003Cspan class=\"hljs-string\">'dotted'\u003C/span>)) {\n          element.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'markdown-decorated markdown-dotted'\u003C/span>;\n        } \u003Cspan class=\"hljs-keyword\">else\u003C/span> \u003Cspan class=\"hljs-keyword\">if\u003C/span> (style.\u003Cspan class=\"hljs-title function_\">includes\u003C/span>(\u003Cspan class=\"hljs-string\">'wavy'\u003C/span>)) {\n          element.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'markdown-decorated markdown-wavy'\u003C/span>;\n        } \u003Cspan class=\"hljs-keyword\">else\u003C/span> \u003Cspan class=\"hljs-keyword\">if\u003C/span> (style.\u003Cspan class=\"hljs-title function_\">includes\u003C/span>(\u003Cspan class=\"hljs-string\">'double'\u003C/span>)) {\n          element.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'markdown-decorated markdown-double'\u003C/span>;\n        } \u003Cspan class=\"hljs-keyword\">else\u003C/span> \u003Cspan class=\"hljs-keyword\">if\u003C/span> (style.\u003Cspan class=\"hljs-title function_\">includes\u003C/span>(\u003Cspan class=\"hljs-string\">'overline'\u003C/span>)) {\n          element.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'markdown-decorated markdown-overline'\u003C/span>;\n        }\n      }\n    });\n    \n    \u003Cspan class=\"hljs-keyword\">return\u003C/span> tempDiv.\u003Cspan class=\"hljs-property\">innerHTML\u003C/span>;\n  }\n}\n\n\u003Cspan class=\"hljs-comment\">// Initialize decoration controller when DOM is ready\u003C/span>\n\u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'DOMContentLoaded'\u003C/span>, \u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n  \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'.markdown-content'\u003C/span>)) {\n    \u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-property\">markdownDecorationController\u003C/span> = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">MarkdownDecorationController\u003C/span>();\n  }\n});\n\n\u003Cspan class=\"hljs-comment\">// Export for external use\u003C/span>\n\u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-keyword\">typeof\u003C/span> \u003Cspan class=\"hljs-variable language_\">module\u003C/span> !== \u003Cspan class=\"hljs-string\">'undefined'\u003C/span> && \u003Cspan class=\"hljs-variable language_\">module\u003C/span>.\u003Cspan class=\"hljs-property\">exports\u003C/span>) {\n  \u003Cspan class=\"hljs-variable language_\">module\u003C/span>.\u003Cspan class=\"hljs-property\">exports\u003C/span> = \u003Cspan class=\"hljs-title class_\">MarkdownDecorationController\u003C/span>;\n}\n\u003C/code>\u003C/pre>\u003Ch2 id=\"advanced-decoration-techniques\">Advanced Decoration Techniques\u003C/h2>\n\u003Ch3 id=\"svg-based-custom-underlines\">SVG-Based Custom Underlines\u003C/h3>\n\u003Cp>Creative underline effects using inline SVG for unique visual appeal:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-html\">\u003Cspan class=\"hljs-comment\"><!-- SVG-based custom underlines -->\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"position: relative; display: inline-block;"\u003C/span>>\u003C/span>\n  Custom SVG underlined text\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">svg\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"position: absolute; bottom: -3px; left: 0; width: 100%; height: 6px;"\u003C/span> \u003Cspan class=\"hljs-attr\">viewBox\u003C/span>=\u003Cspan class=\"hljs-string\">"0 0 100 6"\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">path\u003C/span> \u003Cspan class=\"hljs-attr\">d\u003C/span>=\u003Cspan class=\"hljs-string\">"M0,4 Q25,0 50,4 T100,4"\u003C/span> \u003Cspan class=\"hljs-attr\">stroke\u003C/span>=\u003Cspan class=\"hljs-string\">"#3b82f6"\u003C/span> \u003Cspan class=\"hljs-attr\">stroke-width\u003C/span>=\u003Cspan class=\"hljs-string\">"2"\u003C/span> \u003Cspan class=\"hljs-attr\">fill\u003C/span>=\u003Cspan class=\"hljs-string\">"none"\u003C/span>/>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">svg\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">span\u003C/span>>\u003C/span>\n\n\u003Cspan class=\"hljs-comment\"><!-- Animated SVG underline -->\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"position: relative; display: inline-block;"\u003C/span>>\u003C/span>\n  Animated wavy underline\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">svg\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"position: absolute; bottom: -4px; left: 0; width: 100%; height: 8px;"\u003C/span> \u003Cspan class=\"hljs-attr\">viewBox\u003C/span>=\u003Cspan class=\"hljs-string\">"0 0 100 8"\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">path\u003C/span> \u003Cspan class=\"hljs-attr\">d\u003C/span>=\u003Cspan class=\"hljs-string\">"M0,4 Q25,0 50,4 T100,4"\u003C/span> \u003Cspan class=\"hljs-attr\">stroke\u003C/span>=\u003Cspan class=\"hljs-string\">"#f59e0b"\u003C/span> \u003Cspan class=\"hljs-attr\">stroke-width\u003C/span>=\u003Cspan class=\"hljs-string\">"2"\u003C/span> \u003Cspan class=\"hljs-attr\">fill\u003C/span>=\u003Cspan class=\"hljs-string\">"none"\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">animate\u003C/span> \u003Cspan class=\"hljs-attr\">attributeName\u003C/span>=\u003Cspan class=\"hljs-string\">"d"\u003C/span> \n               \u003Cspan class=\"hljs-attr\">values\u003C/span>=\u003Cspan class=\"hljs-string\">"M0,4 Q25,0 50,4 T100,4;M0,4 Q25,8 50,4 T100,4;M0,4 Q25,0 50,4 T100,4"\u003C/span> \n               \u003Cspan class=\"hljs-attr\">dur\u003C/span>=\u003Cspan class=\"hljs-string\">"2s"\u003C/span> \n               \u003Cspan class=\"hljs-attr\">repeatCount\u003C/span>=\u003Cspan class=\"hljs-string\">"indefinite"\u003C/span>/>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">path\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">svg\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">span\u003C/span>>\u003C/span>\n\n\u003Cspan class=\"hljs-comment\"><!-- Gradient SVG underline -->\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"position: relative; display: inline-block;"\u003C/span>>\u003C/span>\n  Gradient SVG underline\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">svg\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"position: absolute; bottom: -2px; left: 0; width: 100%; height: 4px;"\u003C/span> \u003Cspan class=\"hljs-attr\">viewBox\u003C/span>=\u003Cspan class=\"hljs-string\">"0 0 100 4"\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">defs\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">linearGradient\u003C/span> \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"gradient-underline"\u003C/span> \u003Cspan class=\"hljs-attr\">x1\u003C/span>=\u003Cspan class=\"hljs-string\">"0%"\u003C/span> \u003Cspan class=\"hljs-attr\">y1\u003C/span>=\u003Cspan class=\"hljs-string\">"0%"\u003C/span> \u003Cspan class=\"hljs-attr\">x2\u003C/span>=\u003Cspan class=\"hljs-string\">"100%"\u003C/span> \u003Cspan class=\"hljs-attr\">y1\u003C/span>=\u003Cspan class=\"hljs-string\">"0%"\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">stop\u003C/span> \u003Cspan class=\"hljs-attr\">offset\u003C/span>=\u003Cspan class=\"hljs-string\">"0%"\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"stop-color:#667eea;stop-opacity:1"\u003C/span> />\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">stop\u003C/span> \u003Cspan class=\"hljs-attr\">offset\u003C/span>=\u003Cspan class=\"hljs-string\">"100%"\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"stop-color:#764ba2;stop-opacity:1"\u003C/span> />\u003C/span>\n      \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">linearGradient\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">defs\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">rect\u003C/span> \u003Cspan class=\"hljs-attr\">width\u003C/span>=\u003Cspan class=\"hljs-string\">"100"\u003C/span> \u003Cspan class=\"hljs-attr\">height\u003C/span>=\u003Cspan class=\"hljs-string\">"4"\u003C/span> \u003Cspan class=\"hljs-attr\">fill\u003C/span>=\u003Cspan class=\"hljs-string\">"url(#gradient-underline)"\u003C/span>/>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">svg\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">span\u003C/span>>\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch3 id=\"css-custom-properties-for-dynamic-decoration\">CSS Custom Properties for Dynamic Decoration\u003C/h3>\n\u003Cp>Flexible decoration systems using CSS custom properties:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-css\">\u003Cspan class=\"hljs-comment\">/* Dynamic decoration system with custom properties */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.dynamic-decoration\u003C/span> {\n  \u003Cspan class=\"hljs-attr\">--decoration-type\u003C/span>: underline;\n  \u003Cspan class=\"hljs-attr\">--decoration-color\u003C/span>: \u003Cspan class=\"hljs-number\">#3b82f6\u003C/span>;\n  \u003Cspan class=\"hljs-attr\">--decoration-thickness\u003C/span>: \u003Cspan class=\"hljs-number\">2px\u003C/span>;\n  \u003Cspan class=\"hljs-attr\">--decoration-style\u003C/span>: solid;\n  \u003Cspan class=\"hljs-attr\">--decoration-offset\u003C/span>: \u003Cspan class=\"hljs-number\">2px\u003C/span>;\n  \n  \u003Cspan class=\"hljs-attribute\">text-decoration\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--decoration-type) \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--decoration-style);\n  \u003Cspan class=\"hljs-attribute\">text-decoration-color\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--decoration-color);\n  \u003Cspan class=\"hljs-attribute\">text-decoration\u003C/span>-thickness: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--decoration-thickness);\n  text-underline-offset: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--decoration-offset);\n}\n\n\u003Cspan class=\"hljs-comment\">/* Contextual decoration variants */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.decoration-emphasis\u003C/span> {\n  \u003Cspan class=\"hljs-attr\">--decoration-color\u003C/span>: \u003Cspan class=\"hljs-number\">#ef4444\u003C/span>;\n  \u003Cspan class=\"hljs-attr\">--decoration-thickness\u003C/span>: \u003Cspan class=\"hljs-number\">3px\u003C/span>;\n  \u003Cspan class=\"hljs-attr\">--decoration-style\u003C/span>: solid;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.decoration-subtle\u003C/span> {\n  \u003Cspan class=\"hljs-attr\">--decoration-color\u003C/span>: \u003Cspan class=\"hljs-number\">#9ca3af\u003C/span>;\n  \u003Cspan class=\"hljs-attr\">--decoration-thickness\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span>;\n  \u003Cspan class=\"hljs-attr\">--decoration-style\u003C/span>: dotted;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.decoration-highlight\u003C/span> {\n  \u003Cspan class=\"hljs-attr\">--decoration-type\u003C/span>: underline overline;\n  \u003Cspan class=\"hljs-attr\">--decoration-color\u003C/span>: \u003Cspan class=\"hljs-number\">#10b981\u003C/span>;\n  \u003Cspan class=\"hljs-attr\">--decoration-thickness\u003C/span>: \u003Cspan class=\"hljs-number\">2px\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Responsive decoration adjustments */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> (\u003Cspan class=\"hljs-attribute\">max-width\u003C/span>: \u003Cspan class=\"hljs-number\">768px\u003C/span>) {\n  \u003Cspan class=\"hljs-selector-class\">.dynamic-decoration\u003C/span> {\n    \u003Cspan class=\"hljs-attr\">--decoration-thickness\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span>;\n    \u003Cspan class=\"hljs-attr\">--decoration-offset\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span>;\n  }\n}\n\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> (\u003Cspan class=\"hljs-attribute\">min-width\u003C/span>: \u003Cspan class=\"hljs-number\">1200px\u003C/span>) {\n  \u003Cspan class=\"hljs-selector-class\">.dynamic-decoration\u003C/span> {\n    \u003Cspan class=\"hljs-attr\">--decoration-thickness\u003C/span>: \u003Cspan class=\"hljs-number\">2.5px\u003C/span>;\n    \u003Cspan class=\"hljs-attr\">--decoration-offset\u003C/span>: \u003Cspan class=\"hljs-number\">3px\u003C/span>;\n  }\n}\n\u003C/code>\u003C/pre>\u003Ch3 id=\"interactive-decoration-states\">Interactive Decoration States\u003C/h3>\n\u003Cp>Stateful decorations that respond to user interaction:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-css\">\u003Cspan class=\"hljs-comment\">/* Interactive decoration states */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.interactive-decoration\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">text-decoration\u003C/span>: none;\n  \u003Cspan class=\"hljs-attribute\">position\u003C/span>: relative;\n  \u003Cspan class=\"hljs-attribute\">transition\u003C/span>: all \u003Cspan class=\"hljs-number\">0.3s\u003C/span> ease;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.interactive-decoration\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">::before\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">content\u003C/span>: \u003Cspan class=\"hljs-string\">''\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">position\u003C/span>: absolute;\n  \u003Cspan class=\"hljs-attribute\">bottom\u003C/span>: -\u003Cspan class=\"hljs-number\">2px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">left\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">height\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#d1d5db\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">transition\u003C/span>: all \u003Cspan class=\"hljs-number\">0.2s\u003C/span> ease;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.interactive-decoration\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:hover\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">::before\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">100%\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">height\u003C/span>: \u003Cspan class=\"hljs-number\">2px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#3b82f6\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.interactive-decoration\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:focus\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">outline\u003C/span>: none;\n  \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-built_in\">rgba\u003C/span>(\u003Cspan class=\"hljs-number\">59\u003C/span>, \u003Cspan class=\"hljs-number\">130\u003C/span>, \u003Cspan class=\"hljs-number\">246\u003C/span>, \u003Cspan class=\"hljs-number\">0.1\u003C/span>);\n  \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">2px\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.interactive-decoration\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:focus\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">::before\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">100%\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">height\u003C/span>: \u003Cspan class=\"hljs-number\">2px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#3b82f6\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.interactive-decoration\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:active\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">transform\u003C/span>: \u003Cspan class=\"hljs-built_in\">translateY\u003C/span>(\u003Cspan class=\"hljs-number\">1px\u003C/span>);\n}\n\n\u003Cspan class=\"hljs-selector-class\">.interactive-decoration\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:active\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">::before\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#1d4ed8\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">height\u003C/span>: \u003Cspan class=\"hljs-number\">3px\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Loading state decoration */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.decoration-loading\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">text-decoration\u003C/span>: underline;\n  \u003Cspan class=\"hljs-attribute\">text-decoration-color\u003C/span>: transparent;\n  \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-built_in\">linear-gradient\u003C/span>(\u003Cspan class=\"hljs-number\">90deg\u003C/span>, \u003Cspan class=\"hljs-number\">#e5e7eb\u003C/span> \u003Cspan class=\"hljs-number\">25%\u003C/span>, \u003Cspan class=\"hljs-number\">#f3f4f6\u003C/span> \u003Cspan class=\"hljs-number\">50%\u003C/span>, \u003Cspan class=\"hljs-number\">#e5e7eb\u003C/span> \u003Cspan class=\"hljs-number\">75%\u003C/span>);\n  \u003Cspan class=\"hljs-attribute\">background-size\u003C/span>: \u003Cspan class=\"hljs-number\">200%\u003C/span> \u003Cspan class=\"hljs-number\">100%\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">animation\u003C/span>: loading-decoration \u003Cspan class=\"hljs-number\">2s\u003C/span> infinite;\n  \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">2px\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-keyword\">@keyframes\u003C/span> loading-decoration {\n  \u003Cspan class=\"hljs-number\">0%\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">background-position\u003C/span>: \u003Cspan class=\"hljs-number\">200%\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n  }\n  \u003Cspan class=\"hljs-number\">100%\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">background-position\u003C/span>: -\u003Cspan class=\"hljs-number\">200%\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n  }\n}\n\n\u003Cspan class=\"hljs-comment\">/* Success/error state decorations */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.decoration-success\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">text-decoration\u003C/span>: underline;\n  \u003Cspan class=\"hljs-attribute\">text-decoration-color\u003C/span>: \u003Cspan class=\"hljs-number\">#22c55e\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">text-decoration\u003C/span>-thickness: \u003Cspan class=\"hljs-number\">2px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">animation\u003C/span>: success-pulse \u003Cspan class=\"hljs-number\">0.6s\u003C/span> ease;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.decoration-error\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">text-decoration\u003C/span>: underline wavy;\n  \u003Cspan class=\"hljs-attribute\">text-decoration-color\u003C/span>: \u003Cspan class=\"hljs-number\">#ef4444\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">text-decoration\u003C/span>-thickness: \u003Cspan class=\"hljs-number\">2px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">animation\u003C/span>: error-shake \u003Cspan class=\"hljs-number\">0.5s\u003C/span> ease;\n}\n\n\u003Cspan class=\"hljs-keyword\">@keyframes\u003C/span> success-pulse {\n  \u003Cspan class=\"hljs-number\">0%\u003C/span>, \u003Cspan class=\"hljs-number\">100%\u003C/span> { \u003Cspan class=\"hljs-attribute\">transform\u003C/span>: \u003Cspan class=\"hljs-built_in\">scale\u003C/span>(\u003Cspan class=\"hljs-number\">1\u003C/span>); }\n  \u003Cspan class=\"hljs-number\">50%\u003C/span> { \u003Cspan class=\"hljs-attribute\">transform\u003C/span>: \u003Cspan class=\"hljs-built_in\">scale\u003C/span>(\u003Cspan class=\"hljs-number\">1.05\u003C/span>); }\n}\n\n\u003Cspan class=\"hljs-keyword\">@keyframes\u003C/span> error-shake {\n  \u003Cspan class=\"hljs-number\">0%\u003C/span>, \u003Cspan class=\"hljs-number\">100%\u003C/span> { \u003Cspan class=\"hljs-attribute\">transform\u003C/span>: \u003Cspan class=\"hljs-built_in\">translateX\u003C/span>(\u003Cspan class=\"hljs-number\">0\u003C/span>); }\n  \u003Cspan class=\"hljs-number\">25%\u003C/span> { \u003Cspan class=\"hljs-attribute\">transform\u003C/span>: \u003Cspan class=\"hljs-built_in\">translateX\u003C/span>(-\u003Cspan class=\"hljs-number\">2px\u003C/span>); }\n  \u003Cspan class=\"hljs-number\">75%\u003C/span> { \u003Cspan class=\"hljs-attribute\">transform\u003C/span>: \u003Cspan class=\"hljs-built_in\">translateX\u003C/span>(\u003Cspan class=\"hljs-number\">2px\u003C/span>); }\n}\n\u003C/code>\u003C/pre>\u003Ch2 id=\"semantic-and-accessibility-considerations\">Semantic and Accessibility Considerations\u003C/h2>\n\u003Ch3 id=\"screen-reader-compatible-decorations\">Screen Reader Compatible Decorations\u003C/h3>\n\u003Cp>Text decoration that enhances accessibility and screen reader compatibility:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-html\">\u003Cspan class=\"hljs-comment\"><!-- Semantic HTML with appropriate ARIA labels -->\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"emphasis-underline"\u003C/span> \u003Cspan class=\"hljs-attr\">role\u003C/span>=\u003Cspan class=\"hljs-string\">"mark"\u003C/span> \u003Cspan class=\"hljs-attr\">aria-label\u003C/span>=\u003Cspan class=\"hljs-string\">"Important information"\u003C/span>>\u003C/span>\n  Important content with semantic underlining\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">span\u003C/span>>\u003C/span>\n\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"technical-term"\u003C/span> \u003Cspan class=\"hljs-attr\">role\u003C/span>=\u003Cspan class=\"hljs-string\">"definition"\u003C/span> \u003Cspan class=\"hljs-attr\">aria-label\u003C/span>=\u003Cspan class=\"hljs-string\">"Technical term definition"\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">u\u003C/span>>\u003C/span>API endpoint\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">u\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">span\u003C/span>>\u003C/span>\n\n\u003Cspan class=\"hljs-comment\"><!-- Screen reader friendly deletion/insertion markup -->\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">del\u003C/span> \u003Cspan class=\"hljs-attr\">aria-label\u003C/span>=\u003Cspan class=\"hljs-string\">"Deleted content"\u003C/span>>\u003C/span>Removed text content\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">del\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">ins\u003C/span> \u003Cspan class=\"hljs-attr\">aria-label\u003C/span>=\u003Cspan class=\"hljs-string\">"Added content"\u003C/span>>\u003C/span>New text content\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">ins\u003C/span>>\u003C/span>\n\n\u003Cspan class=\"hljs-comment\"><!-- Enhanced keyboard navigation -->\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"interactive-underline"\u003C/span> \n      \u003Cspan class=\"hljs-attr\">tabindex\u003C/span>=\u003Cspan class=\"hljs-string\">"0"\u003C/span> \n      \u003Cspan class=\"hljs-attr\">role\u003C/span>=\u003Cspan class=\"hljs-string\">"button"\u003C/span> \n      \u003Cspan class=\"hljs-attr\">aria-label\u003C/span>=\u003Cspan class=\"hljs-string\">"Expandable content trigger"\u003C/span>\n      \u003Cspan class=\"hljs-attr\">onkeydown\u003C/span>=\u003Cspan class=\"hljs-string\">"handleKeyDown(event)"\u003C/span>>\u003C/span>\n  Click or press Enter to expand\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">span\u003C/span>>\u003C/span>\n\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">script\u003C/span>>\u003C/span>\u003Cspan class=\"language-javascript\">\n\u003Cspan class=\"hljs-keyword\">function\u003C/span> \u003Cspan class=\"hljs-title function_\">handleKeyDown\u003C/span>(\u003Cspan class=\"hljs-params\">event\u003C/span>) {\n  \u003Cspan class=\"hljs-keyword\">if\u003C/span> (event.\u003Cspan class=\"hljs-property\">key\u003C/span> === \u003Cspan class=\"hljs-string\">'Enter'\u003C/span> || event.\u003Cspan class=\"hljs-property\">key\u003C/span> === \u003Cspan class=\"hljs-string\">' '\u003C/span>) {\n    event.\u003Cspan class=\"hljs-title function_\">preventDefault\u003C/span>();\n    \u003Cspan class=\"hljs-comment\">// Handle expansion logic\u003C/span>\n    \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">log\u003C/span>(\u003Cspan class=\"hljs-string\">'Expanding content...'\u003C/span>);\n  }\n}\n\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">script\u003C/span>>\u003C/span>\n\n\u003Cspan class=\"hljs-comment\"><!-- High contrast mode support -->\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">style\u003C/span>>\u003C/span>\u003Cspan class=\"language-css\">\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> (\u003Cspan class=\"hljs-attribute\">prefers-contrast\u003C/span>: high) {\n  \u003Cspan class=\"hljs-selector-class\">.emphasis-underline\u003C/span>,\n  \u003Cspan class=\"hljs-selector-class\">.technical-term\u003C/span> u,\n  \u003Cspan class=\"hljs-selector-class\">.interactive-underline\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">text-decoration\u003C/span>: underline;\n    \u003Cspan class=\"hljs-attribute\">text-decoration-color\u003C/span>: currentColor;\n    \u003Cspan class=\"hljs-attribute\">text-decoration\u003C/span>-thickness: \u003Cspan class=\"hljs-number\">2px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">background\u003C/span>: transparent;\n  }\n}\n\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> (\u003Cspan class=\"hljs-attribute\">prefers-reduced-motion\u003C/span>: reduce) {\n  \u003Cspan class=\"hljs-selector-class\">.interactive-underline\u003C/span>,\n  \u003Cspan class=\"hljs-selector-class\">.decoration-loading\u003C/span>,\n  \u003Cspan class=\"hljs-selector-class\">.decoration-success\u003C/span>,\n  \u003Cspan class=\"hljs-selector-class\">.decoration-error\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">animation\u003C/span>: none;\n    \u003Cspan class=\"hljs-attribute\">transition\u003C/span>: none;\n  }\n}\n\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">style\u003C/span>>\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch3 id=\"color-blind-accessible-decorations\">Color Blind Accessible Decorations\u003C/h3>\n\u003Cp>Decoration patterns that remain functional for users with color vision deficiencies:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-css\">\u003Cspan class=\"hljs-comment\">/* Color blind accessible decoration patterns */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.accessible-emphasis\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">text-decoration\u003C/span>: underline;\n  \u003Cspan class=\"hljs-attribute\">text-decoration-style\u003C/span>: solid;\n  \u003Cspan class=\"hljs-attribute\">text-decoration\u003C/span>-thickness: \u003Cspan class=\"hljs-number\">2px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">600\u003C/span>; \u003Cspan class=\"hljs-comment\">/* Pattern redundancy through weight */\u003C/span>\n}\n\n\u003Cspan class=\"hljs-selector-class\">.accessible-warning\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">text-decoration\u003C/span>: underline double;\n  \u003Cspan class=\"hljs-attribute\">text-decoration\u003C/span>-thickness: \u003Cspan class=\"hljs-number\">2px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">text-transform\u003C/span>: uppercase;\n  \u003Cspan class=\"hljs-attribute\">letter-spacing\u003C/span>: \u003Cspan class=\"hljs-number\">0.05em\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.accessible-error\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">text-decoration\u003C/span>: underline wavy;\n  \u003Cspan class=\"hljs-attribute\">text-decoration\u003C/span>-thickness: \u003Cspan class=\"hljs-number\">2px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">font-style\u003C/span>: italic;\n  \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> dotted currentColor;\n  \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">2px\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.accessible-success\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">text-decoration\u003C/span>: overline underline;\n  \u003Cspan class=\"hljs-attribute\">text-decoration\u003C/span>-thickness: \u003Cspan class=\"hljs-number\">1px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">font-variant\u003C/span>: small-caps;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Pattern-based decoration alternatives */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.pattern-emphasis\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">background-image\u003C/span>: \u003Cspan class=\"hljs-built_in\">repeating-linear-gradient\u003C/span>(\n    \u003Cspan class=\"hljs-number\">45deg\u003C/span>,\n    transparent,\n    transparent \u003Cspan class=\"hljs-number\">2px\u003C/span>,\n    currentColor \u003Cspan class=\"hljs-number\">2px\u003C/span>,\n    currentColor \u003Cspan class=\"hljs-number\">4px\u003C/span>\n  );\n  \u003Cspan class=\"hljs-attribute\">background-size\u003C/span>: \u003Cspan class=\"hljs-number\">100%\u003C/span> \u003Cspan class=\"hljs-number\">4px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">background-position\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">100%\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">background-repeat\u003C/span>: no-repeat;\n  \u003Cspan class=\"hljs-attribute\">padding-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">4px\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.pattern-warning\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">background-image\u003C/span>: \u003Cspan class=\"hljs-built_in\">repeating-linear-gradient\u003C/span>(\n    \u003Cspan class=\"hljs-number\">90deg\u003C/span>,\n    transparent,\n    transparent \u003Cspan class=\"hljs-number\">3px\u003C/span>,\n    currentColor \u003Cspan class=\"hljs-number\">3px\u003C/span>,\n    currentColor \u003Cspan class=\"hljs-number\">6px\u003C/span>\n  );\n  \u003Cspan class=\"hljs-attribute\">background-size\u003C/span>: \u003Cspan class=\"hljs-number\">100%\u003C/span> \u003Cspan class=\"hljs-number\">2px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">background-position\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">100%\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">background-repeat\u003C/span>: no-repeat;\n  \u003Cspan class=\"hljs-attribute\">padding-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">3px\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Multiple indication methods */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.multi-indication\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">text-decoration\u003C/span>: underline;\n  \u003Cspan class=\"hljs-attribute\">border-left\u003C/span>: \u003Cspan class=\"hljs-number\">3px\u003C/span> solid currentColor;\n  \u003Cspan class=\"hljs-attribute\">padding-left\u003C/span>: \u003Cspan class=\"hljs-number\">6px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">500\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">position\u003C/span>: relative;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.multi-indication\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">::after\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">content\u003C/span>: \u003Cspan class=\"hljs-string\">'!'\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">position\u003C/span>: absolute;\n  \u003Cspan class=\"hljs-attribute\">right\u003C/span>: -\u003Cspan class=\"hljs-number\">15px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">top\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: bold;\n}\n\u003C/code>\u003C/pre>\u003Ch2 id=\"integration-with-modern-markdown-workflows\">Integration with Modern Markdown Workflows\u003C/h2>\n\u003Cp>Text decoration techniques integrate seamlessly with comprehensive Markdown workflows. When combined with \u003Ca href=\"/blog/markdown-syntax-highlighting-complete-guide\">syntax highlighting capabilities\u003C/a>, proper text decoration ensures that code examples and technical terms receive appropriate visual emphasis while maintaining readability and accessibility standards.\u003C/p>\n\u003Cp>For comprehensive documentation projects, text decoration works effectively with \u003Ca href=\"/blog/markdown-task-lists-and-checkboxes-complete-guide\">task lists and checkboxes\u003C/a> to create visually distinct interactive elements that guide users through complex procedures while maintaining clear visual hierarchy.\u003C/p>\n\u003Cp>When building sophisticated documentation systems, decoration techniques complement \u003Ca href=\"/blog/markdown-responsive-images-complete-guide\">responsive design patterns\u003C/a> to ensure that emphasized content remains visually effective across different devices and viewing contexts.\u003C/p>\n\u003Ch2 id=\"platform-integration-examples\">Platform Integration Examples\u003C/h2>\n\u003Ch3 id=\"jekyll-static-site-integration\">Jekyll Static Site Integration\u003C/h3>\n\u003Cp>Complete Jekyll integration for systematic text decoration:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-liquid\"><!-- _includes/text-decoration.html -->\n{% assign decoration_type = include.type | default: 'underline' %}\n{% assign decoration_color = include.color | default: 'primary' %}\n{% assign decoration_text = include.text %}\n\n{% case decoration_type %}\n  {% when 'underline' %}\n    <span class="decoration-underline decoration-{{ decoration_color }}">{{ decoration_text }}</span>\n  {% when 'dotted' %}\n    <span class="decoration-dotted decoration-{{ decoration_color }}">{{ decoration_text }}</span>\n  {% when 'wavy' %}\n    <span class="decoration-wavy decoration-{{ decoration_color }}">{{ decoration_text }}</span>\n  {% when 'highlight' %}\n    <mark class="decoration-highlight decoration-{{ decoration_color }}">{{ decoration_text }}</mark>\n  {% else %}\n    <span class="decoration-default">{{ decoration_text }}</span>\n{% endcase %}\n\n<!-- Usage in Markdown files -->\n{% include text-decoration.html type="underline" color="primary" text="Important underlined text" %}\n{% include text-decoration.html type="wavy" color="warning" text="Attention-grabbing wavy text" %}\n{% include text-decoration.html type="highlight" text="Highlighted key information" %}\n\u003C/code>\u003C/pre>\u003Ch3 id=\"hugo-shortcode-implementation\">Hugo Shortcode Implementation\u003C/h3>\n\u003Cp>Hugo shortcodes for flexible text decoration:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-go-html-template\"><!-- layouts/shortcodes/decorate.html -->\n{{ $type := .Get "type" | default "underline" }}\n{{ $color := .Get "color" | default "primary" }}\n{{ $style := .Get "style" | default "solid" }}\n{{ $thickness := .Get "thickness" | default "2px" }}\n\n{{ $css_properties := printf "text-decoration: %s %s; text-decoration-thickness: %s;" $type $style $thickness }}\n\n{{ if eq $color "primary" }}\n  {{ $css_properties = printf "%s text-decoration-color: #3b82f6;" $css_properties }}\n{{ else if eq $color "secondary" }}\n  {{ $css_properties = printf "%s text-decoration-color: #6b7280;" $css_properties }}\n{{ else if eq $color "success" }}\n  {{ $css_properties = printf "%s text-decoration-color: #10b981;" $css_properties }}\n{{ else if eq $color "warning" }}\n  {{ $css_properties = printf "%s text-decoration-color: #f59e0b;" $css_properties }}\n{{ else if eq $color "danger" }}\n  {{ $css_properties = printf "%s text-decoration-color: #ef4444;" $css_properties }}\n{{ else }}\n  {{ $css_properties = printf "%s text-decoration-color: %s;" $css_properties $color }}\n{{ end }}\n\n<span style="{{ $css_properties | safeCSS }}" class="hugo-decoration decoration-{{ $type }} decoration-{{ $color }}">\n  {{ .Inner | markdownify }}\n</span>\n\n<!-- Usage examples -->\n{{< decorate type="underline" color="primary" >}}Primary underlined content{{< /decorate >}}\n{{< decorate type="underline" color="warning" style="wavy" >}}Warning wavy underline{{< /decorate >}}\n{{< decorate type="overline" color="#9333ea" thickness="3px" >}}Custom purple overline{{< /decorate >}}\n\u003C/code>\u003C/pre>\u003Ch2 id=\"performance-and-optimization\">Performance and Optimization\u003C/h2>\n\u003Ch3 id=\"css-performance-best-practices\">CSS Performance Best Practices\u003C/h3>\n\u003Cp>Optimized CSS delivery for text decoration systems:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-css\">\u003Cspan class=\"hljs-comment\">/* Critical decoration CSS - inline in head */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.critical-underline\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">text-decoration\u003C/span>: underline;\n  \u003Cspan class=\"hljs-attribute\">text-decoration-color\u003C/span>: \u003Cspan class=\"hljs-number\">#3b82f6\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">text-decoration\u003C/span>-thickness: \u003Cspan class=\"hljs-number\">2px\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.critical-emphasis\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">600\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">text-decoration\u003C/span>: underline;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Non-critical decorations - load asynchronously */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> screen {\n  \u003Cspan class=\"hljs-selector-class\">.enhanced-decorations\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">text-rendering\u003C/span>: optimizeLegibility;\n  }\n  \n  \u003Cspan class=\"hljs-selector-class\">.fancy-underline\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">text-decoration\u003C/span>: underline;\n    \u003Cspan class=\"hljs-attribute\">text-decoration-style\u003C/span>: wavy;\n    \u003Cspan class=\"hljs-attribute\">text-decoration-color\u003C/span>: \u003Cspan class=\"hljs-number\">#f59e0b\u003C/span>;\n    text-underline-offset: \u003Cspan class=\"hljs-number\">3px\u003C/span>;\n  }\n  \n  \u003Cspan class=\"hljs-selector-class\">.animated-decoration\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">transition\u003C/span>: text-decoration-color \u003Cspan class=\"hljs-number\">0.3s\u003C/span> ease;\n  }\n}\n\n\u003Cspan class=\"hljs-comment\">/* Print-specific optimizations */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> print {\n  \u003Cspan class=\"hljs-selector-class\">.animated-decoration\u003C/span>,\n  \u003Cspan class=\"hljs-selector-class\">.interactive-decoration\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">text-decoration\u003C/span>: underline;\n    \u003Cspan class=\"hljs-attribute\">text-decoration-color\u003C/span>: black;\n    \u003Cspan class=\"hljs-attribute\">animation\u003C/span>: none;\n    \u003Cspan class=\"hljs-attribute\">transition\u003C/span>: none;\n  }\n}\n\u003C/code>\u003C/pre>\u003Ch3 id=\"browser-compatibility-strategies\">Browser Compatibility Strategies\u003C/h3>\n\u003Cp>Cross-browser text decoration with fallbacks:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-css\">\u003Cspan class=\"hljs-comment\">/* Progressive enhancement for text decoration */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.progressive-underline\u003C/span> {\n  \u003Cspan class=\"hljs-comment\">/* Fallback for older browsers */\u003C/span>\n  \u003Cspan class=\"hljs-attribute\">text-decoration\u003C/span>: underline;\n  \n  \u003Cspan class=\"hljs-comment\">/* Modern browsers with full control */\u003C/span>\n  \u003Cspan class=\"hljs-attribute\">text-decoration\u003C/span>: underline;\n  \u003Cspan class=\"hljs-attribute\">text-decoration-color\u003C/span>: \u003Cspan class=\"hljs-number\">#3b82f6\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">text-decoration\u003C/span>-thickness: \u003Cspan class=\"hljs-number\">2px\u003C/span>;\n  text-underline-offset: \u003Cspan class=\"hljs-number\">2px\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Feature detection fallbacks */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@supports\u003C/span> \u003Cspan class=\"hljs-keyword\">not\u003C/span> (\u003Cspan class=\"hljs-attribute\">text-decoration-thickness\u003C/span>: \u003Cspan class=\"hljs-number\">2px\u003C/span>) {\n  \u003Cspan class=\"hljs-selector-class\">.progressive-underline\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">border-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">2px\u003C/span> solid \u003Cspan class=\"hljs-number\">#3b82f6\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">text-decoration\u003C/span>: none;\n    \u003Cspan class=\"hljs-attribute\">padding-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span>;\n  }\n}\n\n\u003Cspan class=\"hljs-keyword\">@supports\u003C/span> \u003Cspan class=\"hljs-keyword\">not\u003C/span> (\u003Cspan class=\"hljs-attribute\">text-underline-offset\u003C/span>: \u003Cspan class=\"hljs-number\">2px\u003C/span>) {\n  \u003Cspan class=\"hljs-selector-class\">.progressive-underline\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">position\u003C/span>: relative;\n  }\n  \n  \u003Cspan class=\"hljs-selector-class\">.progressive-underline\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">::after\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">content\u003C/span>: \u003Cspan class=\"hljs-string\">''\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">position\u003C/span>: absolute;\n    \u003Cspan class=\"hljs-attribute\">bottom\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">left\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">100%\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">height\u003C/span>: \u003Cspan class=\"hljs-number\">2px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#3b82f6\u003C/span>;\n  }\n}\n\n\u003Cspan class=\"hljs-comment\">/* IE11 fallback */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> screen \u003Cspan class=\"hljs-keyword\">and\u003C/span> (\u003Cspan class=\"hljs-attribute\">-ms-high-contrast\u003C/span>: active), (\u003Cspan class=\"hljs-attribute\">-ms-high-contrast\u003C/span>: none) {\n  \u003Cspan class=\"hljs-selector-class\">.progressive-underline\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">text-decoration\u003C/span>: underline;\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#3b82f6\u003C/span>;\n  }\n}\n\u003C/code>\u003C/pre>\u003Ch2 id=\"troubleshooting-common-issues\">Troubleshooting Common Issues\u003C/h2>\n\u003Ch3 id=\"text-decoration-inheritance-problems\">Text Decoration Inheritance Problems\u003C/h3>\n\u003Cp>\u003Cstrong>Problem\u003C/strong>: Inconsistent decoration behavior across nested elements\u003C/p>\n\u003Cp>\u003Cstrong>Solutions\u003C/strong>:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-css\">\u003Cspan class=\"hljs-comment\">/* Reset decoration inheritance */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.decoration-container\u003C/span> * {\n  \u003Cspan class=\"hljs-attribute\">text-decoration\u003C/span>: inherit;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Explicit decoration control */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.no-decoration\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">text-decoration\u003C/span>: none \u003Cspan class=\"hljs-meta\">!important\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.force-decoration\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">text-decoration\u003C/span>: underline \u003Cspan class=\"hljs-meta\">!important\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">text-decoration-color\u003C/span>: currentColor \u003Cspan class=\"hljs-meta\">!important\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Nested element handling */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.decorated-content\u003C/span> \u003Cspan class=\"hljs-selector-tag\">a\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">text-decoration\u003C/span>: none;\n  \u003Cspan class=\"hljs-attribute\">border-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid currentColor;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.decorated-content\u003C/span> \u003Cspan class=\"hljs-selector-tag\">code\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">text-decoration\u003C/span>: none;\n  \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#f1f3f4\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">0.2em\u003C/span> \u003Cspan class=\"hljs-number\">0.4em\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">3px\u003C/span>;\n}\n\u003C/code>\u003C/pre>\u003Ch3 id=\"cross-platform-rendering-inconsistencies\">Cross-Platform Rendering Inconsistencies\u003C/h3>\n\u003Cp>\u003Cstrong>Problem\u003C/strong>: Text decoration appears differently across operating systems\u003C/p>\n\u003Cp>\u003Cstrong>Solutions\u003C/strong>:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-css\">\u003Cspan class=\"hljs-comment\">/* Normalize decoration rendering */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.consistent-decoration\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">text-decoration\u003C/span>: underline;\n  \u003Cspan class=\"hljs-attribute\">text-decoration\u003C/span>-thickness: \u003Cspan class=\"hljs-number\">1px\u003C/span>; \u003Cspan class=\"hljs-comment\">/* Consistent thickness */\u003C/span>\n  \u003Cspan class=\"hljs-attribute\">text-decoration-color\u003C/span>: \u003Cspan class=\"hljs-number\">#333\u003C/span>; \u003Cspan class=\"hljs-comment\">/* Explicit color */\u003C/span>\n  text-underline-offset: \u003Cspan class=\"hljs-number\">0.1em\u003C/span>; \u003Cspan class=\"hljs-comment\">/* Relative offset */\u003C/span>\n}\n\n\u003Cspan class=\"hljs-comment\">/* Platform-specific adjustments */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> screen \u003Cspan class=\"hljs-keyword\">and\u003C/span> (\u003Cspan class=\"hljs-attribute\">-webkit-min-device-pixel-ratio\u003C/span>: \u003Cspan class=\"hljs-number\">2\u003C/span>) {\n  \u003Cspan class=\"hljs-comment\">/* High DPI screens */\u003C/span>\n  \u003Cspan class=\"hljs-selector-class\">.consistent-decoration\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">text-decoration\u003C/span>-thickness: \u003Cspan class=\"hljs-number\">0.5px\u003C/span>;\n  }\n}\n\n\u003Cspan class=\"hljs-comment\">/* Font rendering optimization */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.optimized-decoration\u003C/span> {\n  -webkit-\u003Cspan class=\"hljs-attribute\">font-smoothing\u003C/span>: antialiased;\n  -moz-osx-\u003Cspan class=\"hljs-attribute\">font-smoothing\u003C/span>: grayscale;\n  \u003Cspan class=\"hljs-attribute\">text-rendering\u003C/span>: optimizeLegibility;\n}\n\u003C/code>\u003C/pre>\u003Ch2 id=\"advanced-use-cases-and-examples\">Advanced Use Cases and Examples\u003C/h2>\n\u003Ch3 id=\"documentation-system-integration\">Documentation System Integration\u003C/h3>\n\u003Cp>Complete implementation for technical documentation:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">\u003Cspan class=\"hljs-section\">## Technical Documentation with Enhanced Text Decoration\u003C/span>\n\nThis documentation demonstrates advanced \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">u\u003C/span>>\u003C/span>\u003C/span>text decoration techniques\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">u\u003C/span>>\u003C/span>\u003C/span> for \ncreating professional technical content with \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"emphasis-underline"\u003C/span>>\u003C/span>\u003C/span>enhanced \nvisual hierarchy\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">span\u003C/span>>\u003C/span>\u003C/span> and improved readability.\n\n\u003Cspan class=\"hljs-section\">### API Reference Example\u003C/span>\n\nThe \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"technical-term"\u003C/span>>\u003C/span>\u003C/span>authenticate()\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">span\u003C/span>>\u003C/span>\u003C/span> method requires a valid \n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"code-emphasis"\u003C/span>>\u003C/span>\u003C/span>\u003Cspan class=\"hljs-code\">`api_key`\u003C/span>\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">span\u003C/span>>\u003C/span>\u003C/span> parameter. If authentication fails, \nthe method returns an \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"error-decoration"\u003C/span>>\u003C/span>\u003C/span>error response\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">span\u003C/span>>\u003C/span>\u003C/span> with \nstatus code 401.\n\n\u003Cspan class=\"hljs-strong\">**Important Note**\u003C/span>: \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"warning-underline"\u003C/span>>\u003C/span>\u003C/span>Never expose API keys in \nclient-side code\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">span\u003C/span>>\u003C/span>\u003C/span> or commit them to version control repositories.\n\n\u003Cspan class=\"hljs-section\">### Code Integration Example\u003C/span>\n\nWhen implementing user authentication:\n\n\u003Cspan class=\"hljs-code\">```python\ndef authenticate_user(api_key):\n    """\n    Authenticate user with API key.\n    \n    Args:\n        api_key (str): User's API key for authentication\n        \n    Returns:\n        dict: Authentication result with user information\n        \n    Raises:\n        AuthenticationError: When API key is invalid or expired\n    """\n    if not validate_api_key(api_key):\n        raise AuthenticationError("Invalid API key provided")\n    \n    return get_user_info(api_key)\u003C/span>\n\u003C/code>\u003C/pre>\u003Cp>The \u003Cspan class=\"function-name\">\u003Ccode>validate_api_key()\u003C/code>\u003C/span> function performs\u003Cbr>\u003Cspan class=\"emphasis-dotted\">security validation\u003C/span> to ensure the provided\u003Cbr>key is both \u003Cspan class=\"highlight-underline\">valid and not expired\u003C/span>.\u003C/p>\n\u003Cstyle>\n.technical-term {\n  text-decoration: underline dotted;\n  text-decoration-color: #6b7280;\n  text-decoration-thickness: 1px;\n  font-family: monospace;\n  background: #f8f9fa;\n  padding: 0 4px;\n  border-radius: 2px;\n}\n\n.emphasis-underline {\n  text-decoration: underline;\n  text-decoration-color: #3b82f6;\n  text-decoration-thickness: 2px;\n  font-weight: 600;\n}\n\n.code-emphasis {\n  text-decoration: underline;\n  text-decoration-color: #10b981;\n  text-decoration-thickness: 1px;\n  background: #1f2937;\n  color: #f9fafb;\n  padding: 2px 6px;\n  border-radius: 4px;\n}\n\n.error-decoration {\n  text-decoration: underline wavy;\n  text-decoration-color: #ef4444;\n  text-decoration-thickness: 2px;\n}\n\n.warning-underline {\n  text-decoration: underline double;\n  text-decoration-color: #f59e0b;\n  text-decoration-thickness: 2px;\n  font-weight: 500;\n  background: #fef3c7;\n  padding: 2px 4px;\n  border-radius: 3px;\n}\n\n.emphasis-dotted {\n  text-decoration: underline dotted;\n  text-decoration-color: #8b5cf6;\n  text-decoration-thickness: 1.5px;\n  font-style: italic;\n}\n\n.highlight-underline {\n  text-decoration: underline;\n  text-decoration-color: #10b981;\n  text-decoration-thickness: 2px;\n  background: linear-gradient(180deg, transparent 60%, #d1fae5 60%);\n  padding: 0 2px;\n}\n\n.function-name {\n  text-decoration: underline;\n  text-decoration-color: #3b82f6;\n  text-decoration-thickness: 1px;\n  font-family: 'SF Mono', monospace;\n  font-weight: 500;\n  background: #eff6ff;\n  padding: 1px 4px;\n  border-radius: 2px;\n}\n\u003C/style>\n\u003Cp>```\u003C/p>\n\u003Ch2 id=\"conclusion\">Conclusion\u003C/h2>\n\u003Cp>Text decoration and underlining in Markdown transforms basic documentation into visually rich, professionally styled content that guides readers effectively while maintaining accessibility and cross-platform compatibility. Through strategic use of HTML integration, CSS styling, and platform-specific features, content creators can develop sophisticated visual hierarchies that enhance both comprehension and user experience.\u003C/p>\n\u003Cp>The key to successful text decoration implementation lies in balancing visual appeal with functionality, ensuring that decorative elements serve semantic purposes and improve rather than distract from content consumption. Whether you're creating technical documentation, user guides, or comprehensive reference materials, the techniques covered in this guide provide the foundation for professional text styling that engages readers and communicates information effectively.\u003C/p>\n\u003Cp>Remember to prioritize accessibility, test across different platforms and devices, and maintain consistency in your decoration patterns. With thoughtful implementation of text decoration techniques, your Markdown content becomes not just informative, but visually compelling and professionally presented, encouraging deeper engagement with your documentation and improving overall user satisfaction.\u003C/p>\n",[15,19,22,25,28,31,34,37,40,43,46,49,52],{"id":16,"text":17,"level":18},"why-use-text-decoration-in-markdown","Why Use Text Decoration in Markdown?",2,{"id":20,"text":21,"level":18},"standard-markdown-text-formatting","Standard Markdown Text Formatting",{"id":23,"text":24,"level":18},"html-based-underlining-solutions","HTML-Based Underlining Solutions",{"id":26,"text":27,"level":18},"platform-specific-implementation","Platform-Specific Implementation",{"id":29,"text":30,"level":18},"css-integration-techniques","CSS Integration Techniques",{"id":32,"text":33,"level":18},"advanced-decoration-techniques","Advanced Decoration Techniques",{"id":35,"text":36,"level":18},"semantic-and-accessibility-considerations","Semantic and Accessibility Considerations",{"id":38,"text":39,"level":18},"integration-with-modern-markdown-workflows","Integration with Modern Markdown Workflows",{"id":41,"text":42,"level":18},"platform-integration-examples","Platform Integration Examples",{"id":44,"text":45,"level":18},"performance-and-optimization","Performance and Optimization",{"id":47,"text":48,"level":18},"troubleshooting-common-issues","Troubleshooting Common Issues",{"id":50,"text":51,"level":18},"advanced-use-cases-and-examples","Advanced Use Cases and Examples",{"id":53,"text":54,"level":18},"conclusion","Conclusion",[],[57,64,72],{"slug":58,"title":59,"description":60,"excerpt":61,"date":62,"category":9,"author":10,"keywords":63,"readingMinutes":12},"markdown-text-styling-formatting-complete-guide","Markdown Text Styling and Formatting: Complete Guide for Professional Typography and Visual Hierarchy","Master advanced text styling and formatting techniques in Markdown for professional typography, visual hierarchy, and enhanced readability. Learn CSS integration, platform-specific implementations, and accessibility best practices.","Advanced text styling and formatting in Markdown transforms basic content into professionally designed documents with sophisticated typography, visual hierarchy, and enhanced readability that…","2025-09-17","markdown text styling, markdown formatting, text typography markdown, markdown font styles, professional markdown formatting, text decoration markdown, markdown visual hierarchy, advanced text formatting",{"slug":65,"title":66,"description":67,"excerpt":68,"date":69,"category":9,"author":10,"keywords":70,"readingMinutes":71},"markdown-line-spacing-paragraph-formatting-complete-guide","Markdown Line Spacing and Paragraph Formatting: Complete Guide to Text Layout and Visual Spacing","Master Markdown line spacing, paragraph formatting, and text layout techniques. Learn to control spacing, create visual breaks, and format paragraphs for professional documentation and content.","Effective line spacing and paragraph formatting in Markdown enables precise control over text layout and visual presentation, creating professional documentation that guides reader attention and…","2026-01-04","markdown line spacing, paragraph formatting markdown, markdown text layout, markdown spacing control, paragraph breaks markdown, markdown visual spacing, text formatting markdown",10,{"slug":73,"title":74,"description":75,"excerpt":76,"date":77,"category":9,"author":10,"keywords":78,"readingMinutes":71},"markdown-text-decoration-combinations-complete-guide","Markdown Text Decoration Combinations: Complete Guide for Advanced Formatting and Cross-Platform Styling","Master advanced Markdown text decoration combinations including strikethrough, underline, and mixed formatting techniques. Learn platform-specific implementations, accessibility considerations, and best practices for complex text styling.","Advanced Markdown text decoration combinations enable sophisticated document formatting that goes beyond basic emphasis, allowing technical writers and content creators to develop nuanced visual…","2025-11-27","markdown text decoration, markdown strikethrough combinations, advanced markdown formatting, markdown text styling, cross-platform markdown, markdown accessibility formatting, text decoration markdown",1792184946528]