« Play 2 Scala Console on Heroku | Main | Auto-Refresh for Play Framework Apps »

Dynamically Rendering GitHub Files in Web Pages

Posted by: James Ward on 06/15/2012

You know how you can easily embed GitHub Gists into a webpage? I’ve always wanted that for any file on GitHub. I post a lot of code on my blog and it’s always tedious and error-prone having to copy and paste the code. I’d rather be able to dynamically render a specific version of a file hosted on GitHub. So I created a little JavaScript jQuery plugin called github-files that pulls blobs from GitHub. Those blobs can then be rendered client-side and optionally syntax highlighted.

To use github-files, get the git sha for a file:

git rev-parse HEAD:src/main/javascript/github-files.js

Then you can grab the file from GitHub in JavaScript:

$.getGithubFile("user", "repo", "sha",
    function(contents) {
        console.log(contents)
    }
)

Here’s the source for github-files.js, fetched dynamically using github-files.js and rendered with highlight.js:

This uses GitHub’s JSONP API to pull the file in. It’s pretty simple and could use a few more features but it’s a start! Matt Raible and I are using this for our upcoming ÜberConf presentation to render code in our reveal.js preso. Hopefully this is useful for others. Let me know what you think.

James Ward's complete blog can be found at: http://www.jamesward.com/

About James Ward

James Ward (www.jamesward.com) works for Typesafe where he teaches developers the Typesafe Stack (Play Framework, Scala, and Akka) . James frequently presents at conferences around the world such as JavaOne, Devoxx, and many other Java get-togethers. Along with Bruce Eckel, James co-authored First Steps in Flex. He has also published numerous screencasts, blogs, and technical articles. Starting with Pascal and Assembly in the 80′s, James found his passion for writing code. Beginning in the 90′s he began doing web development with HTML, Perl/CGI, then Java. After building a Flex and Java based customer service portal in 2004 for Pillar Data Systems he became a Technical Evangelist for Flex at Adobe. In 2011 James became a Principal Developer Evangelist at Salesforce.com where he taught developers how to deploy apps on the cloud with Heroku. James Tweets as @_JamesWard and posts code at github.com/jamesward.

More About James »