Dress Up Your Git Diffs With Word-level Highlights

Chris Jones, Development Director

Article Category: #Code

Posted on

Oh, hey. I didn’t see you there. How’s it going? You look nice today.

If you have a couple minutes, I’d like to tell you something I just learned about git and diffs. See, I’ve always liked how GitHub shows diffs. Sure, they show you what lines were added and removed, but they also show you exactly which characters changed on similar lines. Like so:

:)

Pretty neat. (You heard about the safe navigation operator, right?) When I diff, though, I don’t see the highlights:

:'(

It would be cool to have word-level diff like this in the terminal. git-diff has a command line flag, --word-diff, that tries to do this, but the output is not so good. Go ahead, try it. Yeah, not the best.

Turns out, git ships with a separate tool to make this happen. It’s not perfect, but it does a pretty good job. Plus, it’s super duper easy to set up. It’s called diff-highlight. Let’s get to it.

First, you’ll want to upgrade git to the latest version—2.7.1, as of this writing. (Older versions of git come with diff-highlight, but we saw some issues with wrong colors.)

> brew update
> brew upgrade git

Now, we need to find the thing:

> find -L /usr -name diff-highlight -type f
/usr/local/Cellar/git/1.9.2/share/git-core/contrib/diff-highlight/diff-highlight
/usr/local/Cellar/git/2.5.0/share/git-core/contrib/diff-highlight/diff-highlight
/usr/local/Cellar/git/2.7.0/share/git-core/contrib/diff-highlight/diff-highlight
/usr/local/Library/LinkedKegs/git/share/git-core/contrib/diff-highlight/diff-highlight
/usr/local/opt/git/share/git-core/contrib/diff-highlight/diff-highlight
/usr/local/share/git-core/contrib/diff-highlight/diff-highlight

There are a bunch of results here. The first two are old versions of git I should probably delete so I’m not clogging up my computer tubes. The next is my current install, and the rest are symlinks to it. The last one is the one we care about. Command-V it up.

Next, open up your ~/.gitconfig file in your favorite editor and add a new entry under [core] using the path you copied just a sec ago:

[core]
   pager = /usr/local/share/git-core/contrib/diff-highlight/diff-highlight | less

This setting will pipe diff’s output into diff-highlight and then through less.
Make sure you have colors turned on:

[color]
  ui = always

Finally, set some colors just for diff-highlight, so word-level changes are highlighted:

[color "diff-highlight"]
  oldNormal = red bold
  oldHighlight = red bold 52
  newNormal = green bold
  newHighlight = green bold 22

That’s it. You’re done. I told you it was easy. Check it:

d:D

Pretty rad, and it only took us like two minutes. Technology!

Bonus Tip

While you’re in there, you might as well set some other useful diff colors:

[color "diff"]
  commit = green
  meta = yellow
  frag = cyan
  old = red
  new = green
  whitespace = red reverse

There you have it: fancier diffs, and we didn't even break a sweat. You're now a #cooldev

Got any handy git configuration tips? Just wanna say hello? Do some comments down there. 

Chris Jones

Chris is a development director who designs and builds clean, maintainable software from our Durham, NC office. He works with clients such as the Wildlife Conservation Society, World Wildlife Fund, and Dick's Sporting Goods.

More articles by Chris

Related Articles