oreilly.comSafari Books Online.Conferences.


AddThis Social Bookmark Button

HTML Tools on the Mac Command Line
Pages: 1, 2, 3

Vive la Difference!

As a website admin who oversees sites that multiple people work on, I often need to compare pairs of files to see what's different between them -- like between an edited file and a backup, for instance. Linux/Unix users will be familiar with the diff utility, which I'll be touching on here, along with some diff enhancements.


Once again, diff has numerous options that are too much to go into in this particular article, but let's start with a basic scenario.

Let's say your screed.html file gets uploaded to the server. A few days later, one of your fellow politicos lets you know he's edited the server's version of the file, adding a paragraph of text and making a nit-picking edit somewhere else.

In a huff, you download the file from the server, saving it as screed_edit.html in the same local directory as the original file. Now, let's find out what your associate did to your fine prose:

diff screed.html screed_edit.html

Here's what diff said:

< elit. Fusce arcu eros, sollicitudin vitae
> rcu eros, sollicitudin vitae
> <p>Aliquam imperdiet nonummy risus. Vivamus in lectus.

Looks like he deleted a few words in a sentence on line 20, and his new paragraph started on line 71. Good to know.

If you'd rather view the files side by side, expand your Terminal window and use this:

diff -y screed.html screed_edit.html

Using the -y flag, you'll get both files side by side in their entirety, with indicators in the whitespace between them where differences were found. This might be a little unwieldy with large files, so try this (on one line):

diff -y --suppress-common-lines screed.html screed_edit.html

This acts like a combination of the first two diff commands, presenting just the differences, but doing it side by side.

Now, let's really get busy. Remember our pipe command above? What if we wanted to compare the resulting html with an already existing file, like the edited one we downloaded? On one line, type:

textutil -stdout -convert html screed.txt | tidy | diff -y --supress-common-lines - screed_edit.html

Phew! OK, let's take it step by step. The textutil section you already know, converting .txt to .html. This marked-up text is then piped to tidy, which does its magic on the HTML. And finally, the results are piped to diff, which compares the new code with an existing file called screed_edit.html (the hyphen by itself tells diff to use standard input -- i.e., from our pipe) and displays just the differences in two columns side by side.

opendiff and FileMerge

Apple's Developer Tools come with several apps that are useful both individually and in concert. One of those that works well even on its own is FileMerge, a GUI program that displays and merges two files together. And it has a CLI utility that can launch and feed it input, called opendiff.

With your working directory littered with .html files now, it might be a good idea to check things out:

opendiff screed_tidy.html screed_edit.html

That was easy. Now that FileMerge has been launched, we can view and edit both files in a nice GUI window. Even better, you can use its Actions popup to merge the two. Another handy feature is comparing two files to a common ancestor:

opendiff -ancestor screed.html screed_tidy.html screed_edit.html

vimdiff and ediff

Not to be outdone, my personal favorite editor vim can do something very similar with its vimdiff utility, which will present the two files in a split window with the differences highlighted.

vimdiff -O screed.html screed_edit.html

That's a capital letter O, by the way. This will present the two files side by side, in other words with a vertical split. To split the window horizontally instead, use -o


In either case, a maximized Terminal window will make it a lot easier to see everything.

And while I'm not familiar enough to write about it, Emacs does have its own diff mode, known as ediff, which you can read about it in this ediff user manual.

Final Thoughts

We've just scratched the surface of what's available to HTML jockeys on the Mac OS X command line. These utilities have a lot more depth that you'll enjoy playing with, and of course there are numerous other programs available in /usr/bin to help you out. Go exploring in there sometime and pull up a man page on ones that look interesting. Or just issue the command whatis foobar to get a brief description.

The combination of CLI and GUI tools, as well as "glue apps" like Quicksilver that combine the power of both, is one of the most exciting parts of working on Mac OS X.

Robert Daeley is a writer and programmer in Southern California. By day he is a mild-mannered server administrator and website developer; by night, in addition to his super-hero duties, he cooks, bikes, hikes, cheers on the Dodgers, and writes fiction.

Return to the Mac DevCenter