Syntax Highlighting in the Diff Viewer

I was up late last night experimenting with a new feature for Review Board. The idea was to introduce syntax highlighting for the code in the diff viewer through use of the Pygments library. Actually getting syntax highlighting to work was pretty easy, and before long I had it working. The trick, it turned out, was to get it working with our interline diff support.

Pygments generates a nice HTML-formatted string with span tags, but we need to insert our own span tags for the highlighting. This was a pain, since you need to make sure you place them at the correct locations, keeping in mind the existing span tags and entities. The code also needed to avoid messing up the nesting of tags. After working with it a bit, I had that working as well, and now the code is up for review. In a couple of days, Review Board will have nice syntax-highlighted diff output!

I have some new improvements in the works for the diff algorithm that should result in much better diffs (especially when moving functions around) and improved UI for that case as well. I’ll blog about that later when I have something to show πŸ™‚

Syntax highlighting

9 thoughts on “Syntax Highlighting in the Diff Viewer

  1. hendi

    That is totally awesome! When reading diffs I’ve often missed syntax highlighting. I’m eager to try out Review Board in my next project.

    Reply
  2. ChipX86

    apol: It’s open source under the MIT license. Hard to get more free πŸ™‚ It’s compatible with SVN and Perforce, and soon CVS, Git, and Mercurial.

    Reply
  3. Georg

    I’m delighted you’re using Pygments to highlight the diffs.

    Was usage of the library for that task straightforward or would you
    want something to change in order to make it easier to integrate?

    Reply
  4. ChipX86

    Georg: The library was very easy to integrate with and I’ve loved it so far. There are, however, a couple of small improvements we would like πŸ™‚

    Mainly, at work, we use *.cc and *.hh files for C++, and the CppLexer doesn’t list those. For the time-being, we’ve hand-patched our copy of Pygments to include these wildcards. We also use Objective C++, which there is no Lexer for, so we’re currently using the ObjectiveCLexer and added a *.mm wildcard to it.

    If we could get these wildcards added to Pygments, it would make things so much nicer for us. If there was a function to register a wildcard with a lexer for the life of that process (just updating the mapping table), that would also be very nice, but the main thing for us is the wildcards.

    Reply
  5. Leandro Penz

    When I faced a similar problem, I used a combination of VIM (http://www.vim.org), plugins (2html.vim) and shell scripts to generate a diff html with highlight. As vim supports a huge number of syntaxes, this gives a good general highlighter for free.

    Reply

Leave a Reply to Jeremy Bettis Cancel reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s