How to add source code to your blog with syntaxhighlighter

Some of you might expect blogger to come with a button/script/widget to let you add source code into your post and be displayed like plain text or code without being seen as code and included into the theme. Well you're wrong and trust me I looked for widgets and read on blogger forums about scrips and even tried to update to a newer theme to get the extra tools for this. It's nothing out there from them. Don't get me wrong I did try to use
 
put quote here
and for code put code here
at no avail.

So you either do your own research or don't add code at all as it wont show up without a good script and wait for blogger to come up with something. I went for the first option. Throughout my search 4 blogs stand out and they all talk about SyntaxHighlighter the one I eventually went for and the google-code-prettify.

At last I found this blog of Matthew V Ball where it's all nicely explained and easier to implement into the theme code:
http://heisencoder.net/2009/01/adding-syntax-highlighting-to-blogger.html

The first problem I had with it was that it would't save my theme since there was a problem with the XML script so after reading few comments I gave a try to changing the end script tag for the step 3. I replaced the /script to script/ and all got saved.

However after adding the code to my post on publish post I get the "ERROR
Your HTML cannot be accepted: Tag is broken: A" All the code should be in between div tags pre name="code" class="cpp" text here and end with pre


What I did to get it to "work" was to tick the box for "Stop showing HTML errors for the body of this post". Now I get the code and everything but as you might see the php code is duplicated and I have some extra closing tags which should't be there. This is not perfect but as least it displays something. Another problem I have with it is that it adds spaces between code lines that I don't have in my post, as if there were /br lines.

This is the same script but not clear enough on what I need to do mainly because on www.alexgorbatchev.com is a newer version of SyntaxHighlighter with different files and I didn't know where and how to add the them to the google page and the css files come in different names and I don't know which is the one I should use..
http://pleasemakeanote.blogspot.com/2008/06/posting-source-code-in-blogger.html

Another interesting post I found here: http://www.newbloggingtipz.com/2009/08/how-to-add-html-codes-in-blogger-posts.html I tried it and I get the code box but the code is converted back to code so nothing is displayed. I'm not sure it works with more then html codes.

Then I found this blog of Viviann which again is not fully detailed to explain the whole process to make the script work.
http://vivianningyang.blogspot.com/2009/05/how-to-post-source-code-in-blogspotcom.html

If anyone has any ideas on how to make this work properly it would be greatly appreciated.

Comments

I have no words for this great post such a awe-some information i got gathered. Thanks to Author.
Really, this is a fantastic blog with full of valuable information. Hope this can be help me in upcoming time. Thanks for sharing such type of information.
David said…
I found your blog also searching for a solution to this. Your experiences are helpful and the links even more so. Much appreciated!
kady said…
You're welcome David.. If you have the same problem as me and happen to find a solution could you post it and pass on the link..It would be very helpful.. I find it very teadious that I still haven't figured it out how to make it work.. Anyways, I'm glad you find the post useful :)
website design said…
Very good written article. It will be beneficial to anybody who utilizes it, including yours truly. Keep up the good work.
website design

Popular posts from this blog

How to assemble your Wacom Intuos pen

Wacom Intuos4 pen stylus repair

How to fix your Wacom Intuos4 pen stylus