Wednesday, June 6, 2012

First post first blog post.

I had hoped to write about how awesome I am or some cool project I am working on, but no. All my projects need code which needs syntax highlighting and I cannot seem to get it working so instead I will write about how badly I am failing at making this work.

So, a code blog needs syntax highlighting and a Google query showed me that SyntaxHighlighter by Alex Gorbatchev is the way to go. It is using JavaScript/HTML and CSS for highlighting on the client so no server side code is needed. Cool.

And there is even lots of integration guides telling you how to make it work on many different blogging sites and CMSes so what can go wrong?

Well I succeeded in doing something ain't working.

Blogger has disabled the 'Edit HTML' button for editing the template for some reason. Another quick Google search offered me the solution, so I have added the CSS links and JavaScript source files that the many guides told me.

So I added a first (now deleted) blog post with some testing code:

<pre class="brush:c">
#include <stdio.h>

int main(int argc, const char * argv[]) {
    printf("Hello, World!\n");
    return 0;

But for some reason it didn't work. The code was just shown plain, simple and boring as with a normal <pre>. Why?

Viewing the source revealed that the scripts were in place. Pressing F12 in Google Chrome showed me that the files were in fact downloaded. A breakpoint on the JavaScript showed me that the code was run and the debugger tells me that no exceptions are thrown and everything is just fine. So why wasn't it working?

Well...apparently Blogger uses Ajax for retrieving the blog post text and then inserts it into the page. This happens AFTER the JavaScript has run so of course SyntaxHighlighter cannot format my code. It isn't there yet!

I press F12 again and run 'SyntaxHighlighter.all();'  from the console. Nothing happens!

Maybe SyntaxHighlighter doesn't like being called twice so I commented out the 'SyntaxHighlighter.all();' call from the template and ran it again manually. Still nothing!

Maybe there is an error in SyntaxHighlighter, so I create a static test page on my machine which loads all the files and contains a code snippet. To my dismay it looks fine and well highlighted.

This is where I am now. Failing!
Or maybe Blogger is...I really cannot tell but life must go on so I archive this issue in my "technical debt" tray for later. Code snippets will look like crap until I (or someone else) resolve this issue.

So much for looking cool in my first post.

No comments:

Post a Comment