Adding source code to Blogger

I have been trying for quite some time to add source code to my blog. Just copying and pasting the code works fine, but there is no proper formatting or colours used in normal source code editors. After browsing the internet and reading many examples, I finally came across this website that helped me get it done.

I have used the SyntaxHighlighter script and from what I have seen, this seems to be the most used method. It supports a number of different programming languages and once set up, very easy to implement.

Please back up your blog before trying this as you need to edit the html template. From your Dashboard, navigate to Template, and then select Edit HTML. A warming will pop up so select Proceed. The HTML template will now be displayed.

Navigate down in the template to find </head>

Copy the code below and paste it above </head>

Preview your template to ensure that it still looks ok. If all is fine, then save the template and close the editor.

The next step is to make the script work. You do this by using the <pre> and </pre> HTML tag. In between these tags is where you add your code. You also need to specify which script to use depending on what language your source code is in. Here is the example I used to display C# source code.

private void UpdateCounter()
{

  if (iCounter.Value < 50000)
         
{
                iCounter.Value++;

   {
        
}
            else
        
         iCounter.Value = 1;
            }
}

You need to add the tags and code in the HTML editor. Once the source code has been added, then you can go back the the text editor to complete the post.

That's about it. Once the template has been edited and your set up is correct, adding source code it pretty easy.

Greg