Adding code snippets to blogg post using SyntaxHighlighter

I had problems posting code snippets, I didn't know how to do it properly so
I just posted the code as image. Which, of cause, is terrible thing to do.

I took the time to do a little research on the subject...

Turns out you can use "SyntaxHighlighter" to nicely post code snippets.

Nicely is the matter of taste... I don't really like the appearance of the snippet that you get from this tool but for now it will do.


Here are the steps I did to get this thing working:

step 1: In your blogger, go to Dashboard -> Design -> Edit Html.
step 2: Under "Edit Template" check the "Expand Widget Templates" check box.
step 3: Find </head> and paste all this mess just before it:

<pre class="brush: csharp">
<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"> <br /><script src="'http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js'" type="'text/javascript'/"> <br /><script src="'http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js'" type="'text/javascript'/"> <br /><script src="'http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js'" type="'text/javascript'/"> <br /><script src="'http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js'" type="'text/javascript'/"> <br /><script src="'http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js'" type="'text/javascript'/"> <br /><script src="'http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js'" type="'text/javascript'/"> <br /><script src="'http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js'" type="'text/javascript'/"> <br /><script src="'http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js'" type="'text/javascript'/"> <br /><script src="'http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js'" type="'text/javascript'/"> <br /><script src="'http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js'" type="'text/javascript'/"> <br /><script src="'http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js'" type="'text/javascript'/"> <br /><script src="'http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js'" type="'text/javascript'/"> <br /><script language="'javascript'"> <br />SyntaxHighlighter.config.bloggerMode = true;<br />SyntaxHighlighter.config.clipboardSwf = &#39;http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf&#39;;<br />SyntaxHighlighter.all();<br /></script>
</pre>

step 4: Save template.
step 5: Make a test post by coping this code -

<pre class="brush: csharp">
// Comment
public class Testing {
public Testing() {
}
public void Method() {
/* Another Comment
on multiple lines */
int x = 51;}}
</pre>

When published, this code will look like this -

// Comment
public class Testing {
public Testing() {
}
public void Method() {
/* Another Comment
on multiple lines */
int x = 51;}}

So you get the idea, right?

Every time you wish to publish a code snippet just
paste it between <pre...> and </pre> tags.

One last important thing to mention: if you wish to publish snippet that has "<" or ">" in it or some other meta character you will get an error, you have to replace all those characters to publish them properly, here is the list of "bad" meta characters and their replacements -

(1) <
(2) >
(3) &

(1) <
(2) >
(3) &

Check out http://fiftyeightbits-precode-code-window-plugi.software.informer.com/
this tool will do the replacement for you, (it also adds itself to Windows Live Writer, if you using one) this tool requires .NET Framework 3.5, which is easy to install from Microsoft site.

Here image for reference -