Workspace Highlighter
A powerful highlighting extension for VS Code that helps developers visually track important text across their codebase.
Features •
Installation •
Usage •
Commands •
Keyboard Shortcuts •
Configuration
Overview
Workspace Highlighter is a developer-centric VS Code extension that enables you to highlight multiple words or patterns with distinct colors, manage highlighting scopes across files, and toggle between visual styles—all without leaving your keyboard.
Perfect for:
- Debugging: Track variable names, function calls, or error codes across multiple files
- Code Review: Highlight important sections, TODOs, or areas of concern
- Learning: Mark unfamiliar concepts or patterns while studying new codebases
- Refactoring: Keep track of code that needs attention
Features
🎨 Multi-Word Highlighting
Highlight multiple different words simultaneously with automatic color assignment:
- Smart Color Selection: Each new highlight receives a unique color from a palette of 20 distinct, high-visibility hues
- Theme Adaptation: Colors automatically adjust for both dark themes (neon/pastel) and light themes (deep/contrast)
- Instant Visual Feedback: See your highlights appear immediately across all relevant locations
📂 Dual Scope Control
Control where your highlights appear using the convenient Status Bar switcher:
- Single File Mode: Highlights only appear in the currently active editor
- All Open Files Mode: Highlights automatically propagate to all visible editors, including split panes and grid layouts
Easily toggle between modes with a single click on the Status Bar.
✨ Dual Visual Styles
Choose the highlighting style that best suits your workflow:
- Fill Style: Solid background color for quick visual scanning
- Box Style: 2px outline border with transparent background for better text readability
Switch styles anytime via the Status Bar to match your current task.
⚙️ Advanced Highlight Management
Use the Manage Highlights command to fine-tune your setup:
- In-Place Editing: Rename or modify highlighted patterns instantly
- Mode Cycling: Toggle between Plain Text, Whole Word (
\b), and Regex (.*) matching modes with a single click
- Color Picker: Manually reassign colors with a smart filter that hides already-used colors
- Real-time Updates: Changes are reflected immediately across all editors
💾 Profile System
Save and restore your highlighting setups with profiles:
- Save Profile: Export your current highlights to a named JSON file in
.vscode/highlights/
- Load Profile: Instantly restore a previous debugging or review context
- Delete Profile: Remove outdated profile files
- Version Control Friendly: Share profiles with your team by committing them to git
Installation
From VS Code Marketplace
- Open VS Code
- Press
Ctrl+Shift+X (Windows/Linux) or Cmd+Shift+X (Mac) to open the Extensions view
- Search for "Workspace Highlighter"
- Click Install
From VSIX File
- Download the
.vsix file from the releases page
- Open VS Code
- Press
Ctrl+Shift+P (Windows/Linux) or Cmd+Shift+P (Mac)
- Type "Extensions: Install from VSIX"
- Select the downloaded
.vsix file
Usage
Quick Start
- Select text you want to highlight
- Press
Ctrl+H (Windows/Linux) or Cmd+H (Mac)
- The text is now highlighted across your workspace!
To remove a highlight, select the same text and press the toggle keybinding again.
Status Bar Controls
Look for these indicators in the bottom-right of your VS Code window:
| Icon |
Control |
Description |
$(files) |
Scope Switcher |
Click to toggle between "Single File" and "All Open Files" |
$(paintcan) |
Style Switcher |
Click to toggle between "Fill" and "Box" styles |
Managing Highlights
To edit, recolor, or change matching modes for your highlights:
- Open Command Palette (
Ctrl+Shift+P / Cmd+Shift+P)
- Run "Highlight: Manage Current Highlights"
- In the management panel:
- Click a row to open the color picker
- Click the pencil icon (✏️) to edit the text pattern
- Click the mode icon (
[abc], [ab], or [.*]) to cycle through:
[abc] Text: Simple literal match[ab] Whole Word: Matches \bword\b only[.*] Regex: Treats text as a regular expression
Working with Profiles
Save your current highlights:
Command Palette → "Highlight: Save Profile"
→ Enter a name (e.g., "debug-session-1")
Load a saved profile:
Command Palette → "Highlight: Load Profile"
→ Select from available profiles
Delete a profile:
Command Palette → "Highlight: Delete Profile"
→ Select the profile to remove
Profiles are stored in .vscode/highlights/ within your workspace as JSON files.
Commands
All commands are accessible via the Command Palette (Ctrl+Shift+P / Cmd+Shift+P):
| Command |
Description |
| Highlight: Toggle Selection |
Add or remove highlighting for the selected text |
| Highlight: Manage Current Highlights |
Open the interactive highlight manager |
| Highlight: Clear All |
Remove all active highlights |
| Highlight: Toggle Scope (Single/All Open) |
Switch between file scopes |
| Highlight: Toggle Style (Box/Fill) |
Switch between visual styles |
| Highlight: Save Profile |
Save current highlights to a named profile |
| Highlight: Load Profile |
Restore highlights from a saved profile |
| Highlight: Delete Profile |
Remove a saved profile file |
Keyboard Shortcuts
The extension includes one default keybinding:
| Keybinding |
Command |
When |
Ctrl+H (Windows/Linux)
Cmd+H (Mac) |
Toggle Highlight |
Editor has focus |
Customizing Keybindings
To customize keybindings:
- Open File → Preferences → Keyboard Shortcuts (or
Ctrl+K Ctrl+S)
- Search for "workspaceHighlighter"
- Click the pencil icon next to any command
- Press your desired key combination
Example custom keybindings in keybindings.json:
[
{
"key": "ctrl+shift+h",
"command": "workspaceHighlighter.manageHighlights",
"when": "editorTextFocus"
},
{
"key": "ctrl+alt+h",
"command": "workspaceHighlighter.clearAll",
"when": "editorTextFocus"
}
]
Configuration
Currently, Workspace Highlighter works out-of-the-box with sensible defaults and doesn't require configuration. All settings are controlled through the UI (Status Bar and Commands).
Future Configuration Options
We're planning to add settings for:
- Custom color palettes
- Default highlight style
- Default scope mode
- Maximum number of highlights
- Case-sensitive matching
Storage & Privacy
Profile Storage
Profiles are saved as JSON files in:
<your-workspace>/.vscode/highlights/
This makes profiles:
- Workspace-specific: Each project has its own profiles
- Version control friendly: Commit profiles to share with your team
- Portable: Copy profiles between projects as needed
Runtime Behavior
- Highlights exist only in memory during your session
- They are not persisted unless explicitly saved to a profile
- No telemetry or usage data is collected
Troubleshooting
Highlights not appearing?
- Ensure you're in the correct scope mode (check Status Bar)
- Try toggling the style (Fill vs Box) to see if one renders better
- Check if the text is actually present in the file
Colors look wrong?
- Colors auto-adapt to your theme
- Try switching between light and dark themes
- If issues persist, try clearing and re-adding the highlight
Profile not loading?
- Ensure the profile file exists in
.vscode/highlights/
- Check that the JSON file is valid
- Try saving a new profile to verify the directory is writable
Contributing
Contributions are welcome! If you'd like to:
- Report a bug
- Suggest a feature
- Submit a pull request
Please visit our GitHub repository.
License
This extension is released under the MIT License.
Acknowledgments
Workspace Highlighter was created to solve real developer pain points around code navigation and debugging. Special thanks to the VS Code extension community for their excellent documentation and examples.
Made with ❤️ for developers who live in their editor
GitHub •
VS Code Marketplace •
Report Issue
