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="" type="text/javascript">

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=""/>'

Now we add the Prettify library.
<script src="">

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

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


Post a Comment