27 September 2005

WordPress Plugin: Code Autoescape

Posted under: at 09:11

If you frequently post code snippets into your WordPress blog then you already know how tedious and very error prone the process is. You will need to manually escape every single <, > and & characters in your code by hand. If not, either the code won’t get displayed properly or part of it will ferociously get eaten by WordPress. Needless to say, this is a process we’d very much like to avoid.

There are several plugins that do this already. However, in my opinion they are all not perfect. So, this is my attempt at another not so perfect code snippet plugin :).

Problems When Posting Code Snippets

  • <, >, and & need to be escaped manually.
  • WordPress tag balancing. A problem when posting incomplete HTML/XML code snippets.
  • convert_chars. This will happily eat <title>...</title> tags, among other things.
  • Inconsistent escaping. Sometimes, WordPress will escape &, and in other cases would not.
  • Smilies. We like having smilies when expressing our thoughts, but certainly not within code snippets!
  • wptexturize. It creates code blocks that looks right on our eyes, but won’t work when copied and pasted.
  • make_clickable in comments. This could wreak havoc on code snippets within comments.
  • wpautop in comments. I can’t tell what this does, but it looks nasty to me.

Problems With Other Plugins

  • Attempt to reverse wptexturize and/or convert_chars. This makes it impossible to introduce literal ellipsis in code blocks for example. I don’t know if this could become a problem, but it certainly can happen. Furthermore, if core WordPress updates wptexturize, then the plugin will need to be updated too.

Design Decision For This Plugin

The plugin is designed to get around the problems listed above. However the plugin does not do syntax coloring, line numbering, parsed HTML within code blocks, or anything fancy. But you should be able to write anything within codeblocks and it should appear correctly. The only exception is you can’t write a literal “<code>” and “</code>” inside codeblocks.

Code blocks in comments will be converted into pre code blocks if it contains multiple lines. I don’t know if this may create problem with XHTML validity.

Installation

  1. Download the plugin: codeautoescape.txt.

  2. Rename the file into codeautoescape.php and put it in your wp-content/plugins directory.

  3. Activate the plugin from WordPress administration page.

Usage

Post your code snippets enclosed by <code>…</code>. If it is multi line, you should use <pre><code>…</code></pre>.

In comments, enclose the code within <code>…</code>. If it is multi line, the plugins will add <pre>…</pre> automatically.

Stress Tests (or proof that this works)

Unbalanced HTML, title tag:

<html>
  <head>
    <title>Lorem ipsum dolor sit amet</title>
  </head>
<body>
...

Previously, this will turn into emoticons:

:) :( :D :-?

Perl script:

#!/usr/bin/perl
use strict;
our $i = 0;
while (<>) {
    $i++;
    print "line $i: $_";
}

PHP script and HTML in code:

<?php
   echo "<p>this is a paragraph</p>"
?>

XML data:

<?xml version="1.0" encoding="UTF-8"?>

<Recipe name="bread" prep_time="5 mins" cook_time="3 hours">
  <title>Basic bread</title>
  <ingredient amount="3" unit="cups">Flour</ingredient>
  <ingredient amount="0.25" unit="ounce">Yeast</ingredient>
  <ingredient amount="1.5" unit="cups">Warm Water</ingredient>
  <ingredient amount="1" unit="teaspoon">Salt</ingredient>
  <Instructions>
   <step>Mix all ingredients together, and knead thoroughly.</step>
   <step>Cover with a cloth, and leave for one hour in warm room.</step>
   <step>Knead again, place in a tin, and then bake in the oven.</step>
  </Instructions>
</Recipe>

Regular quotes should not be converted into “fancy” ‘quotes’.

foo("bar", 'baz');

Similar Plugins

Changelog

2005-09-27, v1.0:

  • Initial release

2005-09-28, v1.1:

  • Fixes invalid XHTML in comments

2005-09-29, v2.0:

  • Code refactoring

165 Responses

Trackback: Use this URI to trackback this entry. Use your web browser's function to copy it to your blog posting.

Comment RSS: You can track conversation in this page by using this page's Comments RSS (XML)

Gravatar: You can have a picture next to each of your comments by getting a Gravatar.

Leave a Comment

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Warning: Comments carrying links to questionable sites will be removed!