CodeCues: Highlighter & Annotations

A VS Code extension that allows you to highlight text with random colors and add memo annotations in any programming language. Perfect for code review, debugging, and keeping contextual notes without modifying source files.

Features

• Text Highlighting: Select any text and highlight it with a random color from your customizable palette
• Memo Annotations: Add personal notes to highlighted text via hover popup
• Cross-Language Support: Works with any programming language or file type
• Session Storage: Annotations persist during your VS Code session (use Save/Load commands for permanent storage)
• Flexible Display: View annotations in a sidecar panel (recommended) or at the bottom of files
• Quick Navigation: Jump to highlights from the tree view in the Explorer sidebar
• Focus Mode: Dim non-highlighted code to focus on specific sections

Quick Start

Highlighting Text

1. Select any text in your code editor
2. Right-click and choose "CodeCues: Highlight Text"
3. The selected text will be highlighted with a random color

Adding Annotations

1. Hover over any highlighted text
2. Click "Edit Annotation" in the hover popup
3. Type your memo/note in the input box
4. Press Enter to save

Viewing All Annotations

1. Open the Command Palette (Ctrl+Shift+P / Cmd+Shift+P)
2. Type "CodeCues: Show Annotations"
3. Choose your preferred display method:
   • Sidecar (recommended): Annotations appear in a separate panel beside the editor
   • Bottom: Annotations appear as comments at the bottom of the file

Managing Highlights

• View all highlights: Open the "CodeCues Highlights" tree view in the Explorer sidebar
• Jump to highlight: Click any highlight in the tree view to navigate to it
• Remove highlight: Right-click a highlight in the tree view and select "Remove Highlight"
• Focus mode: Select text and use "CodeCues: Focus Block" to dim everything else

Configuration

Customize CodeCues behavior in VS Code settings (File > Preferences > Settings or Code > Settings > Settings):

Storage Location

Choose where annotations are stored:

• sidecar (recommended): Annotations stored in a separate panel, keeping source files clean
• bottom: Annotations appended as comments at the bottom of files

Note: Sidecar storage is recommended as it keeps your source files clean and avoids potential compilation, linting, or CI/CD issues.

Highlight Colors

Customize the color palette used for highlights:

{
    "codecues.storageLocation": "sidecar",
    "codecues.highlightColors": [
        "#FF6B6B",
        "#4ECDC4",
        "#45B7D1",
        "#96CEB4",
        "#FFEAA7",
        "#DDA0DD",
        "#98D8C8",
        "#F7DC6F",
        "#BB8FCE",
        "#85C1E9"
    ]
}

Available Commands

Access these commands via the Command Palette (Ctrl+Shift+P / Cmd+Shift+P):

• CodeCues: Highlight Text - Highlight selected text with a random color
• CodeCues: Remove Highlight - Remove highlight at cursor position
• CodeCues: Focus Block - Dim non-selected code to focus on current selection
• CodeCues: Clear Focus - Clear focus mode and restore normal view
• CodeCues: Show Annotations - Display all annotations for the current file
• CodeCues: Save to File... - Export annotations to a JSON file
• CodeCues: Load from File... - Import annotations from a JSON file
• Jump to Highlight - Navigate to a specific highlight (from tree view context menu)

Use Cases

• Code Review: Highlight sections that need attention and add review notes
• Debugging: Mark problematic code areas with annotations explaining issues
• Learning: Annotate complex code with explanations and references
• Collaboration: Leave notes for team members without modifying source files
• Documentation: Create contextual notes for code sections (export/import for sharing)

License

MIT License - feel free to modify and distribute as needed.