How to Format Code and Syntax Highlighting to Blogger

I wanted to add code to my Blogger blog and have it format the same way as it does inside the IDE. After some searching I found a way to do this, while keeping the code inside Blogger (i.e. not stored on another service such as Gist, or PasteBin).

The script to format the Code is called SyntaxHighlighter. It's great, but getting it to work with Blogger was slightly confusing, and SLOW. The tutorials around the web for this are pretty outdated and all use the scripts which are hosted on the SyntaxHighlighter website. After some playing around I found that the host was causing the scripts to run slowly, and that self hosting significantly increased the speed.


<?php
$example = range(0, 9);
foreach ($example as $value)
{
 echo $value;
}


The best tutorial I found for getting SyntaxHighlighter to work is here, and my procedure basically follows this process, but with a different host location.

First download the source files for SyntaxHighlighter here.

Next you need to host the files on the web. Blogger doesn't let you upload files, but this is no problem. I used Dropbox to host the files. Simply add the unzipped files to your Dropbox Public folder.

Go to your Blogger admin screen, and click on Template.

Then click Edit HTML. If you get a warning screen, click proceed.

Next find the <head> tag. This can be done by hitting ctrl+F and using the find function.

Now copy and paste the following code before the </head> tag.

<!-- Syntax Highlighter Additions START -->
<link href='https://dl.dropboxusercontent.com/u/YOUR_DROPBOX_ACCOUNT/syntaxhighlighter_3.0.83/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='https://dl.dropboxusercontent.com/u/YOUR_DROPBOX_ACCOUNT/Website/syntaxhighlighter_3.0.83/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='https://dl.dropboxusercontent.com/u/YOUR_DROPBOX_ACCOUNT/Website/syntaxhighlighter_3.0.83/scripts/shCore.js' type='text/javascript'/>
 

<script src='https://dl.dropboxusercontent.com/u/YOUR_DROPBOX_ACCOUNT/Website/syntaxhighlighter_3.0.83/scripts/shBrushPhp.js' type='text/javascript'/>

<script src='https://dl.dropboxusercontent.com/u/YOUR_DROPBOX_ACCOUNT/Website/syntaxhighlighter_3.0.83/scripts/shBrushArduino.js' type='text/javascript'/>

<script src='https://dl.dropboxusercontent.com/u/YOUR_DROPBOX_ACCOUNT/Website/syntaxhighlighter_3.0.83/scripts/shBrushxml.js' type='text/javascript'/>

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

At each of the places -'href=''https://dl.dropboxusercontent.com/u/YOUR_DROPBOX_ACCOUNT/syntaxhighlighter_3.0.83/styles/file.css'
you need to substitute the web address of the file. To get this in Dropbox, simply go to the file on the Dropbox UI, right click and go 'Copy Public Address'.

Each of the lines -
<script src="https://dl.dropboxusercontent.com/u/YOUR_DROPBOX_ACCOUNT/Website/syntaxhighlighter_3.0.83/scripts/shBrushPhp.js" type="text/javascript">
correspond to a programing language. If you want to be able to format a particular language, then you need to provide a script for that language. You can add them all, but this might slow down your pageload times.

The HTML should look like this.
Now Save Changes and close.

To add code in a post, Go to HTML mode. You need to wrap your code as shown, and tell the script which language you're working with.

So the code
 
<pre class="brush:php;first-line:10">
&lt;?php
$example = range(0, 9);
foreach ($example as $value)
{
 echo $value;
}
</pre>

will look like

<?php
$example = range(0, 9);
foreach ($example as $value)
{
 echo $value;
}

Getting Arduino Code to format correctly

I do a bit of Arduino coding, and wanted Arduino to format correctly; however there isn't an official Arduino brush (script) to format the language correctly using SyntaxHighlighter. I did find an unofficial script which does the job well.

The script can be found here.  The script is actually for a wordpress plugin, but the plugin is a fork of SyntaxHighlighter and works fine.

Place the shBrushArduino.js file in your Dropbox/scripts/ folder. Then add the new script in the Blogger template as above.