WordPress Syntax Highlighters, and how to Switch From One to Another

An article by admin    No Comments

If you’ve been to this site before,  you’ll probably notice that I’ve switched from the syntax highlighter that I’d used to display code to something a ton cleaner (the credit does not go to me, the new syntax highlighting plugin came from this TutsPlus article).

Until a few hours ago, I used SyntaxHighlighter Evolved, which looked great, and was super easy to use, however, there were some issues with using it on a website displaying code that people are likely to copy-paste- the biggest of which was that it frequently added some magically horrible (and invisible) special characters which subsequently caused nearly anything copy-pasted from this site to result in tons of syntax errors!  Annoyingly, I was so preoccupied with how to get legacy code to work with the new syntax highlighter that I completely forgot to get a screenshot of what I’m referring to (figures).

Of note, SyntaxHighlighter evolved IS an excellent plugin, and it’s very easy to use, so I’m not going to bash anything in here (just in case you’re waiting for it!).

Warning: this DOES require that you run MySQL commands, and as is the case anytime your’e doing this on a production server, back up back up back up back up back up back up your database first!

Part 1: Handling Legacy Shortcodes

Fortunately, before I just activated some plugins and found out the hard way that all my code samples suddenly looked like epic-crap and you couldn’t read or copy-paste them, I tested this locally (as you should always do [hint hint]) and found out that the new Prism.js Plugin was not even sort of backward compatible with my existing code snippets.  Keep in mind that this isn’t going to break your entire website, it’s just going to make your pretty highlighted code bits turn into some ‘eh’ plaintext looking funk, so don’t sweat it too much if you’re having a similar problem.

Initially, I’d hoped to be able to hack the plugin to override the legacy shortcodes and run them through the new plugin, and though it’s certainly possible- the results weren’t being nearly as reliable as I’d hoped so I won’t even bother writing about it.  This was okay, as it ultimately made the process quite a bit easier with more reliable conversion.

Moral of the story, if all you want to know is how to handle legacy shortcodes , skip to part 3, but I did not end up hacking into the plugin to handle this part.

Part 2: The Process (in wp-admin and your stylesheet)

Before getting too much further, make sure to execute the following steps (in order most likely, but whatever works best for you!):

1. Deactivate whichever syntax highlighter you are using
2. Activate (or upload AND THEN activate) the Prism.js plugin
3. If you’d like the styles to be about the same as in the examples, then grab the code from the /css/sh.css file provided in the plugin download and add it to the bottom of your theme styles.  I haven’t altered what was provided in the tutsplus article since it looks just fine to me.

Part 3: The Complicated Part in MySQL

So here’s where it gets interesting (or horrible depending on how you look at it).  The big issue with my legacy shortcodes is that I had used quite a few different ones, and most of them in different orders or with different params.

[text]
[text title="Some title"]
[text highlight="14" title="Some other title"]
[php]
[php title="Some title"]
[php highlight="false" title="Something"]
[javascript]
[javascript title="Whatever"]
[javascript highlight="1,18" title="Some Title"]
[xml]
[xml title=""]
[sql]
[sql title="Do not break your database"]
etc...

But some of the examples above are just ignored entirely, namely the line number highlighting which I decided against for simplicity, and knowing that every single legacy shortcode needed to now end as “[/code]” made it a bit easier.

UPDATE wp_posts SET post_content =
REPLACE(post_content, '[/text]', '[/code]');
UPDATE wp_posts SET post_content =
REPLACE(post_content, '[/php]', '[/code]');
UPDATE wp_posts SET post_content =
REPLACE(post_content, '[/javascript]', '[/code]');
UPDATE wp_posts SET post_content =
REPLACE(post_content, '[/sourcecode]', '[/code]');
UPDATE wp_posts SET post_content =
REPLACE(post_content, '[/xml]', '[/code]');
UPDATE wp_posts SET post_content =
REPLACE(post_content, '[/sql]', '[/code]');
UPDATE wp_posts SET post_content =
REPLACE(post_content, '[/html]', '[/code]');

To accommodate the variances in legacy shortcode beginnings is not super difficult, but it wasn’t without some trial and error.  Don’t worry if you try this and it doesn’t work- the queries just result in 0 rows affected (IN MOST CASES) if the update isn’t quite right.

UPDATE wp_posts SET post_content =
REPLACE(post_content, '[text]', '[code]');
UPDATE wp_posts SET post_content =
REPLACE(post_content, '[text highlight=', '[code highlight=');
UPDATE wp_posts SET post_content =
REPLACE(post_content, '[text title=', '[code title=');
UPDATE wp_posts SET post_content =
REPLACE(post_content, '[php]', '[code type="php"]');
UPDATE wp_posts SET post_content =
REPLACE(post_content, '[php title="', '[code type="php" title="');
UPDATE wp_posts SET post_content =
REPLACE(post_content, '[php ', '[code type="php" ');
UPDATE wp_posts SET post_content =
REPLACE(post_content, '[javascript]', '[code type="javascript"]');
UPDATE wp_posts SET post_content =
REPLACE(post_content, '[javascript title="', '[code type="javascript" title="');
UPDATE wp_posts SET post_content =
REPLACE(post_content, '[sourcecode language="', '[code type="');
UPDATE wp_posts SET post_content =
REPLACE(post_content, '[xml ', '[code type="markup" ');
UPDATE wp_posts SET post_content =
REPLACE(post_content, '[sql ', '[code type="markup" ');
UPDATE wp_posts SET post_content =
REPLACE(post_content, '[html]', '[code type="markup"]');
UPDATE wp_posts SET post_content =
REPLACE(post_content, '[html ', '[code type="markup" ');

Part 4: Clear caches, reload site, cross fingers, enjoy…

You can grab the whole script from the download link below, just be sure to back up your database first!

Sidenote, if you’re trying to write about shortcodes in a WordPress post and wondering whyyyyyy your formatting keeps getting broken, you’re going to want to replace the opening square bracket with it’s associated htmlentity; in this case “[” becomes “[”.
[dm]17[/dm]