GitHub Is Pretty Magical

Warning: Weak browsers (aka Internet Explorer) may not be able to render this blog entry in its glory. Use a real browser!

If you browse on over to the Code and Applications section of this site, you will notice that it takes a little time to load. That’s because that entire page is being dynamically generated by your browser via the GitHub (JSON) APIs. What you see on that page is a live, up to the minute, list of every public project in my GitHub repository.

And here’s the JavaScript code that does it:

But that’s not really the magical part. Here’s the code that inserted the code above into this page:

<pre class="githubfile" file="githubprojects.js" repository="GithubProjects" user="koush"></pre>

The first bit of JavaScript code you see above is a live view of the file that is checked into my GitHub repository… and your browser is using the GitHub API to view it, highlight it (using SyntaxHighlighter), and then render it to your screen. Kudos to Github for a fantastic API!

I wrote GithubProjects up today as an exercise in learning jquery, AJAX, and some other Web 2.0 acronyms. Of course, all of this code is available in my GithubProjects repository.

Gitweb Line Highlighting

I made a few more changes today to support line highlighting of gitweb blobs. Like SyntaxHighlighter, the line highlighting is also completely JavaScript driven. When you highlight a line, it updates the fragment portion of the URL in your browser. Then when you send the URL (with the fragment) to someone, they will see the same highlighted code.

Click here for a sample of code highlighting.

Fun exercise in my quest to catch up and learn JavaScript, CSS, et al.

I couldn’t do this by modifying the query string, because that causes a browser reload when changing window.location. I could perhaps have made a “create hyperlink” button that puts the hyperlink with a modified query string into your paste buffer, but that isn’t as easy as just copying the address out of your browser address bar.

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.