Guide to find a WordPress syntax highlighter that works

Previously, I complained about how I needed a syntax highlighter and have no recommendations… I hand tested and create a review on some of the popular choices I found on plugin directory. The plugins I listed are base on following requirements:

  • Supported in WordPress 2.7.1
  • Last updated in 2009

The criteria to the syntax highlighter I am looking for based on below 2 points:

  • Code remains unchange after a post is been edited in either Visual mode or HTML mode
  • Read to use out of the box. I should be able to use it with no or little configurations

SyntaxHighlighter Evolved

Last Updated: 2009-5-4 (Version 2.1.0)

Syntax: Visual. Eg/ [php], [javascript]

One of the feature of SyntaxHighlighter Evolved is its elegant toolbar on the corner of the code block, which allows you to choose between: View code in a pop up, copy code to clipboard or print code. For some reason Syntax highlighter Evolved likes to strip away my indents (spaces) in my code. If I tried to save in HTML mode, I will get PHP warning messages as well as have my code striped from my post. Overall, this plugin does not perform the way I wanted.

p06-syntax-highlighter-evolved

p06-syntax-highlighter-evolved-02

Syntax Highlighter Plus

Last Updated: 2009-2-11 (Version 1.0b2)

Syntax: Visual. Eg/ [sourcecode language='css']

Like other plugins of Syntax Highlighter family, it come with a toolbar, and like Syntax Highlighter Evolved it failed on the same way: Strips my indents and remove my code when I tried to save in HTML mocde.

p06-syntax-highlighter-plus

Google Syntax Highlighter for WordPress

Last Updated: 2007-8-14 (Version 1.5.1)

Syntax: HTML. Eg/ <pre name=”code” class=”php”>

Despite it has not been updated for almost 2 years, Google Syntax Highlighter seems to be the popular choice by bloggers, so I decide to include this one in the test. Google Syntax Highlighter comes with a texture toolbar, not as fancy as Syntax Highlighter family but does its job. Appearently there is a styling issue when dealing with long line of code but that won’t matter much since the plugin fail siliently when I switch between Visual mode and HTML mode: loss indent and syntax color. Another disappointed candidate.

p06-google-syntax-lighlighter

p06-google-syntax-lighlighter-02

WP-Chili

Last Updated: 2008-7-24 (Version 1.1)

Syntax: HTML. Eg/ <code class=”php”>

WP-Chili is another special candidate, which has been recommanded in another WordPress syntax highlighter review, I will also give this one a try. Unlike all previous candidates, it required manual character escaping. I uses Elliot’s postable script (as recommanded) to do the job. Simplier styling that may requires few tweaks (such as fix long line wrapping and give it a background color or border to distinguish from normal paragraph). WP-Chili actually survived after test saving in both Visual mode and HTML mode, unfortunately my indents went missing after few saves… Does no one likes my space indents?!

p06-wp-chili

Code Colorer

Last Updated: 2009-1-27 (Version 0.7.3)

Syntax: Both Visual or HTML. Eg/ <code lang=”php”>, [cc lang="php"]

Now a fairly new plugin I found in the directory. For some reason I can not get the code showing correctly despite I able to inspect the HTML code using firebug.

p06-code-colorer

Dojox WordPress Syntax Highlighter

Last Updated: 2009-1-27 (Version 0.7.3)

Syntax: HTML. Eg/ <pre><code class=”php”>

Dojox is the first plugin that manage to survive the test: code remain the same after multiple saves in different mode. Dojox uses a double tagging syntax and requires manual character escaping. Background color may need a change to fit blogger’s theme but besides that, it is a working pluging (finally).

p06-dojox

Syntax Highlighter and Code Colorizer for WordPress

Last Updated: 2009-5-5 (Version 2.0.296)

Syntax: HTML. Eg/ <pre class=”brush:php”>

Appearently it is also known as Code Prettifier. Code Colorizer does auto wrapping by default and has a toolbar on top right corner as it is another member of Syntax Highlighter family. One important different to its family is it actually works! No problem when saving post in Visual mode nor HTML mode, however you will require to manually escape your code.

p06-code-colorizer

WP-SynHighlight

Last Updated: 2009-1-27 (Version 0.91)

Syntax: Visual. Eg/ [codesyntax lang="php"]

This plugin is the only plugin I found that works and uses Visual syntax and won’t break if you switch between different modes. And since you pasting your code in Visual mode, there is no need to escape the characters, which is an advantage of posting in Visual mode. But somehow I got no coloring from WP-SynHighlighter even if I follow its example.

p06-wp-synhighlight

Conclusion

Syntax Highlighter and Code Colorizer for WordPress won my vote as it is easy, robust and actually works. The plug in is out of the box, which means I do not need to dig into CSS restyle its color schema to fit in my theme. I know I will enjoy making my switch!

  • http://codelol.com Cody

    Thanks for reviewing these syntax highlighters. Finding one was such a pain and the Google Syntax Highlighter just didn’t work for me. I followed your recommendation and tried Syntax Highlighter and Code Colorizer for WordPress, which works perfectly :)

    • Anonymous

      At the chic today, lots of ugg outlet store persons are undoubtedly chosen concerning operating style and subsequently Timberland Shoes attraction available at the very similar energy. Past few weeks is merely pouring in coupled with some people dream if you need to remain balmy coupled using style. Information on how could possibly some people obtain which often? Ugg boot styles give which some people plan. Uggs ” booties ” have been the very all right alternatives relating to lots of the ladies what individuals really like beauty plus style. The cold season is just cold which often a lot of people skirt a real huge amount, just what build this pretty sorrowful. However, you can find purely certain guidelines if you want to that will some of us can even motivation on Timberland Boots their own in relation to staying hints smart-looking or chic. My Cheap Ugg boots are soft if you need to build ugg outlet store that you secure. The very smart-looking along with trendy footwear can continue to be sometimes pretty painful on the subject of the very wearer. This original is simply where the very Ugg boots come inside of.
      Ugg boots use the sleep skin in order to build the very shoes or boots. The very sheepskin design of these boots and the very fleecy fibres at the interior which often let with regards to air circulation build it really apt with regards to everyday put on. You definitely feel extremely comfortable and warm once that you put to the very Ugg boots. Some of us accept which often Ugg footwear were originally worn via Australian sheepherders to maintain their tip ft warm. Sleep skin along at the Ugg budget boots can build for you to UGG Boots feel warm inside associated with winter and cold at the hot summer time. Information on how miraculous. There is simply absolutely a real demand on the subject of classic Ugg and Ugg boots due if you wish to their comfy and classiness. Exactly where will people purchase the very Ugg funds boots? The very easiest way would remain if you wish to search the very on line cheap ugg boots marketplace when it comes to providers concerning branded shoes or boots UGG Bailey Button Boots
      Countless via the web stores are promoting Utilities Of Rain Boots inside inexpensive costs. One can check out the very on the net stores selling designer shoes from a little for this leading designers from throughout the very planet. Numerous a proper instances, such type of any certain via the internet ugg boots running shoes retailer normally would certainly characteristic reliable Aussie Ugg shoes, carrying cases, coupled together with men’s slippers. You Cheap Timberland boots can easily track down numerous lovely Ugg tennis shoes inside of numerous several tints, for instance greyish, pink, dunkelhrrutige and subsequently down. Invest in Uggs wellingtons inside of my webpage you can even easily produce a true relative price. Ugg boot budget sneakers are really crafted to add all your ugg outlet storedescriptions. Uggs your footwear are really appropriate on the subject of that you. Affordable Ugg boot wellingtons could also build that you feel comfortable and therefore fashionable
      cheap ugg boot each one well then energy.

  • http://www.travislin.com Travis

    Hi Cody,
    I’m glad that it helps! :D
    I’m sure syntax highlight won’t be much of a headache soon, as a default syntax highlighter is provided by WordPress 2.8!

  • http://www.fractalizer.ru FractalizeR

    >>But somehow I got no coloring from WP-SynHighlighter even if I follow its example.
    You just forgot to read FAQ :)
    You need to start PHP code with PHP tag “<?php". And highlighting will be ok.

    I also released 2.0 version of my plugin: http://wordpress.org/extend/plugins/wp-synhighlight/ with full GUI mode source code editing.

  • http://dddspace.com alswl

    Thank you very much~
    I hava translated this post to Chinese.
    See here: http://dddspace.com/2010/03/guide-to-find-a-wordpress-syntax-highlighter-that-works-translation.html

  • http://www.networksecurityfaq.com Victoria Young

    i host 5 of my blogs on Blogspot and it is really good for beginners. but if you want something with more features, nothing beats wordpress:-:

  • http://www.techs24x7.com/ Techs24x7.com

    In my BLOG i hv installed/enabled syntax highlighter … still it is now working for SQL commands ..

    Can anyone pleae help me out ???

  • http://singmelody.com singmelody

    3Q for your advice . Just now I choose which Syntax Highlighter I would have.3Q for your article.

  • http://Blampy-Blam.com Blampy Blam

    Many thanks for this fascinating article. I will make sure you get the word out about this internet site :) Outstanding publish. Can’t wait to find out the subsequent article.

  • Pingback: omg post formats-notlaura

  • Pingback: syntax highlighting with WordPress at blog.humaneguitarist.org

  • Pingback: WordPress代码高亮插件指南 « 呢喃的歌声