WordPress, CodeColorer, and Leading Whitespace

If you've ever hosted a geek-oriented blog, you're familiar with this problem. You have some code that you want to share with your audience. You copy the nicely formatted code from your source file, you paste it into your blog, and when you preview your post, your code looks like mud. HTML in general, and the WordPress post editor in particular, don't play nice with leading spaces in text. Text that was nicely formatted before it was pasted into a blog post ends up having all the lines mashed up against the left margin in an barely readable mess.

I searched for a solution to this problem and found that there really is no good solution. So I decided to invent my own. It's a hack, but it's a solution. Here's what I do to paste code into a WordPress blog entry, and have CodeColorer display it as I intended:

  1. Install the CodeColorer plug-in on your WordPress site
  2. Edit the source code for the plug-in to change a special character (I use ) into the escaped HTML string  
  3. When you want to put code into a post, copy it from your source file into a text editor. Replace leading spaces with your special character. Copy the resulting text and paste it into your WordPress post
  4. WordPress won't strip out the leading spaces in your code because, well, they're not spaces any more
  5. When your audience views your post, CodeColorer will take all your special characters and send them to the web browser as non-breaking spaces
  6. The web browser will display the leading spaces as you intended

Now, I admitted up front that this is a hack of a solution. But... and this is the key point... it works!

It's hard to argue with success. Here's how to do it.

First, install CodeColorer. Then, edit the file wp-content/plugins/codecolorer/codecolorer-core.php. Find the function AfterHighlightCodeBlock. It will look like this:

1
2
3
4
5
  function AfterHighlightCodeBlock($content) {
    $content = str_replace(array_keys($this->blocks), array_values($this->blocks), $content);

    return $content;
  }

Add one line to the function so that it reads like this:

1
2
3
4
5
  function AfterHighlightCodeBlock($content) {
    $content = str_replace(array_keys($this->blocks), array_values($this->blocks), $content);
    $content = preg_replace('/~/', ' ', $content);
    return $content;
  }

Replace the tilde with your chosen special character. As I said, I chose the character , which is entered on a Windows computer by holding down the ALT key, typing 1234, and releasing the ALT key. I chose this character because it is extremely unlikely to be found in any of the code I'll want to put on my blog, and because it's easy to remember how to type it. (I don't even know what that character is.)

When I have code that I want to paste into a blog entry, I first copy it from the source file to Notepad++. I replace tabs with four spaces. Then I use the regular expression search features of Notepad++ to search for:

^( *)[ ]

and replace with:

\1~

(Again, replacing the tilde with my special character.) Notepad++ doesn't do regex backreferences, so you'll have to click the "Replace All" button repeatedly until Notepad++ says 0 occurrences were replaced. Then copy from Notepad++ into your CodeColorer block.

Yep, it's hacky. Yep, it's a fair amount of effort. But so far, it's the best solution I've found to preserving leading whitespace in blog posts.