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.
- 100% client side, no server dependency
- Multiple languages support
- Wide browser support
- Very lightweight
- C++ (cpp, c, c++)
- C# (c#, c-sharp, csharp)
- CSS (css)
- Delphi (delphi, pascal)
- Java (java)
- PHP (php)
- Python (py, python)
- Ruby (rb, ruby, rails, ror)
- Sql (sql)
- VB (vb, vb.net)
- XML/HTML (xml, html, xhtml, xslt)
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.
<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>
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!
I have problem with working on this in my blog. I will try the one you stated here. Thanks for the tip.
@jehz – Yep, tama – SyntaxHighlighter Evolved ni Viper007. :D
ayun nakita ko na! it’s SyntaxHighlighter Evolved by Viper007? Tama ba? O__O
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
@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.
I have installed this plugin however not able to understand how can we enable scroll bars. Does it have that option?
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!
@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. :)
Do you think this plugin compatible for WP 2.8 + ? Coz when I use in 2.81, the code not shown properly..
@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. ;)
teka.. yung "<" gagawin ko palaging "<" tama ba? or ma coconvert na? sensya na noob question.. wooooot! :)
@Michael – You’re welcome! :)
Very useful indeed. Thanks a lot for sharing this information.
@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.
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
@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
@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. :)
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.
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.