Experimenting With GitHub Gist-Based Code Samples For My Blog
Posted January 16, 2012 at 10:25 AM by Ben Nadel
Last week, I started looking around for a new color-coding solution for my blog's syntax highlighting. For the past couple of years, I've been using my own home-grown algorithm; which worked well for ColdFusion but, quite poorly for everything else. After looking at some of the options out there, I settling on trying to integrate GitHub's Gist hosting for my blog. It has an API that I can use to create posts (as part of my Content Management System); and, it has a Script tag that I can use to load Gists on my blog. After figuring out how to inject Gists into my content after the page had loaded, I was ready to try some full-cycle integration.
This is my first live blog post that makes use of the new Gist color coding. I'm not 100% sold on the formatting. The good news is, my CMS is creating Gists in parallel with the locally-stored code. That means that if I decide not to move forward with Gist, I still have all the "clean" code embedded in my blog content directly.
To demonstrate the color coding, I put together a rather simple demo - just something that included a bit of ColdFusion, a bit of HTML, a bit if CSS (Cascading Style Sheets), and a bit of JavaScript.
- <!--- Param our hashable string. --->
- <cfparam name="form.hashable" type="string" default="" />
-
-
- <!--- Check to see if we have a hashable string. --->
- <cfif len( form.hashable )>
-
-
- <!--- Create an MD5 hash of the string. --->
- <cfset hashedString = hash( form.hashable, "MD5" ) />
-
- <!--- Return the serialized string for the API. --->
- <cfcontent
- type="text/x-application-json"
- variable="#toBinary( toBase64( serializeJSON( hashedString ) ) )#"
- />
-
-
- </cfif>
-
-
- <!--- ----------------------------------------------------- --->
- <!--- ----------------------------------------------------- --->
- <!--- ----------------------------------------------------- --->
- <!--- ----------------------------------------------------- --->
-
-
- <!--- Reset the content buffer for the main page. --->
- <cfcontent type="text/html; charset=utf-8" />
-
- <!DOCTYPE html>
- <html>
- <head>
- <title>The ColdFusion Hash-O-Matic</title>
-
- <style type="text/css">
-
- input {
- font-size: 18px ;
- width: 450px ;
- }
-
- </style>
- </head>
- <body>
-
- <h1>
- The ColdFusion Hash-O-Matic
- </h1>
-
- <form>
-
- <p>
- Your String:<br />
- <input type="text" name="hashable" />
- </p>
-
- <p>
- Your MD5 Hash:<br />
- <input type="text" name="md5Hash" readonly="readonly" />
- </p>
-
- </form>
-
-
- <!--- Load the scripts for this demo. --->
- <script
- type="text/javascript"
- src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
- </script>
- <script type="text/javascript">
-
-
- // Cache our DOM references.
- var hashable = $( "input[ name = 'hashable' ]" );
- var md5Hash = $( "input[ name = 'md5Hash' ]" );
-
- // Cache our AJAX request - we only want to have one request
- // going at any one time.
- var hashRequest = null;
-
- // Make sure the form cannot be submitted in this demo.
- $( "form" ).submit(
- function( event ){
-
- event.preventDefault();
-
- }
- );
-
- // Bind to the key up on the hashable input. Every time the
- // key is presssed, we'll get the hashed version of the
- // string.
- //
- // NOTE: Since this is just a simple demo, I'm NOT goint to
- // worry about timing of throttling or debouncing.
- hashable.keyup(
- function(){
-
- // Check to see if we have an outgoing request for
- // the hash.
- if (hashRequest){
-
- // Abort the existing request - we're about to
- // launch a freshy-fresh one.
- hashRequest.abort();
-
- }
-
- // Get the hash of the currently available string.
- hashRequest = $.ajax({
- type: "post",
- url: window.location,
- data: {
- hashable: hashable.val()
- }
- });
-
- // If the request completes successfully, add the
- // hashed string to the output.
- hashRequest.done(
- function( hashedValue ){
-
- md5Hash.val( hashedValue );
-
- }
- );
-
- }
- );
-
-
- </script>
-
- </body>
- </html>
As you can see, the color coding is not super fantastic. But, it puts in the appropriate color-coding for comments; which, in my mind, is like 95% of what actually makes syntax highlighting useful.
Right now, my blog's CMS (Content Management System) automatically extracts code snippets from my articles and then posts them to a Gist (one Gist per blog post). If I like the way this works, I'll probably add that to the commenting system such that any code that gets embedded in a comment will also be automatically added to the Gist and then highlighted on the client-side.
I've given up on the idea (at least temporarily) that I'll make an awesome syntax highlighter on my own. So, for the time being, Gists seem to be a decent compromise.
Reader Comments
"I've given up on the idea (at least temporarily) that I'll make an awesome syntax highlighter on my own."
So use ColdFish? http://coldfish.riaforge.org/
@Todd,
Thanks for the link. I had forgotten about that as a possibility. I'll take a look.
Always been a fan of SyntaxHighlighter.
http://alexgorbatchev.com/SyntaxHighlighter/
GitHub uses Pygments for its syntax highlighting.
http://pygments.org/
https://bitbucket.org/birkenfeld/pygments-main
Unfortunately it doesn't support script-based CFCs yet, and I don't know Python well enough to submit a patch for it.
I'm seriously looking at this syntax highlighter:
http://code.google.com/p/google-code-prettify/
It is meant for being included on the finished html page, but you could use this in a CMS to pre-format the code and save out as html. It doesn't support cfml, however it couldn't be too hard to take the html formatting and modify it to also catch cfml tags and format them properly.
We use Gists in a teaching capacity at school, and one of the power points is that the students can fork an example Gist and run with it. I think the same could be used here on your blog if you could build it into the comments system. That is, someone forks and changes your code, links to the (new) Gist, and that Gist is automagically included. That would be baller, yo.
(I think it would also be great for Ray's occasional coding contests, but that's an entirely different blog altogether.)
@Tony,
I tried looking at the Python code. I don't know anything about Python, but I just wanted to see how something like this was built... way beyond easy at-a-glance understanding :D All kinds of lexer and token processing.
@Rick,
That would be really interesting! I could probably add some sort of [gist:12345] kind of processor or something. GitHub has a pretty decent API. I'll put it on the list of things to explore.
@Ben,
I like the idea of taking embedded code snippets of existing or new blog posts and automatically sending / creating gists based off of those posts.
It amazes me that the world of bloggers have not been doing it in this way.
On Wordpress, they convert pre-created gist links into embeds. I think this is backwards... but then again, I guess I could be wrong! :p
I like how you're doing it, and I'm hoping to find a way with wordpress to pull it off so that all I have to do is post say...
[gist name="samplecode1"]
<paste code here>
[/gist]
and it creates a gist with an id of like "<postid>-samplecode1" or something...?
Do you have code samples of your script that converts your code into gists?
@Ben,
Would you be interested in posting your code snippet parser written in CFML that converts your blog entries into gists?
I think I am concerned only for search engine not able to index the code sample because it is dynamically pulled in by JS
Just stumbled across this blog while reading up some stuff. I am actually a writer so cant say much but have seena bit of coding and I think colors other then the usual blue and green sounds exciting stuff. I just passed on the link to some of my friends at SoGoSurvey who code and stuff. I am sure you will have more followers of your blog now :)
