WP Plugin Review: Google Syntax Highlighter


UPDATE: I’m no longer using this plugin, the Google Syntax Highlighter because as of this time it is not compatible with WordPress 2.8+. I’ll be posting about the new syntax highlighter WordPress plugin that I’m using so stay tuned for it.

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
Google Syntax Highlighter Plugin

WordPress theme sidebar
Google Syntax Highlighter Plugin

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!

Owner and editor of JaypeeOnline. Self-proclaimed geek. New media writer and consultant. WordPress advocate. Loves blogging, gadgets, video games and sports. You can follow him on Google+, Facebook or Twitter.

19 Comments

  1. MindLeaks

    November 24, 2010 at 11:18 PM

    I have problem with working on this in my blog. I will try the one you stated here. Thanks for the tip.

  2. JP Habaradas

    August 21, 2010 at 9:21 PM

    @jehz – Yep, tama – SyntaxHighlighter Evolved ni Viper007. :D

  3. jehzlau

    August 21, 2010 at 9:19 PM

    ayun nakita ko na! it’s SyntaxHighlighter Evolved by Viper007? Tama ba? O__O

  4. jehzlau

    August 21, 2010 at 9:17 PM

    anong syntax highlighter gamit mo after ng sentence na

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

    Hindi sya Google Syntax Highlighter diba? O__O

  5. JP Habaradas

    April 21, 2010 at 1:20 PM

    @CSSRex – I no longer use this plugin here on my blog because its not compatible with WordPress versions 2.8+. What I use now is the SyntaxHighlighter Evolved plugin.

  6. CSSReX

    April 21, 2010 at 1:17 PM

    I have installed this plugin however not able to understand how can we enable scroll bars. Does it have that option?

  7. Mike

    August 5, 2009 at 10:07 PM

    hi Jaypee, I visited your blog a month ago looking for this kind of plugin. what syntax highlighter plugin are you using now? i need to insert codes to my blog.. thanks!

    Glad to see your new posts btw!

  8. JP Habaradas

    July 13, 2009 at 9:35 PM

    @Adi – Thanks for pointing this out. I didn’t know that the Google Syntax Highlighter plugin wasn’t compatible with WordPress 2.8+ and only found out after you mentioned it. I’ve uninstalled the Google Highlighter plugin and replaced with one that works with WordPress 2.8+. I’ll be writing a review about it soon so stay tuned for it.

    Thanks for stopping by and for sharing. :)

  9. Adi

    July 13, 2009 at 9:32 PM

    Do you think this plugin compatible for WP 2.8 + ? Coz when I use in 2.81, the code not shown properly..

  10. JP Habaradas

    May 11, 2009 at 1:05 PM

    @Jehzeel – For the Google Syntax Highlighter plugin yes, but with the new plugin that I’m using, you don’t have to do anything except copy and paste the code, wrap it with the right code wrapper and you’re good to go. ;)

  11. Jehzeel Laurente

    May 11, 2009 at 1:00 PM

    teka.. yung “<” gagawin ko palaging “&lt” tama ba? or ma coconvert na? sensya na noob question.. wooooot! :)

    Jehzeel Laurentes last blog post..iBlog5 is the 5th Philippine Blogging Summit

  12. JP Habaradas

    May 9, 2009 at 3:25 AM

    @Michael – You’re welcome! :)

  13. Michael

    May 9, 2009 at 3:22 AM

    Very useful indeed. Thanks a lot for sharing this information.

  14. JP Habaradas

    May 6, 2009 at 6:05 PM

    @Roy – I understand. However, you don’t necessarily have to know about the topic to be able to comment right? If you can’t relate or don’t understand you can comment by asking a question about the topic. :)

    Btw, these codes are found in the files that are used in WordPress themes and other stuff needed to run a self-hosted WordPress blog.

  15. Roy

    May 6, 2009 at 6:00 AM

    these kind of stuff are what I’m talking about when I said I will never be your top commentator :(

    what are all those codes?

    I miss Dbase 3+ and Clipper! lol

    Roys last blog post..Aside from Manny Pacquiao…

  16. JP Habaradas

    May 6, 2009 at 1:20 AM

    @jhay – Well not everyone post stuff that involves code, right? But yeah, this plugin might come in handy one of these days for you. :D

  17. jhay

    May 6, 2009 at 1:17 AM

    I’ve never posted code on my blog post before, but I’ll keep this plugin in the storage just in case the need arises.

    jhays last blog post..Another one on “Ako Mismo”

  18. JP Habaradas

    May 6, 2009 at 12:10 AM

    @Gem – Well there’s always a first time for everything, right? Btw, I’m no longer using this plugin as its compatible with WordPress 2.8+. I’ve replaced it with another that works great. I’ll most likely blog about it in my next WP Plugin Review. :)

  19. Gem

    May 6, 2009 at 12:06 AM

    Although I work with a lot of codes, I have not tried posting out codes in any of my blog posts. Maybe I will in the future. This plugin is definitely handy especially that it has some added features.

    Thanks for exploring and writing a review on this plugin. At a glance, there isn’t much described on the WordPress plugin homepage or the author’s website that tells more about what this plugin can exactly do.

    Gems last blog post..The Woman Who Gets a Face Transplant

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">