Inline Regex Highlighter

A lightweight Visual Studio Code extension that dynamically highlights custom regex tokens across your workspace from inline annotations.

How?

Add :highlight: <regex> -> <json> markers somewhere at the start of your file. If the regex is matched, then the json is passed to the Visual Studio Code Decorator API to decorate the match.

Example:

// :highlight: /\b(REG_[A-Z0-9_]+)\b/ -> { "color": "#d7afff", "outline": "1px solid #d7afff", "fontWeight": "bold" }
// :highlight: /\b(strtok|strcat|strcpy)\b/ -> { "color": "#ff5555", "fontWeight": "bold", "after": { "contentText": " 🛑 UNSAFE C-STRING FUNCTION", "color": "#ff5555", "fontStyle": "italic" } }
// :highlight: /DEBUG_PRINT/ -> { "dark": { "color": "#50fa7b" }, "light": { "color": "#008800" } }

#define REG_CTRL_STAT  0x40021000
#define REG_DATA_BUF   0x40021004

void process_telemetry(const char* packet) {
    char local_copy[256];
    strcpy(local_copy, packet); 
    DEBUG_PRINT("Processing new telemetry packet header.\n");
}

Renders as

I made this because I have code bases where important elements can be spotted by regex, but not with my eyes.

More demos are in the source repo

Features

• Configuration: Configurable via inline tags or workspace configuration file
• Regex Customization: JavaScript RegExp modifiers/flags can be set (e.g., case-insensitivity /gi).
• Capture Groups: Target specific regex capture groups while ignoring the surrounding match context.
• Workspace Trust Aware: Inline comments work in restricted mode, workspace configuration is read when the project folder is trusted.
• Output Channel Logging: Debug and test your custom regex constraints via dedicated editor Output stream.

🛠️ Workspace Setup (.inline-regex-highlighter.json)

Create a file named .inline-regex-highlighter.json at the root of your project workspace to apply global rules. You can filter rules by file extension, inject context-aware content markers, and specify theme variations.

Sample Global Configuration

[
  {
    "description": "Highlight critical errors with scrollbar indicator",
    "pattern": "CRITICAL_ERROR",
    "options": {
      "color": "#ffffff",
      "backgroundColor": "#cc0000",
      "fontWeight": "bold",
      "overviewRulerColor": "#ff0000",
      "overviewRulerLane": 4
    }
  },
  {
    "description": "File Filtering & Theme-Aware styling (JS/TS only)",
    "include": ["**/*.js", "**/*.ts"],
    "pattern": "console\\.log",
    "options": {
      "dark": { "color": "#a8ffb2" },
      "light": { "color": "#006611" }
    }
  },
  {
    "description": "Capture Groups (Highlights ONLY the variable name)",
    "pattern": "(?:let|const)\\s+([A-Z_][A-Z0-9_]*)",
    "options": {
      "captureGroup": 1,
      "color": "#3399ff",
      "fontWeight": "bold"
    }
  }
]