Code Mark Highlighter

Code Mark Highlighter helps developers mark important code with color, labels, and quick navigation inside VS Code. Highlights are stored by code content rather than line numbers, so they remain stable even after edits, rearrangement, or reopening files. Use the sidebar to filter, jump, edit tags, change colors, adjust opacity, and toggle highlight backgrounds. Compatible with VS Code on macOS, Windows, and Linux.

Features

🎨 Color Highlights

Select any code block → right-click → Code Mark: Highlight Code → choose a color and optional tag.
Highlights appear with a colored background and a matching marker on the overview ruler (scrollbar). Set codemark.highlightOpacity to adjust background opacity, or enter a custom #RRGGBBAA color to include an alpha value.

🔁 Duplicate Detection

If the selected code already looks like a highlight in the current file, Code Mark shows a non-blocking warning instead of stopping the action. This lets the user continue highlighting while still being notified that the content may already exist.

🧭 Better Match Status

When a highlight cannot be resolved because the code has moved or changed significantly, the extension now gives clearer status messages instead of failing silently. This helps users understand whether the code changed, the match is missing, or a highlight simply needs review.

📌 Content-Based Persistence

Highlights are stored by code content (SHA-256 hash + fuzzy text matching), not by line number. New highlights also save nearby text as context anchors, helping distinguish identical code snippets in the same file.
If you insert/delete lines above a highlighted block, the highlight follows the code automatically.

🏷️ Tagging System

Assign tags like TODO, Bug, Important, Interview, Optimization, or any custom label.
Tags are filterable in the sidebar panel.

🔖 Sidebar Navigator Panel

Open the Code Mark panel in the Activity Bar to see all highlights across your workspace:

• Click any card to jump directly to the highlighted code
• Use the BG On/Off control in the panel header to hide or show highlight backgrounds
• Use each highlight card's BG On/Off control and opacity slider to customize it independently
• Filter by tag or search by code content
• Edit tag, change color, or delete from the panel
• Color-coded cards with file name and code preview

⌨️ Keyboard Navigation

The extension ships with defaults below, and you can customize any of them in VS Code’s Keyboard Shortcuts editor by searching for “Code Mark”.

Use the gear button in the sidebar header for quick access to settings. It opens a menu with: (1) Adjust fuzzy match threshold and (2) Open keyboard shortcuts. You can also go directly to VS Code Settings → Keyboard Shortcuts, search Code Mark, and assign whichever keys fit your workflow.

Commands

Storage

Highlights are stored in .vscode/codemark.json in your workspace root.

This file is portable — you can commit it to Git to share highlights with your team.

Each entry:

{
  "id": "uuid-v4",
  "filePath": "src/app.ts",
  "codeSnippet": "function calculateTotal(...)",
  "codeHash": "sha256-hex",
  "tag": "Important",
  "color": "#FFD700",
  "createdAt": "2026-01-01T00:00:00.000Z",
  "updatedAt": "2026-01-01T00:00:00.000Z"
}

Settings

Each highlight can also override the default opacity and background visibility independently from its sidebar card.

How Content Matching Works

1. Exact match — finds the snippet verbatim in the document
2. Normalized match — handles whitespace/newline differences
3. Fuzzy trigram match — finds the closest region using character n-gram similarity
4. Hash block match — compares SHA-256 hashes of same-sized blocks

If no match is found above the threshold, the highlight is shown as missing in the panel (but not deleted).

Preset Colors

🟡 Golden Yellow · 🟢 Lime Green · 🩷 Hot Pink · 🔵 Sky Blue
🔴 Coral Red · 🟣 Lavender · 🟠 Orange · 🩵 Cyan · ✏️ Custom hex

License

MIT