I've used a few different techniques for embedding source code in this site over the years. Here's another one - this time taking source code directly from your github repo.
As in Embedding feeds in google sites and Displaying analytics data on site pages I'm using a dynamically resizing one. Like this your pages aren't clogged up with endless pages of code since they reveal when you hover over an image.
Here's an example below - just hover over the image and you'll get the code for this gadget. The downside of this approach though is that you have to use the up down arrows to navigate through the source since moving your mouse away from the source code hides it.
So clicking on the source while it's visible will lock it in position so it's just like normal page content! Clicking on it again will unlock it.
The hosted address for my version this gadget is as below. You can use it or copy and make your own.
To insert, go to insert/..More gadgets and insert by URL.
It's hosted at https://storage.googleapis.com/goinggas.com/public/hosting/sites/xliberation/xml/prettygit.xml
Note: this gadget now has some enhanced features , including the ability to render markdown douments - see Enhanced Github gadget for details
These are fairly self explanatory. I recommend you set the initial height to a fairly small value - I use 100 pixels. It will adjust to the height of actual image once it sees it. The default image is as below, but you can change it to some other by modifying the image link. The text that sits next to the image is the image label preference in your gadget,
Services > Desktop Liberation - the definitive resource for Google Apps Script and Microsoft Office automation > Fancy gadgets on Sites >