Recently I decided to switch my blogger template to use one of Google's dynamic templates since I really like the possibility to switch the presentation of the blog posts
Even though I thought this would be pretty straight-forward as it turns out I run into a problem. I use Alex Gorbatche's SyntaxHighlighter JavaScript plugin to "prettify" my code, and as it turns out Dynamic Templates and the Syntax Highlighter do not play well together (apparently the content of the posts is loaded after the script has been bootstrapped so you end up with ugly unreadable bits of code.
After goggling here and there I found a few workarounds some worked, others not.. (I'm sorry I do not have the links now, but they are easy to found). Those who worked basically consisted in altering my previous posts to give an id to each of the pre that I had used before which was unacceptable for me. So here is the solution that I came up with by inspiring myself of the different workarounds out there .
Basically what my workaround does is to delay the moment where the Highlighting will be performed to after the posts content has been loaded and then iterate through all the appropriate html tags in your code and apply highlighting
1.- Add SyntaxHighlighter's CSS resources in the template's head
<head>
<link href='http://alexgorbatchev.com/pub/sh/3.0.83/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/3.0.83/styles/shThemeMidnight.css' rel='stylesheet' type='text/css'/>
2.- Add Javascript resouces and snippet to delay the script's bootstrapping at the bottom of the page (before the body closing tag
<script src='http://alexgorbatchev.com/pub/sh/3.0.83/scripts/shCore.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/3.0.83/scripts/shBrushJava.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/3.0.83/scripts/shBrushSql.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/3.0.83/scripts/shBrushXml.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/3.0.83/scripts/shBrushXml.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/3.0.83/scripts/shBrushBash.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/3.0.83/scripts/shBrushJScript.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/3.0.83/scripts/shBrushPerl.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/3.0.83/scripts/shBrushPlain.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/3.0.83/scripts/shBrushScala.js' type='text/javascript'/>
<script language='javascript' type='text/javascript'>
// define usual options
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/2.1.382/scripts/clipboard.swf';
function doHighlights(){
if(jQuery("pre").length > 0){
if(hasConsole()){
console.log("About to highlight fields");
}
jQuery("pre").each(function( index ) { SyntaxHighlighter.highlight(undefined, jQuery( this ).get(0)); });
}
}
function hasConsole(){
return typeof console != "undefined";
}
setInterval(doHighlights, 500);
</script>
</body>
- I tried using jQuery's document ready which I find more elegant than the JavaScript timeout but it didn't work probably because it was still executed too early
- Here running the highlight function every 500 milliseconts which I know it's not great...
- Finally please note that the above code snippet will apply to all the pre tags in your code (which is OK for me since I only use them to display code) but it might affect your blog layout if you use them for other purposes; in that case just modify the script to check for CSS classes corresponding to those used by SyntaxHighlighter
I discovered your blog the usage of msn. This is a really well written article. I will make sure to bookmark it and return to read extra of your useful information. Thank you for the post. I will definitely return.
ReplyDeletewebsite design
Hi thanks for the kind words, I'm glad the article helped you in some way!
DeleteThanks.
ReplyDeleteIt works without adding any additional snippet to HTML code.
Good news! thanks for the feedback
ReplyDeleteThousand of syntax highlighter view post on dynamic view... but no one that work... knowledge.sicilia.sx
ReplyDeleteHi I was having problems too with it, so I updated the code to rather listen for events and it works for me now, let me know if it does for you.
DeleteMany thanks, very useful article!
ReplyDeleteHi thanks for the comment; glad it helped you!
ReplyDelete