Monday, February 23, 2015

SyntaxHighlighter Fix for Blogger Dynamic View

After moving from old theme to the new Blogger Dynamic View theme, I hade my biggest issue: How to enable my SyntaxHighlighter again? I'd prefer find a solution that reformat ALL my blog posts throughout the years.

One solution I found was adding a Javascript snippet to all my posts (http://kevin-junghans.blogspot.com/2013/01/adding-syntaxhighlighter-to-blogger.html). But this will require A LOT of work too! So what I did was a bit of nasty yet effective solution:

In the head code I already have this code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!--SYNTAX HIGHLIGHTER BEGINS-->
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/>
 
<script language='javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = &#39;http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf&#39;;
SyntaxHighlighter.all();
</script>
<!--SYNTAX HIGHLIGHTER ENDS-->

So I added this interval code after the last javascript line:

1
2
3
setInterval(function(){
  SyntaxHighlighter.highlight();
}, 5000);

This way I will ensure that syntax highlighting is always enforced, and that it will work with infinite scrolling too.

Now I can enjoy my syntax highlighting with the new dynamic view theme.