This post is an example of how to setup JS code formatting for Jekyll on Github pages along with a ability to allow users to execute the example JS code.

example JS code snippet:

alert('hello');
function adder(a,b){
 return a + b;
};
adder(5,8);

This is just for fun and should make it a bit easier to blog about some JS code examples in the future. It also allowed me to play around with some JS code to build a simple Jquery plugin for my blog.

Instructions

To make this work on github pages for your own blog basically follow the Pygments for Jekyll instructions. Remember to link the generated Pygments css file in your layout file. Then I just hacked together a really quick JQuery plugin which I include on my Jekyll layout template, starting from Jquery.exampleRunner, I modified the plugin to find any div with class js-runner and insert a run button which will include the results. You can view the source by checking this blogs source, or view my version of jquery.exampleRunner source directly.



blog comments powered by Disqus
Dan Mayer Profile Pic
Welcome to Dan Mayer's development blog. I primary write about Ruby development, distributed teams, and dev/PM process. The archives go back to my first CS classes during college when I was first learning programming. I contribute to a few OSS projects and often work on my own projects, You can find my code on github.

Twitter @danmayer

Github @danmayer