Skip to content

feat: Add Code Diff Highlighting Mode#405

Open
Tanweer-Ahmed-Chiktay wants to merge 2 commits intoraycast:mainfrom
Tanweer-Ahmed-Chiktay:feature/code-diff-highlighting
Open

feat: Add Code Diff Highlighting Mode#405
Tanweer-Ahmed-Chiktay wants to merge 2 commits intoraycast:mainfrom
Tanweer-Ahmed-Chiktay:feature/code-diff-highlighting

Conversation

@Tanweer-Ahmed-Chiktay
Copy link
Copy Markdown
Contributor

Description

This PR implements code diff highlighting functionality, addressing issue #154.

Changes

  • Added diff mode toggle in the controls panel
  • Automatic detection of lines starting with + or -
  • Visual styling with colored backgrounds for additions and deletions
  • URL state persistence for diff mode
  • Seamless integration with existing line highlighting

Features

  • Additions: Green background (rgba(46, 160, 67, 0.15)) for lines starting with +
  • Deletions: Red background (rgba(248, 81, 73, 0.15)) for lines starting with -
  • Diff markers: Visible + and - symbols at line start
  • Toggle control: Easy on/off switch in the controls panel
  • URL persistence: Diff mode state saved in URL parameters

Implementation Details

  • Created DiffModeControl.tsx component for the toggle
  • Added diffModeAtom to store state with URL sync
  • Enhanced HighlightedCode.tsx with diff detection logic
  • Added CSS styling in Editor.module.css
  • Integrated control into main Controls.tsx component

Testing

  • Tested with various code snippets containing + and - prefixes
  • Verified compatibility with existing line highlighting
  • Confirmed URL state persistence works correctly
  • Checked visual appearance in both light and dark modes

Screenshots

The diff mode clearly highlights code changes with intuitive color coding, making it perfect for showcasing code modifications, pull request reviews, and before/after comparisons.

Closes #154

@vercel
Copy link
Copy Markdown
Contributor

vercel Bot commented Feb 14, 2026

@TanweerACB is attempting to deploy a commit to the Raycast Team on Vercel.

A member of the Team first needs to authorize it.

TanweerACB and others added 2 commits February 21, 2026 17:58
Implements raycast#154 - Add ability to highlight code differences within lines

Features:
- New diff mode toggle in controls panel
- Automatic detection of + and - prefixed lines
- Visual styling with green background for additions
- Visual styling with red background for deletions
- Diff markers (+ and -) displayed at line start
- URL state persistence for diff mode
- Works seamlessly with existing line highlighting

Technical implementation:
- Added diffModeAtom to store for state management
- Extended Shiki transformer to detect and style diff lines
- Created DiffModeControl component with Switch UI
- Added CSS styling for diff-add and diff-remove classes
- Integrated with existing code highlighting system
@Tanweer-Ahmed-Chiktay Tanweer-Ahmed-Chiktay force-pushed the feature/code-diff-highlighting branch from accd0c6 to 5b3be11 Compare February 21, 2026 16:29
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.

[Feature Request]: Add ability to difference and highlight code inside lines

2 participants