Pages

Faster and Better way to embed code on blog

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!

7 comments:

  1. Hey nice one,but how am i supposed to experiment it??
    What should i do to know it??

    ReplyDelete
  2. Hi, can you provide the source code for your script on appengine ?
    Thanks

    ReplyDelete
  3. @oohazard

    Request 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>

    ReplyDelete
  4. thanks!

    that was a fast reply :)

    ReplyDelete
  5. By the way, you can use http://gist-it.appspot.com/ in combination with your code
    to embed github code (no need to create a gist)

    ReplyDelete
  6. I have seen in a blog where result checking is emebed. How can i do it?

    ReplyDelete

Your comment will inspire me, Please leave your comment