Sunday, October 4, 2009

Source code high-light in Blogger

I have used the recipe from here:

sunday-lab: Source code high-light in Blogger

However, I made the following modification: used Blogger's layout editor to add a "Text/Html" widget with the following code:

<script type="text/javascript"><!--
window.onload = function(){
prettyPrint();

};


// prettyfy.js
... code goes here ...
// end prettify.js

--></script>

<style type="text/css">
... css styles go here
</style>



Note the "window.onload" above -- this means we don't have to modify the HTML template and the "body" tag. Everything we need to use "pre" with "class='prettyprint'" is contained within the fragment above.

The reason one would want to set all this in the Text/HTML widget in the Layout, rather than in the HTML template, is that the template is overwritten each time one changes the blog's template.

No comments: