Code Scope Highlighter - A Highlighter Extension for Better Readability

A customizable scope highlighter, inspired by Dr Racket IDE.

Code Scope Highlighter extension highlights the scope of matching brackets with customizable colors and flexible highlight modes. Supports code block highlighting for any language.

✨ Features

• Universal highlighting: ScopeHighlighter works on any language!
• Dynamic Highlighting: Instantly see the scope of matching brackets with vibrant colors.
• HTML Tag Support: Highlight nested HTML tags with intelligent cursor positioning:
  • Place cursor on < of start tag to highlight: start tag + content + end tag
  • Place cursor on > of any tag to highlight: content inside the tag
• Customizable Colors: Personalize your highlight colors for brackets, braces, and parentheses.
• Flexible Modes: Choose from "near", "always", or "never" highlight modes to suit your coding style.
• Indentation-based scope: For languages like Python and Ruby, fall back to indentation-based scope highlighting when no bracket pairs are detected.

🌟 Why ScopeHighlighter?

• Boost Productivity: Quickly understand the structure of your code, making it easier to debug and develop.
• Enhanced Readability: No more squinting at matching brackets; ScopeHighlighter makes it clear and straightforward.
• Seamless Integration: Works effortlessly and fast within the VS Code ecosystem, either on desktop or the browser, thanks to the bundler esbuild.

⚙️ Extension Settings

The following settings are configured for the scope-highlighter extension:

codeScopeHighlighter.matchBrackets - Match Brackets

For color picker: https://vuetifyjs.com/en/components/color-pickers/

• Default: near
• Description: Choose when the scope highlight should be active:
  • near for when the cursor is near the bracket,
  • always to always highlight,
  • never to never highlight.

codeScopeHighlighter.scopeColor - Scope Color

• Default: #4d4d4d30
• Description: Color for highlighting the entire scope of matching brackets. (Hex format)

codeScopeHighlighter.bracketColor - Bracket Color

• Default: #4d4d4d30
• Description: Color for highlighting the matching brackets. (Hex format)

codeScopeHighlighter.allowHighlightIndentation - Allow Indentation Scope Highlighting

• Default: false
• Description: When enabled, fall back to indentation-based scope highlighting when no bracket pairs are detected. Useful for languages like Python and Ruby that use indentation for blocks.

codeScopeHighlighter.highlightIndentationLangIds - Languages for Indentation Highlighting

• Default: ["python", "ruby"]
• Description: Language IDs for which indentation scope highlighting is enabled when allowHighlightIndentation is on. Use VS Code language identifiers (e.g. python, ruby, yaml).

🗺️ Roadmap

• Bracket Specific Settings: Implement highlighting for specific matching bracket symbols.
• Language Specific Settings: Implement highlighting for specific programming languages (Python, Ruby).
• HTML support: Implement highlighting for nested html tags.

📄 License

This project is licensed under the MIT - see the MIT file for details.

For Devs

• Run npm watch
• Start Debugging right away with F5 or Command Pallete Debug: Start Debugging