Advanced HTML Element Highlighter

🚀 Transform your HTML development experience with professional neon highlighting!

A powerful VS Code extension that brings your HTML code to life with customizable neon colors, smart glow effects, hierarchy visualization, and intelligent semantic coloring. Perfect for developers who want to quickly identify HTML structure and navigate complex nested elements.

✨ Key Features

🎨 Unlimited Dynamic Neon Colors

Infinite Color Generation: No more repetitive colors - every HTML element gets a unique neon color
Smart Contrast Algorithm: Nearby elements automatically get contrasting colors for maximum visibility
Professional Neon Effects: Authentic glow effects that make your code look like a cyberpunk masterpiece

🌈 Dual Color Modes

Rainbow Mode: Dynamic unlimited neon colors with intelligent contrast
Semantic Mode: Predefined colors for HTML5 semantic elements (header, nav, main, section, etc.)
One-Click Toggle: Switch between modes instantly with Ctrl+Alt+D

⚡ Customizable Glow Intensity

5 Intensity Levels: None, Low, Medium, High, Extreme
3 Glow Styles: Soft, Sharp, Pulsing effects
Live Preview: See changes instantly as you adjust settings
Quick Cycling: Use Ctrl+Alt+G to cycle through intensities

🎯 Multi-Element Support

Supports all major HTML elements:

Block Elements: div, section, article, main, aside
Semantic Elements: header, nav, footer
Inline Elements: span and more
Fully Configurable: Enable/disable any element type

📊 Intelligent Hierarchy Visualization

Nesting Level Detection: Automatically detects element depth
Visual Depth Indicators: Deeper nested elements get adjusted brightness
Hover Information: Shows nesting level and element details
Structure Clarity: Instantly understand your HTML hierarchy

🔧 Professional Developer Tools

Real-time Statistics: Live element count in status bar
Performance Optimized: Handles files with 10,000+ elements smoothly
Export Color Schemes: Save your color configurations as JSON
Tag Navigation: Jump between matching opening/closing tags

🎮 Commands & Shortcuts

Command	Shortcut	Description
Toggle Highlighting	`Ctrl+Alt+D` (`Cmd+Alt+D` on Mac)	Enable/disable highlighting
Cycle Glow Intensity	`Ctrl+Alt+G` (`Cmd+Alt+G` on Mac)	Switch between glow levels
Navigate to Match	`Ctrl+Alt+M` (`Cmd+Alt+M` on Mac)	Jump to matching tag
Show Statistics	Command Palette	Display element count breakdown
Regenerate Colors	Command Palette	Generate new color scheme
Export Colors	Command Palette	Save current colors to file
Toggle Color Mode	Command Palette	Switch Rainbow ↔ Semantic mode

⚙️ Configuration

🎛️ Basic Settings

{
  "htmlHighlighter.enabled": true,
  "htmlHighlighter.glowIntensity": "medium",
  "htmlHighlighter.glowStyle": "soft",
  "htmlHighlighter.colorMode": "rainbow"
}

🔧 Advanced Configuration

{
  "htmlHighlighter.enabledElements": [
    "div", "span", "section", "article", 
    "nav", "header", "footer", "main", "aside"
  ],
  "htmlHighlighter.showNestingLines": false,
  "htmlHighlighter.hierarchyIntensity": true,
  "htmlHighlighter.themeAdaptation": true,
  "htmlHighlighter.performanceMode": false,
  "htmlHighlighter.showStatusBar": true
}

🎨 Semantic Color Customization

{
  "htmlHighlighter.semanticColors": {
    "header": "#FF6B9D",     // Hot Pink
    "nav": "#4ECDC4",        // Turquoise  
    "main": "#45B7D1",       // Blue
    "section": "#96CEB4",    // Mint Green
    "article": "#FECA57",    // Golden Yellow
    "aside": "#FF9FF3",      // Light Purple
    "footer": "#54A0FF",     // Sky Blue
    "div": "auto",           // Auto-generated
    "span": "auto"           // Auto-generated
  }
}

🎨 Visual Examples

🌈 Rainbow Mode (Dynamic Colors)

<div class="app">                 <!-- Electric Blue #0080FF + glow -->
    <header class="navigation">   <!-- Hot Pink #FF0080 + glow -->
        <nav class="menu">        <!-- Lime Green #80FF00 + glow -->
            <span>Home</span>     <!-- Orange #FF8000 + glow -->
        </nav>                    <!-- Same Lime Green -->
    </header>                     <!-- Same Hot Pink -->
    <main class="content">        <!-- Purple #8000FF + glow -->
        <section class="posts">   <!-- Cyan #00FFFF + glow -->
            <article>             <!-- Yellow #FFFF00 + glow -->
            </article>            <!-- Same Yellow -->
        </section>                <!-- Same Cyan -->
    </main>                       <!-- Same Purple -->
    <footer>                      <!-- Magenta #FF00FF + glow -->
    </footer>                     <!-- Same Magenta -->
</div>                            <!-- Same Electric Blue -->

🏷️ Semantic Mode (Consistent Colors)

<div class="app">                 <!-- Auto-generated unique color -->
    <header>                      <!-- #FF6B9D (Hot Pink) -->
        <nav>                     <!-- #4ECDC4 (Turquoise) -->
            <span>Logo</span>     <!-- Auto-generated unique color -->
        </nav>                    <!-- #4ECDC4 (Turquoise) -->
    </header>                     <!-- #FF6B9D (Hot Pink) -->
    <main>                        <!-- #45B7D1 (Blue) -->
        <section>                 <!-- #96CEB4 (Mint Green) -->
            <article>             <!-- #FECA57 (Golden Yellow) -->
            </article>            <!-- #FECA57 (Golden Yellow) -->
        </section>                <!-- #96CEB4 (Mint Green) -->
        <aside>                   <!-- #FF9FF3 (Light Purple) -->
        </aside>                  <!-- #FF9FF3 (Light Purple) -->
    </main>                       <!-- #45B7D1 (Blue) -->
    <footer>                      <!-- #54A0FF (Sky Blue) -->
    </footer>                     <!-- #54A0FF (Sky Blue) -->
</div>                            <!-- Same auto-generated color -->

💡 Glow Intensity Examples

None: <div> - Clean colors without glow effects
Low: <div> - Subtle text-shadow: 0 0 4px color
Medium: <div> - Balanced text-shadow: 0 0 8px color, 0 0 12px color
High: <div> - Strong text-shadow: 0 0 8px color, 0 0 12px color, 0 0 16px color
Extreme: <div> - Maximum text-shadow: 0 0 8px color, 0 0 12px color, 0 0 16px color, 0 0 20px color

🚀 Quick Start Guide

1. Installation

Open VS Code
Go to Extensions (Ctrl+Shift+X)
Search "Advanced HTML Element Highlighter"
Click Install

2. First Use

Open any HTML file
Elements automatically highlight with neon colors
Use Ctrl+Alt+G to try different glow intensities
Check the status bar for element count

3. Customization

Open Settings (Ctrl+,)
Search "htmlHighlighter"
Adjust colors, glow effects, and enabled elements
Changes apply instantly!

📊 Performance & Compatibility

⚡ Performance Metrics

Startup Time: < 50ms
Update Latency: < 100ms with smart debouncing
Memory Usage: ~2MB for 1000+ elements
Large File Support: Optimized for 10,000+ elements
CPU Impact: Minimal during active coding

🔧 Compatibility

VS Code: 1.74.0 or higher
Languages: HTML, JSX, TSX, Vue, Svelte
Platforms: Windows, macOS, Linux
Themes: Works with all VS Code themes

🎯 Use Cases

👨‍💻 Frontend Developers

Component Identification: Quickly spot React/Vue components
Layout Debugging: Visualize container hierarchies
Code Reviews: Easier to navigate complex HTML structures

🎨 UI/UX Designers

Structure Visualization: See HTML semantic structure at a glance
Accessibility Audits: Identify proper semantic element usage
Design Implementation: Verify HTML matches design mockups

📚 Students & Educators

Learning HTML: Visual feedback for proper nesting
Code Examples: Make tutorial code more engaging
Debugging Practice: Easier to spot structural issues

🔧 Troubleshooting

Colors Not Showing?

✅ Check if extension is enabled (Ctrl+Alt+D)
✅ Verify file is detected as HTML
✅ Check enabledElements includes your element types

Performance Issues?

✅ Enable performanceMode for large files
✅ Reduce enabledElements list
✅ Lower glowIntensity to "low" or "none"

Theme Conflicts?

✅ Disable themeAdaptation if colors look wrong
✅ Switch to semantic mode for consistent colors
✅ Customize colors in semanticColors settings

🆕 What's New in Version 2.0

🎉 Major Features

✨ Multi-Element Support: Highlights 9 different HTML elements
🎨 Advanced Glow System: 5 intensity levels with 3 different styles
🌈 Semantic Color Mode: Intelligent coloring for HTML5 semantic elements
📊 Hierarchy Visualization: Visual indication of nesting levels
🔧 Professional Dev Tools: Statistics, navigation, and export features

🚀 Improvements

⚡ 3x Faster Performance: Optimized rendering and memory usage
🎮 Enhanced UX: Keyboard shortcuts and status bar integration
⚙️ 15+ Settings: Comprehensive customization options
📝 Professional Documentation: Complete guides and examples
🐛 Rock Solid: Better error handling and stability

🔬 Technical Upgrades

🏗️ Modern Architecture: Completely rewritten in TypeScript
🎯 Smart Algorithms: Advanced color contrast and element detection
🔧 Extensible Design: Easy to add new features and elements
📦 Marketplace Ready: Professional packaging and documentation

💝 Support & Feedback

🐛 Found a Bug?

Report issues on GitHub Issues

💡 Feature Request?

Share ideas on GitHub Discussions

⭐ Love the Extension?

Leave a ★★★★★ review on the marketplace
Star the GitHub repository
Share with fellow developers!

📧 Contact

Email: support@asapmatin.dev
GitHub: @asapmatin
Website: asapmatin.dev

📜 License

MIT License - Feel free to use, modify, and distribute!

🎮 Try It Now!

Transform your HTML development experience today! Install Advanced HTML Element Highlighter and see your code in a whole new light.

Made with ❤️ for the developer community

Keywords: HTML, CSS, JavaScript, TypeScript, React, Vue, Angular, Web Development, Syntax Highlighting, Code Visualization, Neon Colors, Developer Tools, VS Code Extension

Div Color Highlighter

asapmatin