james mckay dot net

Coder is Yet Another Code Syntax Highlighter. It is based on Code Auto Escape by Priyadi Iman Nurcahyo and on the Syntax Highlighter JavaScript by Alex Gorbatchev.

In true jamesmckay.net fashion, it is nice and flexible, and it has a configuration page.

Download:

• Coder 1.0 alpha 1 (.zip)
• Coder 1.0 alpha 1 (.tar.gz)

Usage:

I recommend that you disable the rich text editor when you are including source code in your blog. Rich text editors have a rather nasty habit of being cruel to your indentation and spacing, and inserting messy markup all over the place.

To apply syntax highlighting to a block of code, enclose it in a <pre><code> block and give the <pre> tag a lang attribute indicating which language you want to use. For example:

<pre lang="javascript"><code>
  $(document).ready(function() {
    $('#welcome').show('slow');
  });
</code></pre>

Supported languages:

Use one of the following values for the lang attribute to indicate which language you are using:

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

Additional options:

There are some additional options that you can specify on the configuration page, or in the <pre> tag:

Show line numbers

This sets whether or not you want to show the line numbers in the left hand gutter. You can override it on a post by post setting setting the numbers attribute to true or false:

<pre lang="html" numbers="true"><code>

<pre lang="html" numbers="false"><code>

You can also start numbering at a different value using the start attribute:

<pre lang="html" numbers="true" start="50"><code>

Show clipboard controls above each code block

This sets whether or not you want to show the “copy to clipboard”, “view plain text” and “print” options above each code block. It can be overridden by setting the controls attribute to true or false:

<pre lang="html" controls="true"><code>

<pre lang="html" controls="false"><code>

Collapse code blocks when first shown

This allows you to hide each code block when the page is first loaded, with a “show” link in the control bar. Note that if you are not showing the controls, this setting will have no effect. It can be overridden using the collapse attribute:

<pre lang="html" controls="true" collapse="true"><code>

Show column numbers above each code block

This allows you to show column numbers just above the code block. It can be overridden with the columns attribute:

<pre lang="html" columns="true"><code>

Requirements

Coder has been developed and tested on WordPress 2.5, though it should work with versions 2.0 or later.

It has been developed and tested against PHP 5.2. PHP 4 is not supported: while I expect it to work correctly I can not make any promises.

If you encounter any problems with it, please read my post on how to report issues with WordPress plugins before complaining.