Prism Highlighter
A visually stunning, high-performance multi-color text highlighter extension for VS Code and Antigravity IDEs. Select any phrase or word, choose a harmonized pastel/vibrant color from a glassmorphic palette, and highlight all occurrences instantly across your document.
Features
- 🌈 High-Harmony Color Palette: Built-in set of 8 premium, semi-transparent HSL colors designed for high contrast and readability on both dark and light editor themes.
- ✨ Active Highlights Dashboard: Displays a live, scrollable list of highlighted words, complete with a color badge and click-to-delete support.
- 💾 Workspace State Persistence: Check the "Save to Workspace" toggle to preserve your highlights. When enabled, your highlights are automatically restored when you reopen the file or IDE.
- ⚡ Real-time Dynamic Syncing: Highlights are automatically updated and recalculated in real-time as you edit files or switch active tabs (throttled for zero UI lag).
- 🎨 Scrollbar Overview Ruler Integration: Matches highlights to matching color notches on the editor's scroll bar for fast navigation.
- 🧹 Single or Global Clearing: Clear individual highlight styles from the Webview dashboard, or clear everything at once via a simple command/keybinding.
Keybindings
| Action |
Command |
Windows/Linux |
macOS |
Context Menu |
| Open Highlight Palette |
texthighlighter.showPalette |
Ctrl + Alt + H |
Cmd + Ctrl + H |
Highlight Selected Text... |
| Clear All Highlights |
texthighlighter.clearAll |
Ctrl + Alt + C |
Cmd + Ctrl + C |
Clear All Highlights |
Premium Color Palette Tokens
The extension uses a semi-transparent background color combined with a solid matching border to highlight occurrences without obscuring the source code:
- 🔴 Coral Red:
hsla(350, 85%, 65%, 0.35)
- 🟠 Sunset Orange:
hsla(25, 95%, 60%, 0.35)
- 🟡 Amber Gold:
hsla(45, 95%, 50%, 0.35)
- 🟢 Mint Emerald:
hsla(150, 70%, 48%, 0.35)
- 🔵 Ocean Cyan:
hsla(190, 85%, 48%, 0.35)
- 🐳 Sky Indigo:
hsla(220, 85%, 60%, 0.35)
- 🟣 Royal Violet:
hsla(270, 75%, 65%, 0.35)
- 🌸 Blossom Pink:
hsla(325, 80%, 65%, 0.35)
Getting Started / Development
Prerequisites
Run & Debug
- Open this project directory in VS Code or Antigravity IDE.
- Run
npm install to install dependencies.
- Press F5 (or navigate to the Debug pane and click Run Extension).
- A new "Extension Development Host" window will open.
- Open any file in the new window, highlight a word, right-click, and select Highlight Selected Text... to test!
| |
