Skip to content

Better diff highlighting for code blocks#1433

Open
sfc-gh-dmatthews wants to merge 11 commits intoccv2-conceptsfrom
prettier-python-diff
Open

Better diff highlighting for code blocks#1433
sfc-gh-dmatthews wants to merge 11 commits intoccv2-conceptsfrom
prettier-python-diff

Conversation

@sfc-gh-dmatthews
Copy link
Contributor

@sfc-gh-dmatthews sfc-gh-dmatthews commented Mar 7, 2026

📚 Context

Code blocks with diff syntax highlighting needed better visual presentation and functionality. The existing implementation didn't properly handle diff-specific languages or provide appropriate visual markers for added/removed lines.

🧠 Description of Changes

Current:

Basic diff code blocks without proper language detection, visual markers, or specialized copy functionality.

Revised:

Enhanced diff code blocks with proper syntax highlighting, visual markers, and improved copy behavior.

  • Added support for diff-<language> syntax (e.g., diff-python) with proper language detection and display
  • Implemented visual diff markers (+, ) in the left margin for added/removed lines
  • Added specialized copy button behavior that excludes deleted lines when copying diff content
  • Enhanced Prism.js integration with diff-highlight plugin and custom unchanged-equal token support to prevent unintentional trimming of leading whitespace
  • Added fade overlays on code block containers to improve visual presentation
  • Updated language mapping utilities to handle diff-prefixed languages
  • Applied diff syntax to tutorial content in authentication and LLM guides
  • Added CSS styling for diff markers, line-level tokens, and proper block layout
  • Increased z-index layering for diff markers and code overlays

💥 Impact

Size:

  • Not small

🌐 References

Contribution License Agreement

By submitting this pull request you agree that all contributions to this project are made under the Apache 2.0 license.

Copy link
Contributor Author

sfc-gh-dmatthews commented Mar 7, 2026

Warning

This pull request is not mergeable via GitHub because a downstack PR is open. Once all requirements are satisfied, merge this PR as a stack on Graphite.
Learn more

This stack of pull requests is managed by Graphite. Learn more about stacking.

This was referenced Mar 7, 2026
@sfc-gh-dmatthews sfc-gh-dmatthews marked this pull request as ready for review March 7, 2026 16:29
@sfc-gh-dmatthews sfc-gh-dmatthews requested review from a team and sfc-gh-kmcgrady as code owners March 7, 2026 16:29
@sfc-gh-dmatthews sfc-gh-dmatthews changed the title Diff highlighting Better diff highlighting for code blocks Mar 7, 2026
@sfc-gh-dmatthews sfc-gh-dmatthews requested review from sfc-gh-bnisco and removed request for a team and sfc-gh-kmcgrady March 9, 2026 22:25
Comment on lines +278 to +280
// Prism's diff grammar only recognizes +/- prefixes. We use "=" for
// unchanged lines to keep code aligned (no visual shift) and to preserve
// leading whitespace that markdown processing would otherwise strip.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍

}
}

// Highlight the code block and conditionally enable toolbar plugins (including copy button)
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

question: Are these comments intentionally removed?

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.

2 participants