Blog: How to professionally highlight your blog code using (Syntax Highlighting)

Hello everyone

Recently I have searched for a way to automatically keep my code snippets formatted and colorized with proper highlighting & syntax, without painful self-highlighting way, and then Blogger/Wordpress doesn't have the immediate solution out here!

I found an excellent open source tool called Syntax Highlighter is available.
This is ready to use out of box 100% Javascript based SyntaxHighlighter with extensive features & multiple other options.

SyntaxHighlighter can be either downloaded & used on your own webserver or if you have a blog on Blogger, this can be directly used as well.

To downloaded SyntaxHighlighter for your own personal Webserver/Hosted
site: http://alexgorbatchev.com/wiki/SyntaxHighlighter:Download
Configuration Steps: http://alexgorbatchev.com/wiki/SyntaxHighlighter:Configuration
Brush Aliases: http://alexgorbatchev.com/wiki/SyntaxHighlighter:Brushes


1- Installation

In order to install & use it on Blogger, follow the below simple steps:

1- Go to your Template Layout->Download your template as a backup first.

2- Now click Edit HTML for Layout & then paste the below code in your Template before your tag ends.

Note this is pointing to the latest released version v3.0.83;

3- Save the template & open you blog in IE & Firefox to test if any javascript errors are reported as this might conflict with various other embedded scripts in your template.

This completes the direct embedding of SyntaxHighlighter in your Blog. Now let's proceed how to use it in your posts:

2- Usage:
For SyntaxHighlighter 2.0 & above:
Any code you want to be placed & displayed using SyntaxHighlighter must be enclosed in:

Note that we have option of using different brushes for highlighting different type of codes..e.g. Java/HTML/ASP/C++ etc
In order to choose the appropriate brush, following are the various brush aliases supporting the corresponding code highlighting:

actionscript3
bash, shell
c-sharp, csharp
cpp, c
css
delphi, pas, pascal
diff, patch
groovy
js, jscript, javascript
java
jfx, javafx
perl, pl
php
plain, text
ps, powershell
py, python
rails, ror, ruby
scala
sql
vb, vbnet
xml, xhtml, xslt, html, xhtml

Above aliases can be used at: class="brush: alias" while embedding your code in the Blog.

Another easy way supported by SyntaxHighlighter is to enclose the code within:

The only catch involved out here is, you have to use encoded HTML while embedding within <pre> tags.
Your code can be converted to HTML Encoded using following easy to use Tool:

http://www.string-functions.com/htmlencode.aspx

Just copy paste your code & generate the encoded HTML Code. Paste the encoded HTML within
<pre> tags for correct rendering. Failure to do so might render wrong code, especially < & > brackets.

Some examples of codes in my Blog:
Professional java barcode API

Keep Blogging professionally! :)