Fixing the syntax highlighter

Update: it seems the website of the SyntaxHighlighter no longer exts.

You may have noticed that lately I was having some issues with the syntax highlighter that I use when I post  code. I fixed it now, so you (hopefully) won't see it occur again, but for those who missed it:

This is the code snippet of the topic about image sprites (read it here: 

https://www.thiscouldbeuseful.com/2012/10/image-sprite-magic.html). As you can see something was going terribly wrong as it was displaying extra lines and the line numbering was seriously off.

The syntax highlighter I use for this blog was created by Alex Gorbatchev (make sure to check out his website: https://alexgorbatchev.com/SyntaxHighlighter/) (link intentionally broken as this website seems to no longer exist) as I explained in this blogpost: https://www.thiscouldbeuseful.com/2012/03/adding-syntax-highlighted-code-to-your.html. The highlighter is great, it's easy to use and it does what it should do (except for this little mishap) so thumbs up for Alex Gorbatchev!

Now, back to the issue:
turns out the issue only goes for Chrome (all other browsers are crap, so I didn't even notice that it was browser dependent :)) and is caused by something in the css that set's of one of the latest versions of Chrome.

The problem is this part of the shCore.css file :

.syntaxhighlighter table td.gutter .line {
  text-align: right !important;
  padding: 0 0.5em 0 1em !important;
}

The best and cleanest way to fix this, would be to update the specific file and reference it. Unfortunately, in my case that is not possible since I directly link the file from Alex Gorbatchev's website. So I just added some extra css directly to the Blogger template. Placing this strategically under the link of the shCore.css file will overwrite the orginal piece of code!

Here's how to do it:

• Go to the home page of your blog.
• Click "Template" and find the link "Edit HTML".
• You'll be given a warning that this can be tricky, so you might want to save the current template to a file first.
• In the HTML code, look for the place where you added the links for the syntax highlighter: the easiest way to do this is by searching for the word "shCore.css" or for the head-tag since you should have placed the code for the syntax highlighter right above this tag. It will look something like this:

<script src="https://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js" type="text/javascript"> 
<script language='javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();
</script>

And you should change it, to look like this:

<script src="https://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js" type="text/javascript"> 
<script language='javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();
</script>
<style>
.syntaxhighlighter table td.gutter .line {
  text-align: right !important;
 padding: 0 5px  !important;
}
</style>

• Save and close the template.

That's it, that small change will clean up the extra lines and strange line numbers!


Could be useful, right?