Gitweb Support for SyntaxHighlighter

After getting Gitosis set up on my Hackintosh, I set up gitweb as well. But vanilla gitweb is really ugly; it’s almost as bad as sitting at a console typing the git commands manually. So I spent a good day or so trying to tweak gitweb to work with SyntaxHighlighter. For the longest time, SyntaxHighlighter simply would not work on any page at all. After prodding for a while, I finally figured out that it was due to gitweb.cgi returning the content-type as “application/xhtml+xml” instead of “text/html”.

Click here to see a sample gitweb repository with SyntaxHighlighter enabled. Navigate around the projects, and click any of the language specific blob links (.c, .cs, etc) to see the new highlighting.

// This is SyntaxHighlighter, and
// it now works in gitweb!
if (true)
{
Console.WriteLine("Hooray!");
}

Head over to my GitHub repository to get my git fork with the tweaked gitweb and instructions!

P.S. This was my first time hacking at Perl. I feel violated.

P.P.S. The Perl brush is intentionally disabled. It is a little buggy.

4 comments:

Treviño said...

Hi, I've started using your patched gitweb in my site but I found that it had two issues:
1) The highlighted text is too small
2) The "tags", "branches" (like "master") labels aren't shown properly.

For "fixing" the first one I had to hack SyntaxHiglighter hardcoding the font size in Styles/shCore.css (I've put font-size: 1.03em), since the SyntaxHighlighter.defaults.['font-size'] didn't work there. Then I had to hide the numbers by commenting the code in Scripts/shCore.js (since they were shown badly).

By the way for the second issue I've found the problem in gitweb (I guess that's due to the content-type), and here's the patch that fixes it (I've also enabled the higlighting for the c/cpp header files) by printing the syntaxhighlighter stuffs only when we're "blobbing" something.
http://pastebin.ubuntu.com/157335/

Bye ;)

Treviño said...

Ah, just for reference.
Here's how it looks mine ;)

Koush said...

That's a viable way to fix the first issue :)
I believe you can also just copy an existing theme and modify the values there right? I'm surprised SyntaxHighlighter.defaults['font-size'] did not work (your code snippet includes a period before the bracket?). Did you make sure that is being set before the call to SyntaxHighlighter.all?

Thanks for the patch for the second issue. I'll commit that tonight!

Treviño said...

Yes, maybe I could modify a theme for changing the font size too.
However the problem I had next was that the line numbers where not correctly synchronized. Also if they had the same size of the text, they used less space in height.