The Definitive Guide on Wordpress Syntax Highligher Plugins

These are reviews based on my own evaluations of the plugins. I downloaded, installed and tested each one within a default Kubrick theme installation on Wordpress 2.6.

  • I tried to make this a complete list via the Extend Plugin Directory.
  • I used a snippet of code from the recent post Creating a Simple Online Application using the Flickr API.
  • The screenshots are taken from a Firefox 3 browser. I did not test these plugins on any other browsers (IE or Safari).
  • I removed all inherent <code> and <pre> CSS styling from the Kubrick theme for this test except for (in order to try to make all the font sizes the same):
    code, pre {font-size:12px !important;}

8. Code Colorer

Download | Author: Dmytro Shteflyuk
Coloring: #8 of 8
Ease of Install/Use: #8 of 8
Line Numbers: Optional
PRE or CODE: CODE or [cc][/cc]
Other Options: Optional links to code keyword linking, Optional CSS changes though a plugin page
Code Format: It can only handle full code.

Review: Maybe the optional CSS would make a difference here, but the coloring is just horrible, and I can't figure out why the source code is not being highlighted. The setup instructions require you to rename a CSS file (why?) — I did that and I still can't get this to highlight correctly.

7. Highlight Source Pro

Download | Author: Christian Knoflach
Coloring: #7 of 8
Ease of Install/Use: #5 of 8
Line Numbers: Optional
PRE or CODE: PRE
Other Options: Headlines within the code
Code Format: It can handle either already-escaped or full code.

Review: The syntax highlighting is very similar to the other plugins that also use GeSHi, but the gray on dark gray background doesn't look right to me. I am sure you can change it by playing with CSS, but it just doesn't look very appealing right out of the box.

6. Snippet Highlight

Download | Author: Roland Rust
Coloring: #5 of 8
Ease of Install/Use: #3 of 8
Line Numbers: Yes
PRE or CODE: PRE
Code Format: It can only handle already-escaped code.

Review: Very straightforward. It's only downfall is the ugly olive green line numbering and the fact that it forces you to manually escape your code.

5. WP-Syntax

Download | Author: Ryan McGeary
Coloring: #4 of 8
Ease of Install/Use: #2 of 8 (tied)
Line Numbers: Optional
PRE or CODE: PRE
Code Format: It can handle only full code.

Review: WP-Syntax has good coloring and I do like how the line number coloring is distinctly different from the rest of the code. Other than that, it is pretty much a no-frills highlighter (which isn't a bad thing).

4. WP-Codebox

Download | Author: Eric Wang
Coloring: #3 of 8
Ease of Install/Use: #2 of 8 (tied)
Line Numbers: Optional
PRE or CODE: PRE
Other Options: Optional collapsible code area, Optional text download of code
Code Format: It can only handle full code.

Review: This example looks to be exactly like WP-Syntax except that this one give you the option to download the code. Although a "copy to clipboard" option would have been better, I feel this is still a step up from WP-Syntax.

3. Google Syntax Highlighter for WordPress

Download | Author: Peter Ryan
Coloring: #4 of 8
Ease of Install/Use: #7 of 8
Line Numbers: Optional
PRE or CODE: PRE
Other Options: Many
Code Format: It can only handle already-escaped code.

Review: This plugin is a little confusing at first with all it's available options, but I think once you find a combination that is a right fit for your uses, it will be just as easy as any other plugin out there.

2. WP-Chili

Download | Author: Andrea Ercolino
Coloring: #1 of 8
Ease of Install/Use: #6 of 8
Line Numbers: Not Available
PRE or CODE: Requires both to work properly
Code Format: It can only handle already-escaped code.

Review: This example may look very plain because it requires you to provide your own CSS for the <code> and <pre> for styling. This makes it very customizable to the do-it-yourselfer, but maybe not so appealing for those looking for something to work and look great easily right out of the box. Chili does however have the best code highlighting hands-down. Since it doesn't use GeSHi like many of the other plugins, it's coloring is distinctly unique.

Disclaimer: This is the plugin I settled on, and I am happy with my choice thus far. Since I need to escape my code before using it, I use Elliot Swan's great little app Postable.

1. Syntax Highlighter Plus

Download | Author: Fred Wu (along with ma.tt, Viper007Bond and mdawaffe)
Coloring: #2 of 8
Ease of Install/Use: #1 of 8 (tied)
Line Numbers: Yes
PRE or CODE: Neither. It uses [sourcecode][/sourcecode]
Other Options: Print, Copy to clipboard, View as plain text
Code Format: It can handle either already-escaped or full code.

Review: Syntax Highlighter Plus looks fantastic right out of the box. There were no setup steps required, and the extra features such as copy to clipboard really make this plugin stand out. The alternating line colors are a big plus — and unique to this list. The code highlighting, which uses Alex Gorbatchev's Google Syntax Highlighter, looks the same as most of the plugins here.

This plugin is an obvious upgrade from the original great SyntaxHighlighter. It allows for un-escaped code and removes the leading zeros from the line numbers (eg 1. instead of 01.)

Bonus: WP-Chili CSS

Since I decided to use WP-Chili as my syntax highlighter of choice, I figured I would also share with you the CSS I perfected to make it look the way I do… Just in case anyone wanted to know.

.post pre {
	margin:0 0 20px 0;
	}
.post code {
	border:1px solid #ececec;
	display:block;
	padding:10px;
	font-family: Consolas, Monaco, "Courier New", Courier, monospace;
	font-size: 12px;
	background:#f9f9f9;
	color:#000;
	overflow: auto;
	overflow-y: hidden;
	white-space:nowrap;
	*padding:10px 10px 20px 10px; /* IE Hack-Fix */
	}

14 Reader Comments (reply)

  1. Flick said:

    I love you for this guide! Thank you so much! :D I've just moved one of my sites from Wordpress.com to self-hosted Wordpress, and was quite troubled as to which code/syntax plugin to use. I really appreciate this guide!

  2. Administrator

    July 21st, 2008

    1:14 pm

    @Flick - Thanks!!! I put it out there because I was testing them all to find out the one I wanted to use, and figured it would be a great post topic. Hope you stick around!

  3. Andrea said:

    Thanks for reviewing WP-Chili. And thanks for making it your choice. :-)

    As you probably know, WP-Chili 1.0 installs Chili 1.9. However the current version of Chili is 2.2.

    There were no bugs in 1.9 (at least none I was aware of), but the new version has many new features, including an improved coloring engine, and line numbers (at last).

    Chili does not have buttons for "view plain" and "copy to clipboard" because I made those functionalities transparent. Selected text can be copied to the clipboard, while losing colors, but preserving white space (as expected).

  4. Administrator

    July 21st, 2008

    9:38 pm

    @Andrea - You're welcome!

    The new features sound great - when do you expect the WP plugin to be updated with Chili 2.2?

  5. Andrea said:

    I'm going to release WP Chili 1.1 this week (I hope). It's ready.

  6. Fred Wu said:

    Now only if GeSHi had better highlighting colours…. ;)

  7. Administrator

    July 23rd, 2008

    11:57 am

    @Andrea - I can't wait!
    @Fred - I couldn't agree more…

  8. Andrea said:

    I've just released WP Chili 1.1 :-)

  9. Administrator

    July 24th, 2008

    9:59 pm

    Very nice Andrea!! I just upgraded - and it was flawless!!

  10. [...] There are quite a number out there (at least 8!) that do the job, but it was difficult to sieve/test through so many when the new site was going live in a very short time, and it was then that I stumbled upon Chris Cagle's excellent article: The Definitive Guide on Wordpress Syntax Highlighter Plugins [...]

  11. Great article, thanks!

    But I'm curious why you chose WP-Chili? It seems to be the least capable. . Syntax Highlighter Plus and WP-CodeBox look a lot better, at least in your review.

  12. Administrator

    August 2nd, 2008

    1:19 am

    @Mike - I ended up choosing Chili because I decided I would deal with the shortcomings so that the code looked better. The color schemes of the others just look bad to me (when compared side-by-side to Chili).

  13. [...] Chili was the #1 pick by Chris Cagle's Wordpress Syntax Highlighting Plugins Review, so I thought I'd give it a try.  I'm looking for a highlighter for c/c++ code and [...]

  14. [...] Cagintranet Web Design has reviews of various code syntax highlight plugins available for WordPress in The Definitive Guide on Wordpress Syntax Highlighter Plugins. [...]

Post a Comment (rss)





Pittsburgh Web Design - Cagintranet Web Design