techTip

Embedding GitHub readme via jQuery

April 9 2014

If you navigate to one of the download pages, such as the billboard system, you'll see that the readme is presented at the bottom of the page. To make life easy, the file is pulled from GitHub via an ajax call during the page load. This ensures it remains up-to-date if and when the GitHub project is updated. The script relies on the following libraries:

We fetch the file using GitHub's API. Here's some code to insert the readme into the body of the page:

var converter = new Showdown.converter();

$.ajax({
    // repos/username/reponame/readme
    url: 'https://api.github.com/repos/torbensko/billboard/readme',
    dataType: 'jsonp',
    success: function(results) {
        $('body').append(
                converter.makeHtml(
                    Base64.decode( results.data.content )
                ));
    }});

More details about the GitHub API can be found here