About the "diff + syntax highlighting" feature, I've only found this old article: https://blaxpirit.com/blog/1/diffs-with-syntax-highlight.html So it looks complicated to get it done with Pygments.

I've opened a "feature request" in the Pygments repository about "diff + highlighting" --> https://bitbucket.org/birkenfeld/pygments-main/issues/1339/add-support-for-using-the-diff-lexer-code

I like this proposal a lot, but currently it looks like this:

However, given that red-green color blindness affect to 8% of people, I guess this will be confused by a mistake where we made a typo and put a + in the code.

I propose to change this to show the + and - on the left margin:

Another proposal for which I'm not sure would be to display a green/red background color on the changes, to make them stand out more:

My vote would be yes to 1) and no to 2). What do others think? Thanks!

I'm definitely 👍 for aligning left margin, and I'm also 👍 for the background color, looks more like a diff to me.

I agree with @HeahDude! I like both the left margin align and the light green background (which obviously GitHub does - that's always a good source to follow). IF possible, it would be great to make the + not selectable - possibly via a :before content CSS selector - it's what we use on our code blocks on KnpU (https://knpuniversity.com/screencast/javascript/window-global-vars).

@javiereguiluz are you proposals possible? Or are we going to need to hack through some sphinx code to do this?

Luckily we can do these changes just with CSS.

Let's consider a GitHub diff as a reference:

This is the default Pygments style:

And this is the design that has been proposed to symfony.com private repo:

We can't do the same as GitHub because the Pygment markup is not advanced enough to highlight the specific chars changed on each line.

The changes in the diff styles have already been merged on symfony.com ... so it's safe now to merge this. Thanks!

Woohoo! That was quick work! Thanks!