🤖 Add syntax highlighting to code review diffs #328
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- Install detect-programming-language for language detection - Create languageDetector utility mapping file extensions to Prism languages - Extract syntaxStyleNoBackgrounds to shared styles file - Update MarkdownComponents to use shared syntax styles - Add syntax highlighting to DiffRenderer and SelectableDiffRenderer - Add 27 unit tests for language detection covering common file types - Syntax highlights code while preserving diff semantics (green/red backgrounds) Generated with `cmux`
- Fix @typescript-eslint/no-require-imports error - Fix @typescript-eslint/prefer-nullish-coalescing warnings - Use ?? instead of || for safer null checks Generated with `cmux`
The detect-programming-language package had significant limitations: - Missing support for common file types (HTML, JSON, CSS, etc.) - Incorrect detection (e.g., .cs files detected as Smalltalk) - Only 855 extensions mapped vs. our 80+ comprehensive mapping Replaced with custom solution: - Extension-based detection (no external dependency needed) - Special filename handling (Dockerfile, Makefile, Gemfile, etc.) - Comprehensive coverage: JS/TS, web tech, backend languages, config formats - All 30 test cases passing The rest of the syntax highlighting feature was already complete: - syntaxStyleNoBackgrounds extracted and shared - DiffRenderer with HighlightedContent component - SelectableDiffRenderer with language detection - HunkViewer passing filePath prop Net change: -1 dependency, +39 lines, more reliable detection
Establish consistent 11px font size across all diff components: **Problems:** - SyntaxHighlighter was using default browser font size - LineNumber had conditional sizing (14px for headers) - CommentButton used 10px (smaller than other text) - NoteTextarea placeholder had redundant font-size - Font family inconsistency (textarea used sans-serif) **Solution:** - Add universal font-size inheritance rule to DiffContainer - Explicitly set fontSize: 'inherit' on SyntaxHighlighter - Remove conditional font sizing from LineNumber - Standardize CommentButton to 11px - Switch NoteTextarea to monospace font to match code - Remove redundant placeholder font-size All text in diff view now renders at consistent 11px.
FileEditToolCall was not passing filePath to DiffRenderer, so tool edits displayed plain diffs without syntax highlighting. Now all file edit operations (replace_string, replace_lines, insert) show syntax-highlighted diffs matching the code review panel behavior.
Make the + icon in the comment button more visible.
Changed DiffContainer base font from 11px to 12px. CommentButton now inherits font size instead of hardcoding it. Updated NoteTextarea min-height calculation to match new base size.
Added optional fontSize prop to DiffContainer, DiffRenderer, and SelectableDiffRenderer. FileEditToolCall now uses 11px font size while code review panel keeps 12px. This provides visual distinction between tool outputs (11px) and code review (12px).
_Generated with `cmux`_
_Generated with `cmux`_
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Adds language-specific syntax highlighting to diff hunks in the Code Review panel and file edit tool outputs.
What Changed
Before: Plain monochrome diffs with no language context
After: Syntax-highlighted code with language-appropriate colors while preserving diff semantics (green/red backgrounds, +/- prefixes, line numbers)
Visual Examples
Implementation Highlights
Custom Language Detection:
detect-programming-languagepackageSmart Highlighting Strategy:
vscDarkPlustheme (consistent with markdown code blocks)Consistent Typography:
Universal Coverage:
Testing
Generated with
cmux