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][1] that pulls blobs from GitHub</a>. Those blobs can then be rendered client-side and optionally syntax highlighted</a>. 

<link rel="stylesheet" href="http://yandex.st/highlightjs/7.0/styles/default.min.css" />
To use github-files, get the git sha for a file:

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

Then you can grab the file from GitHub in JavaScript:

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

Here's the source for [github-files.js][2], fetched dynamically using github-files.js and rendered with [highlight.js][3]:
  


<div class="wp_syntax">
  <div class="code">
    <pre id="github-files">
```
  </div>
</div>

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

 [1]: https://github.com/jamesward/github-files
 [2]: https://github.com/jamesward/github-files/blob/master/src/main/javascript/github-files.js
 [3]: https://github.com/isagalaev/highlight.js
 [4]: http://developer.github.com/v3/#json-p-callbacks
 [5]: http://raibledesigns.com
 [6]: http://uberconf.com/conference/denver/2012/06/session?id=25584
 [7]: http://lab.hakim.se/reveal-js/