Skip to content

Comments

feat: add git diff syntax highlighting#39

Merged
jack-mil merged 4 commits intocatppuccin:mainfrom
jack-mil:add-diff
Mar 13, 2025
Merged

feat: add git diff syntax highlighting#39
jack-mil merged 4 commits intocatppuccin:mainfrom
jack-mil:add-diff

Conversation

@jack-mil
Copy link
Member

Finally something that might actually offer a slight improvement over the VS Code default!

Notepad++ VS Code
image image

The choices of color are a bit arbitrary, but I personally think it looks nice.

Relates to #33

<WordsStyle name="COMMENT" styleID="1" fgColor="{{ overlay2.hex }}" bgColor="{{ base.hex }}" colorStyle="1" fontName="" fontStyle="0" fontSize="" />
<WordsStyle name="COMMAND" styleID="2" fgColor="{{ mauve.hex }}" bgColor="{{ base.hex }}" colorStyle="1" fontName="" fontStyle="1" fontSize="" />
<WordsStyle name="HEADER" styleID="3" fgColor="{{ blue.hex }}" bgColor="{{ base.hex }}" colorStyle="1" fontName="" fontStyle="0" fontSize="" />
<WordsStyle name="POSITION" styleID="4" fgColor="{{ yellow.hex }}" bgColor="{{ base.hex }}" colorStyle="1" fontName="" fontStyle="1" fontSize="" />
Copy link
Contributor

@sgoudham sgoudham Mar 12, 2025

Choose a reason for hiding this comment

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

I think peach might be better suited than yellow here.

@uncenter
Copy link
Member

uncenter commented Mar 12, 2025

We don't realllyyy have a good standard for diffs. For reference:

Helix

image

Neovim

image

Visual Studio Code

image

Zed

image

@jack-mil
Copy link
Member Author

Here is the change with location/line numbers in peach
image

@InvitedToHell
Copy link
Collaborator

I think yellow looks bette, but as we do not have standards, I also don't know which would fit better.
@sgoudham Do you really like orange more?

@sgoudham
Copy link
Contributor

sgoudham commented Mar 12, 2025

I think yellow looks bette, but as we do not have standards, I also don't know which would fit better. @sgoudham Do you really like orange more?

I'm justifying peach as it effectively acts as the heading for the changes in the diff

image

and it's the second rainbow heading. red would be too confusing here obviously.

Commands are usually blue in our terminal ports but I guess mauve is fine.

Edit: blue for commands and mauve for the filenames might be interesting?

@jack-mil
Copy link
Member Author

image

@sgoudham
Copy link
Contributor

If you'd humour me, what about setting the command to text (or subtext0) and blue for the filenames?

@InvitedToHell
Copy link
Collaborator

If you'd humour me, what about setting the command to text (or subtext0) and blue for the filenames?

yea I think that might be fitting, actually

@jack-mil
Copy link
Member Author

subtext0 and blue.

Personally, I liked more colors with blue & mauve for command and filenames, respectively.

image

@sgoudham
Copy link
Contributor

My reasoning there is that I don't think the diff command is something you want highlighted since it's duplicated information from the filenames 🤔

@backwardspy - what do you think?

@uncenter
Copy link
Member

uncenter commented Mar 12, 2025

I think we should highlight as something other than text to distinguish it from the commit/patch message/details above and raw lines of code below that are also plain text.

@backwardspy
Copy link
Member

i agree, it makes sense for it to stand out. i think the original and blue/mauve/peach both look nice. i say we pick one, put it in the style guide, and see what we can do about getting the other editors in line.

@sgoudham
Copy link
Contributor

i agree, it makes sense for it to stand out. i think the original and blue/mauve/peach both look nice. i say we pick one, put it in the style guide, and see what we can do about getting the other editors in line.

Sounds like a plan, I'd currently put forward:

  • blue commands
  • mauve filenames
  • peach line numbers/positions (happy to change this back to yellow if everyone else really dislikes peach)
  • everything else as is from the original commit.

@backwardspy
Copy link
Member

i'm happy with that!

@jack-mil
Copy link
Member Author

Ok, so this PR as is looks like this, in Mocha, Frappe, and Latte

mocha

mocha

frappe

frappe

latte

latte

@uncenter
Copy link
Member

  • mauve filenames

Fwiw I think we have traditionally done pink filenames, as can be seen in Neovim and Zed's reference images in my earlier comment, as well is with unquoted paths in Nix. With the already have use of mauve in our syntax highlighting, and with pink being less common, maybe we can diversify and go with pink for filenames here?

@sgoudham
Copy link
Contributor

Sure, happy with pink filenames

@jack-mil
Copy link
Member Author

Done
image

@jack-mil jack-mil merged commit 9fc2caa into catppuccin:main Mar 13, 2025
1 check passed
@jack-mil jack-mil deleted the add-diff branch March 13, 2025 14:25
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.

5 participants