In my last blog update post, I listed the new WordPress plugins that I installed here on JaypeeOnline. I also mentioned that I would do a review of those plugins so you guys would have an idea on how they work and how I use them here.

Today, I’ll be sharing with you the Google Syntax Highlighter WordPress plugin created by Peter Ryan. It integrates the Google Syntax Highlighter by Alex Gorbatchev to any WordPress-powered blog. This is the plugin I use to display codes which you might have noticed in my recent articles like HowTo: Allow Google Reader Access To Hotlink-Protected Images and HowTo: Widgetize a WordPress Theme.

Features:

• 100% client side, no server dependency
• Multiple languages support
• Wide browser support
• Very lightweight

Languages Supported:

• C++ (cpp, c, c++)
• C# (c#, c-sharp, csharp)
• CSS (css)
• Delphi (delphi, pascal)
• Java (java)
• Java Script (js, jscript, javascript)
• PHP (php)
• Python (py, python)
• Ruby (rb, ruby, rails, ror)
• Sql (sql)
• VB (vb, vb.net)
• XML/HTML (xml, html, xhtml, xslt)

Screenshots:

.htaccess file

WordPress theme sidebar

Previously, when I wanted to display a piece of code within my post I would have to copy and paste the code into a text editor, take a screenshot, edit it and insert the image into my post. It was a tedious and very time consuming task.

WordPress has a built-in tag called “code” that lets you display and specify a certain line of text as code. So why am I not using it? The problem with this is that it doesn’t recognize HTML tags and in order for it to work you’ll have to use character entities or extended characters. One alternative is to use the “pre” tag which is the one used by the Google Syntax Highlighter plugin. The “pre” tag like the “code” tag displays the tagged text as monospaced type but the difference between the two is that the “pre” tag exactly reproduces everything inside the “pre” tags.

What makes Google Syntax Highlighter cool is that it displays the code the way advanced text editors do. The parameters are color coded and there are line numbers that makes it easy to find a specific line of code. Aside from that, the Google Syntax Highlighter plugin also gives the user an option to see the code in plain text and to copy the code into the computer’s clipboard. This plugin lets you implement the “pre” tag and display the code in style easily without having to worry about messing with the WordPress stylesheet.

So how do you use the Google Syntax Highlighter plugin? All you need to do is download, install and activate the plugin and make sure you read the Usage Directions. Then you can start using it. Just specify the code snippet in your blog post/page and you’re good to go.

Here’s a sample of how I was able to display the code for screenshot #2 or the code for the WordPress theme sidebar.

[php]
<pre name="code" class="php">
<?php
if ( function_exists(‘register_sidebar’) )
register_sidebar(array(
‘before_widget’ => ”,
‘after_widget’ => ”,
‘before_title’ => ‘<h4>’,
‘after_title’ => ‘</h4>’,
));
?>
</pre>
[/php]

Copy the piece of code that you want to display and paste it between the line highlighted in red. Replace the value of “class” to the specific language that the code is written in. In the example, I put php because I needed to display a piece of php code.

The Google Syntax Highlighter WordPress plugin is very easy to install and doesn’t use much resources. Its very useful if you want to display codes within your post.

Check out the Google Syntax Highlighter WordPress plugin.

What do you think of the Google Syntax Highlighter WordPress plugin? Are you already using it or have tried it before on your blog? Do you know of other WordPress plugins that have the same functionality? Please share your thoughts. Thanks for your time!