Skip to content

Add Monaco syntax highlighting to the diff panel#9

Open
evanklem wants to merge 1 commit into
mainfrom
diff-syntax-highlighting
Open

Add Monaco syntax highlighting to the diff panel#9
evanklem wants to merge 1 commit into
mainfrom
diff-syntax-highlighting

Conversation

@evanklem

Copy link
Copy Markdown
Owner

What this does

Reuses the editor's Monaco tokenizer and polypore-warm theme to syntax-highlight the diff panel's lines instead of rendering flat text. The shared theme, language detection, and colorize helpers are factored into plugins/shared/monaco-highlight.ts and the editor is rewired onto them, so both panels share one source of truth. Diff-status tints (add/remove/change) stay dominant as the row background; token colors render over them.

How to test

  1. npm run app, open the diff panel, and pick a changed source file from the rail (e.g. a .ts/.tsx/.css).
  2. Confirm lines render with the same syntax colors as the editor, while the green/red/accent row tints still show the diff status.
  3. Switch filesranch compare;highlighting tracks the active file's language.
  4. Open a changsionless nameand confirm it falls back to uncolored text with no error5. Run npm rununplugins/shared/plugins/diff-hi.ts.## Checklist- [x] npm run- [x] cargo cl` passes (ifRust changed) —
  • New behavxisting testsupdated

Reuse the editor's Monaco tokenizer and theme to syntax-highlight diff
lines instead of rendering flat text. Factor the shared theme, language
detection, and colorize helpers into plugins/shared/monaco-highlight.ts
and rewire the editor to use them. Diff-status tints stay dominant as the
row background; token colors render over them.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant