Syntax-Highlighted Diffs!
I just wrote up a new programming note about how to do syntax-highlighted diff output using Pygments and Python’s difflib library, in a Django website. It’s available here.
I implemented this feature for csman, a homework submission and grading system I have been implementing for the last couple of months, to use with the CS1, CS4, and CS11 classes that Mike Vanier and I teach. All of these classes have a similar homework-submission model, much like the model in real software projects: you write the code, and if it’s not good enough, you have to fix it.
Of course, grading redos is always a little annoying, so if you have a tool that lets you view a diff of the old submission and the new submission, it becomes very simple to see if the student actually fixed everything you told them to fix. (Sometimes they don’t. It’s very annoying when this happens.)
Anyway, it’s a cool little feature, to be able to see syntax-highlighted diff output on csman, but it definitely still needs a lot of work. The main issue is that frequently the files are too wide to display side-by-side, unless you happen to have a nice large monitor like I do. So, the problem really requires the effective use of scrollbars, both horizontal scrollbars to allow the diff-output to be visible in a smaller window, and also vertical scrollbars since otherwise those horizontal scrollbars are going to be waaayy at the bottom of your web page.
So, I have some work to do on that problem, but for now I’ll stick with what I have. It does the job, and one day when I learn more client-side JavaScript, maybe I’ll fix that kind of stuff up to be more snazzy.