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.
No comments:
Post a Comment