syntax highlighting with WordPress

Thankfully, pretty much nobody reads this blog.

If they did, they'd have seen a lot of weird changes going on in real-time concerning some XML code in a recent post.

Basically, I've been playing around with various WordPress plugins that support syntax highlighting, which is a fancy way of color-coding code examples with color-coding specific to various scripting and markup languages like PHP, Python, XML, etc.

Anyway, after playing around with several, I was running into the same issue with the indent stripping as talked about here. The use of indentation is paramount to making one's code readable and in some languages, like Python, indentation is required.

In other words, this is valid Python code:

if a == a:

print "The 'a' variable is equal to itself!"

But this is invalid:

if a == a:

print "The 'a' variable is equal to itself!"

because the print statement is dependent on a condition.

Anyway, what was happening was that I'd put code into WordPress, the indentation and highlighting would look good, but if I wanted to edit my post later all the indentation would be lost when I'd reopened the post in the editor (btw: I use Dean's FCKEditor).

So here's what appears to fix it:

  • I installed my preferred WordPress syntax highlighter: Syntax Highlighter Compress Syntax Highlighter Evolved.
  • I wrote my post and pasted my code directly into the Visual Editor.
  • I then highlighted only the code and from the Visual Editor's "styles" drop-down menu I chose "Computer Code".
  • I then edited the post in Source mode.
  • I replaced the <code> tags with <pre> tags.
    • The opening <pre> tag needs a "class" attribute to specify the type of code (i.e. Python, XML, etc.)
    • For example, I'd use this for Python:
      • <pre class="brush:python">
    • and this for XML:
      • <pre class="brush:xml">

From then on, everything seems to be OK. That is to say, I can edit my post at a later time with the Source or Visual Editor and all my indentations are intact.

Here's the earlier Python code using the technique just described:

if a == a:
	    print "The 'a' variable is equal to itself!"

And that's that … I hope.



Related Content:

Leave a Comment

Your email address will not be published. Required fields are marked *