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 gitNow, 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-highlightThere 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 | lessThis setting will pipe diff’s output into diff-highlight and then through less.
Make sure you have colors turned on:
[color]
ui = alwaysFinally, 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 22That’s it. You’re done. I told you it was easy. Check it:
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 reverseThere 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.
