Dress Up Your Git Diffs With Word-level Highlights
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
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:
Pretty rad, and it only took us like two minutes. Technology!
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.