Saturday, January 23, 2010

How to insert a link tag in Blogger / Blogspot html - Hacking Blogger with JQuery



This article will show you how to insert a <link> tag in the header of the html when in the "Edit HTML" tab of Blogger/Blogspot. The example I give involves using the prettify library.

The background behind why I want to do this
I wanted to use prettify to colorize my code in blogspot. This fantastic awesome tool requires only a .js file and some CSS. Blogger allows you to insert at link to an external Javascript file in the "Edit HTML" tab. It does not however allow an external CSS file. I find this really annoying. I do not want to copy and paste all this CSS every time I insert code. So I thought, if I can insert a Javascript file then maybe I'll just hack it with my favorite tool JQuery :)

The first order of business is to include JQuery:
<script src="http://your.site/tools/libraries/jquery-1.4.min.js" type="text/javascript">
</script>

Next we insert the CSS file into the <head> element:
<script type="text/javascript">
    function hackHead() {
        var src = '<link type="text/css" rel="stylesheet"  href="http://your.site/tools/libraries/prettify.css"/>'
        $("head").append(src);
    }
    hackHead();
</script>

Now we add the Prettify library.
<script src="http://your.site/tools/libraries/prettify.js">
</script> 

Finally, at the very bottom of your page you need need to call prettyPrint()
<script type="text/javascript">
  prettyPrint();
</script>


Update: Ok I give in. JQuery is overkill. See my new post for a neater way to do this.

0 comments:

Post a Comment