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>
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>
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!
Hey nice one,but how am i supposed to experiment it??
ReplyDeleteWhat should i do to know it??
Hi, can you provide the source code for your script on appengine ?
ReplyDeleteThanks
@oohazard
ReplyDeleteRequest handler for url "/script" is here
class Script(webapp.RequestHandler):
def get(self):
url = self.request.url;
myurl="http://%s/script?url="%(os.environ['HTTP_HOST'])
url=url.replace(myurl,'');
template_values = {
"URL":url
}
path = os.path.join(os.path.dirname(__file__), 'script.html')
self.response.out.write(template.render(path, template_values))
django Template is here...
<!DOCTYPE html>
<html>
<title>ScriptToFrame:PurpleGene</title>
<head>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.4.2");
</script>
<script>
//To Open all link in new window
$(document).ready(function() {
$("a").each(
function(){
$(this).attr('target', '_blank');
}
)
});
</script>
</head>
<body>
<script src="{{URL}}">
</script>
thanks!
ReplyDeletethat was a fast reply :)
By the way, you can use http://gist-it.appspot.com/ in combination with your code
ReplyDeleteto embed github code (no need to create a gist)
wow! cool :)
ReplyDeleteI have seen in a blog where result checking is emebed. How can i do it?
ReplyDelete