How to Install Syntax Highlighter / How to Display Code in HTML

HOW TO INSTALL SYNTAX HIGHLIGHTER

1) Go to Blogger Dashboard > Design > Edit HTML
2) Search for </head>
3) Copy and paste the following code before </head>. Double click code to select all.

<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>

<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/>

<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/shBrushPlain.js' type='text/javascript'/>

<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'/>

<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>

4) Save template
5) Donate to Alex Gorbatchev because hosting all this code is costing Alex a lot of money.

HOW TO DISPLAY CODE

1) In your post, put your C++ code between the following

<pre class="brush: cpp">
</pre>

NOTES

If you are displaying html code you made need to replace the following

1. < with &lt; 
2. > with &gt;

Grr. My code for using Syntax Highlighter broke when I changed a few things on Blogger via the Blogger tools. Could not remember how to fix it which told me that this was something I should write up.

To display <
use &lt;

To display &lt;
use &amp;lt;

REFERENCES

+ Adding a Syntax Highlighter to your Blogger blog
+ How to display code properly in your blog posts