Saturday, March 26, 2011

SyntaxHighlighter Review

I have finally managed to display source code correctly by using Syntax Highlighter. [1] I've gone through absolute hell to actually get this thing working though. I don't know much about HTML so you can imagine that I had quite a frustrating journey. I went through 6 different blogs which all showed different ways of installing it, none of them worked with blogger unfortunately. I finally found a blog that showed how to correctly install it on blogger.

Installation
The blog is called heisencoder [2], check it out if you'd like to learn how to install syntax highlighter on your blog too!

Demo

//code is displayed like this!


Impressions
It's nice, the code is displayed mostly correctly(see issues section). The code is displayed with line numbers, and alternating colors so you can separate one line from another.

It also has a "view plain" option integrated, this allows you to see the code in plain text and change around the source code before you print it. There is also a print feature, which if you click the print button, will print only the source code and ignore the rest of the blog. Which is awesome, no more parsing out the code, pasting it into notepad, and hitting print in order to save some trees. Finally there is a "?" option that will show you which version of SyntaxHighlighter the blogger is using, version 1.5.2 in my case.

Issues
Despite having it installed correctly, there are still some issues I have with SyntaxHighlighter. The first issue is with the actual code that it displays, if there are include statements in your code, it will insert HTML end tags as if the include statements were in HTML. Very frustrating to say the least, here is an example.


#include

As you can see it inserted a closing statement to my include stdio.h statement at the beginning of the program! It will do this with every include statement, so the more you have, the more bloated the code will look at the bottom. I noticed this problem doesn't happen on other blogging websites so it may be bloggers problem.

The other issue is with the pre tag, which must be included in order to separate the code from normal text, you must give it a name in quotations and a class type, also in quotations. I used C so the class would be "cpp". The name is where the problem arises, I tried naming a program "target3.c" and pasting the code between the pre tags. When the post was published, the code would be displayed as normal text as if ignoring SyntaxHighlighter completely! The solution that I found was to name everything "code" as this works every time.

That's all for now, I haven't played around with SyntaxHighlighter too much yet so if anything else comes up I'll be sure to post. I'm just glad I have a somewhat nice way to display source code.

EDIT: So I just found out I have an old version of SyntaxHighlighter, version 1.5.2. This may be the problem, I will look into updating the sources so that they point to an updated version. Until then, this is my short 1.5.2 SyntaxHighlighter review.

References
[1] http://alexgorbatchev.com/SyntaxHighlighter/
[2] http://heisencoder.net/2009/01/adding-syntax-highlighting-to-blogger.html

No comments:

Post a Comment