claude-code-proxy icon indicating copy to clipboard operation
claude-code-proxy copied to clipboard

Fix code viewer syntax highlighting corruption

Open ejc3 opened this issue 4 weeks ago • 0 comments

Fixes HTML class attribute corruption in the code viewer.

The bug

The syntax highlighter was applying regex replacements sequentially, which caused later patterns to match content inside already-generated HTML class attributes. For example, "text-purple-400" would get matched by the number pattern, producing broken output like:

class="text-green-class="text-purple-400">400">"text"

The fix

Replaced sequential regex with a single-pass tokenizer that:

  1. Matches all syntax patterns in one pass
  2. Only applies highlighting to the matched tokens
  3. Escapes HTML on matched content only

Also fixed escapeHtml in formatters.ts to not use document.createElement (fails in SSR).

Changes

  • web/app/components/CodeViewer.tsx: Single-pass tokenizer for syntax highlighting
  • web/app/utils/formatters.ts: SSR-safe HTML escaping

ejc3 avatar Nov 28 '25 05:11 ejc3