Syntaxhighlighter (http://alexgorbatchev.com/SyntaxHighlighter/) is a great tool which I use here on the blog to add in code snippets to make it easier to read. I’ve thrown together this quick guide on how to get it working in Blogger.It is pretty easy to use but the creator’s host for the SyntaxHighlighter scripts can be a bit slow due to the amount of traffic. So in this case I am going to show you how to host the scripts on Dropbox which is faster. You could host the files anywhere you wanted really. In fact I may move them to a different host, NearlyFreeSpeech. I use this for my wife’s cake website (creationcakes.co.uk) and it has always been great. Simple, cheap, reliable.
Also, NearlyFreeSpeech hosted files are accessible at my work, while the Dropbox domain is blocked  – so the blog looks a bit silly when I view it at work as the code snippets are not properly formatted. This shouldn’t be an issue for many readers though unless you are behind a content blocker that blocks the Dropbox domain.In the end I actually used the files already hosted at the creator’s website as I didn’t want to use Dropbox (not accessible from work) and I wanted to keep my wife’s NearlyFreeSpeech site solely for the use of her own website’s files. I’m going to leave this guide here anyway for other’s reference.
You can find the creator’s files: http://alexgorbatchev.com/SyntaxHighlighter/hosting.html

So how do we get it working….

1 – Download source files for SyntaxHighlighter from: http://alexgorbatchev.com/SyntaxHighlighter/download/

2 – Add the unzipped files to your Dropbox Public folder.

3 – Go to your Blogger settings and click the Template button, then the Edit HTML button. Note you will need to repeat this and the following steps if you decide to later change your Blogger template.

4 – Copy and paste this code into the template, add it just above the “</head>” tag (Ctrl-F to find this but it should only be 10 lines or so from the top):

<!-- Syntax Highlighter Additions START -->
<link href='http://YOUR_DROPBOX_ACCOUNT_SYNTAXHIGHLIGHTER_FOLDER_NAME/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://YOUR_DROPBOX_ACCOUNT_SYNTAXHIGHLIGHTER_FOLDER_NAME/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='http://YOUR_DROPBOX_ACCOUNT_SYNTAXHIGHLIGHTER_FOLDER_NAME/scripts/shCore.js' type='text/javascript'/>
<script src='http://YOUR_DROPBOX_ACCOUNT_SYNTAXHIGHLIGHTER_FOLDER_NAME/scripts/shBrushBash.js' type='text/javascript'/>
<script src='http://YOUR_DROPBOX_ACCOUNT_SYNTAXHIGHLIGHTER_FOLDER_NAME/scripts/shBrushPhp.js' type='text/javascript'/>
<script src='http://YOUR_DROPBOX_ACCOUNT_SYNTAXHIGHLIGHTER_FOLDER_NAME/scripts/shBrushArduino.js' type='text/javascript'/>
<script src='http://YOUR_DROPBOX_ACCOUNT_SYNTAXHIGHLIGHTER_FOLDER_NAME/scripts/shBrushxml.js' type='text/javascript'/>

<script language='javascript' type='text/javascript'>
 SyntaxHighlighter.config.bloggerMode = true;
 SyntaxHighlighter.all();
</script>
<!-- Syntax Highlighter Additions END -->

5 – Change the addresses above to replace “YOUR_DROPBOX_ACCOUNT_SYNTAXHIGHLIGHTER_FOLDER_NAME” with your public Dropbox address.
To find this go to a file in the folder you uploaded on the Dropbox UI, right click and select ‘Copy Public Address’. My address was: https://dl.dropboxusercontent.com/u/2368211/SyntaxHighlighter/syntaxhighlighter_2.1.382/ so I get, for example:

<link href='https://dl.dropboxusercontent.com/u/2368211/SyntaxHighlighter/syntaxhighlighter_2.1.382/styles/shCore.css' rel='stylesheet' type='text/css'/>

6 – Each ‘scripts’ line in the template header relates to a programming language and tells SyntaxHighlighter how to present your piece of code so that it looks good according to that language’s rules. So you can add/remove scripts/brushes based on the languages you plan to use SyntaxHighlighter to present in your Blog. You can see available scripts in the folder you just uploaded to Dropbox. You can explore all the scripts/brushes here: http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/
Note – adding them all will likely slow down your page load times so best to stick just to the ones you need.

7 – Each ‘styles’ line in the template header relates to the overall look of the code snippet. You can explore the styles here: http://alexgorbatchev.com/SyntaxHighlighter/manual/themes/
You can amend which style SyntaxHighlighter uses by editing the HTML header in step 4 above.

8 – You can use various arguments when putting code snippets into your blog, these are mostly described here: http://alexgorbatchev.com/SyntaxHighlighter/manual/configuration/  You can add some of these to the html head tag we inserted into step 4 to change their default values. See bottom of this post for my specific use case to see where to add these.
The ones I’ll most use (add to class definition per step below) are:

• line numbers – turn off: I like my scripts with line numbers and these are on by default but you can switch off using: “gutter: false”
• line numbers – start at: You can tell the snippet to start the line numbering at a custom number using: “first-line: 10”
• highlight – allows you to highlight a specific line for extra attention: “highlight: 2”

How to use
Code Blocks – Eventually we actually get round to how to use in your blog! You simply go to the HTML Mode in the blog composition screen and add the following tags around your code. Any additional config changes / choosing brushes/scripts, etc are all in the first line where we define the class.

<pre class="brush:bash">
YOUR CODE HERE
YOUR CODE HERE
YOUR CODE HERE
</pre>

Inline – Unfortunately SyntaxHighlighter is not great for inline code highlighting. The best it can do is the following but that still puts the code on a line by itself. You may be better off just switching font to Courier and changing the text colour or something else to make it stand out.
This is a sentence with

<pre class="brush:bash; gutter: false"> SOME CODE </pre>

in the middle of it.

A note on ‘tabs’ – You can’t add tabs directly to the Blogger HTML entry screen as it just moves the cursor focus. So it can only be done by copying and pasting from another program. I recommend Notepad++ (https://notepad-plus-plus.org) for all your text editing requirements.

For my own reference:
In the end my html header used was below. Note I also went back to an earlier version of SyntaxHighlighter as the built in toolbar with that version looked much better.

<!-- Syntax Highlighter Additions START -->
<link href='http://alexgorbatchev.com/pub/sh/2.1.382/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/2.1.382/styles/shThemeEmacs.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shCore.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushBash.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushPhp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushPlain.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushPerl.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushxml.js' type='text/javascript'/>

<script language='javascript' type='text/javascript'>
 SyntaxHighlighter.config.bloggerMode = true;
 SyntaxHighlighter.defaults['tab-size'] = 2;
 SyntaxHighlighter.all();
</script>
<!-- Syntax Highlighter Additions END -->

And my default code snippet tags are:

<pre class="brush:bash">
MY CODE...
</pre>

and

<pre class="brush:bash; gutter: false"> SOME CODE </pre>

Useful Sources:
http://www.danielhansen.net/2014/06/how-to-format-code-and-syntax.html
http://oneqonea.blogspot.ca/2012/04/how-do-i-add-syntax-highlighting-to-my.html