Saturday, June 22, 2013

Displaying your GitHub Files in Blogger


GitHub has Gist a sort of way to share samples or snippets of code. However if you're looking for a way to describe code you've already got published on GitHub then you need James Ward's scripts which exploit GitHub's JSON API.

With the help of a javascript friend Sharath (read expert) from work I got it running. Some of the resources I looked at were:

Dynamically render GitHub files on your webpage:
http://www.jamesward.com/2012/06/15/dynamically-rendering-github-files-in-web-pages
Highlighting code using Alex's SyntaxHighlighter:
http://alexgorbatchev.com/SyntaxHighlighter/
How do I add syntax highting to my blogger:
http://oneqonea.blogspot.in/2012/04/how-do-i-add-syntax-highlighting-to-my.html

Here's how the dynamically rendered file from GitHub looks like using the <pre> tags. In this example I'm pulling a simple hello_world.c program from my techeuphoria GIT repository


It boils down to editing my blogger template file in HTML and adding the following scripts
 
 
    
 
    
    
    
    
    
 

Then I add the following script in my blog post to get the GitHub file and render it with SyntaxHighlighter code.


In the above example
  1. zeuzoix is my username, 
  2. techeuphoria is the GitHub project name
  3. 57b109115db896930905521b1df460eadcd462e8 is the git sha for the file obtained using git rev-parse HEAD:hello_world.c
  4. 3 is the start line number of the hello_world.c file
  5. 12 is the end line number of the hello_world.c file

No comments:

Post a Comment