What about Git Diff Highlighting

The setup instructions in this article are for Mac, but you should be able to do this on Linux and Windows Subsystem for Linux.

I prefer using git from the CLI (Command Line Interface), but sometimes a GUI (Graphic User Interface) does a better job with specific tasks. Diff highlighting is for sure one of them.

If you’re a software developer, there’s a good chance you’ve got an opinion on using the CLI vs GUI for Git operations.

Many devs consider mastering the Git CLI a feat of experience and skill. They are extremely proud, and protective, of their CLI fluency. 🥷🏻

For some devs, it’s downright romantic 🌹 the command line interface offers an intimate experience with your computer. It’s like having a back-and-forth conversation with your machine.

The boot sequence of Samantha OS on the movie “Her”

Know what ? Use the tool you are more confident with. For myself, I prefer using the CLI because I’m used too and I’m way too lazy to learn a new GUI for managing my commits, period.

In this article I will not try to convince you to operate git from your CLI or GUI. On the next few lines, you will discover different git diff output that may enhance readability.

Let’s dive 🤿.

I heavily rely on the git diff highlighting features, like every time.
I faced the git diff highlighting when I’m verifying changes before a commit (git add -p), when I review commits (git show& git logs) or when I’m finding bugs introduced between two commits (git bisect).
And to be franc, the default git diff output can be a little inconvenient. It can throw a lot of information at the screen at once.

what git diff normally shows you

I know this is completely unreadable. Believe me you can highly improve the output readability with one of the twofollowing tools:

• diff-so-fancy
• diff-delta

Let’s see both of them in action 🍿

diff-so-fancy

The project diff-so-fancy is a tool to make git diff more readable. Err… more fancy!

brew install diff-so-fancy

Configure git to use diff-so-fancy for all diff output

git config --global interactive.diffFilter "diff-so-fancy --patch"
git config --global core.pager "diff-so-fancy | less --tabs=4 -RFX"
git config --global pager.show "diff-so-fancy | less --tabs=1,5 -RFX"

Improved colors for the highlighted bits

git config --global color.ui true

git config --global color.diff-highlight.oldNormal    "red bold"
git config --global color.diff-highlight.oldHighlight "red bold 52"
git config --global color.diff-highlight.newNormal    "green bold"
git config --global color.diff-highlight.newHighlight "green bold 22"

git config --global color.diff.meta       "11"
git config --global color.diff.frag       "magenta bold"
git config --global color.diff.func       "146 bold"
git config --global color.diff.commit     "yellow bold"
git config --global color.diff.old        "red bold"
git config --global color.diff.new        "green bold"
git config --global color.diff.whitespace "red reverse"

Live actions

what git diff using diff-so-fancy will shows you

delta

The delta tool (a.k.a. git-delta or delta-diff) is a diff viewer written in Rust 💪.
Initially made to have a better Developer Experience using the git diff command, but has evolved enough transcending a simple diff for git.

brew install git-delta

Configure git to use delta for all diff output

git config --global interactive.diffFilter "delta --color-only --features=interactive"
git config --global core.pager "delta"

Improved colors for the highlighted bits

[delta]
    features = decorations
    navigate = true
    light = false
    minus-style                   = bold red
    minus-non-emph-style          = bold red
    minus-emph-style              = bold reverse red
    minus-empty-line-marker-style = normal "#3f0001"
    plus-style                    = bold green
    plus-non-emph-style           = bold green
    plus-emph-style               = bold reverse green
[delta "interactive"]
    keep-plus-minus-markers = false
[delta "decorations"]
    commit-decoration-style = bold yellow box ul
    file-style = bold yellow ul
    file-decoration-style = none
    hunk-header-decoration-style = cyan box ul

Here is the result

what git diff using diff-delta will shows you

Used to say that someone has to make a choice between two unpleasant choices Hiring a carpenter is expensive and doing it yourself is slow.

Sources

Chris Jones (Feb, 2016). Dress Up Your Git Diffs With Word-level Highlights.
https://www.viget.com/…/dress-up-your-git-diffs

Joel Clermont (Feb, 2021) Better Diff Highlighting in Git.
https://joelclermont.com/post/2021-02/better-diff-highlighting-in-git/