If your blog posts often contain some code snippet then read this post.
While embedding code on your blog, you might have felt these problems
1)Syntax highlighting
2)Escaping (i.e. if ur code contains html then you need to escape your code)
3)Code editing & Versioning (i.e. Once you got the escaped & highlighted code, editing becomes tough)
All these problems will be solved if you host all your code snippet on
GitHub as Gist
Solution is: use GitHub Gist!!
As most of you already be knowing that GitHub is a web-based code hosting service that uses the Git revision control system. GitHub has a feature called Gist where you can store (and version it) small code snippet without actually going through any git problems.
You can version edit and host your code as Gist, additionally you can embed this code on your blog
which comes with syntax highlighting and character escaping for free!
One Problem Though!!!
Github Gist embedding comes as script tag (
which loads your Code).
Problem with putting such code in middle of the blog post is, When user loads your page, entire page loading will be blocked until this script is loaded .i.e. Your blog page will load slower!!
So how to keep it faster?
Typically to solve this problem people use script tag injection in DOM using some light weight script. This method will not work here because GitHub Gist embed method uses document.write to bring the content inline.
Other simple solution is Use iframe, I have created a small web handler on
PurpleGene.com to embed this code and then you can include this page as iframe. note that iframes load in parallel.
Here is How
suppose you have a gist like this
https://gist.github.com/764648
Then embed code will be
<script src="https://gist.github.com/764648.js?file=Qompress.cs"></script>
Now If you want to embed this code just
1)Replace script tag with iFrame
2)Append URL http://www.purplegene.com/script?url= in src field
3)Beatify by giving attribute as width="100%" height="300" or what ever you want.
Your final code will be
<iframe width="100%" height="300" src="http://www.purplegene.com/script?url=https://gist.github.com/764648.js?file=Qompress.cs"><br />
</iframe>
Thats it Have fun!!!!!!
PS:
PurpleGene.com is owned by me, so assume it to be safe, if do not trust me then you can simply go ahead and create a small app on appengine for free and use it!