How to Replace Crayon with Enlighter in WordPress

Why to Replace Crayon with Enlighter?

Recently I faced a shocking fact: after upgrading to PHP 7.4 my site broke! But what happened? After a short investigation I found the culprit.

The excellent Crayon syntax highlighter has not been updated for over 5 years. And as expected with computer systems dependencies, code pieces, and even the programming language itself change with time. Not surprisingly, site admins started to report Crayon breaking their WordPress sites when running on PHP 7.3 or newer versions of the programming language.

I faced the same issue a couple of weeks ago and decided to make the jump that I was planning for a while: migrating away from Crayon to the popular Enlighter plugin.

Here is how I did it.

In a nutshell the idea is that both plugins use the <PRE> HTML tags with different properties. If we want to move our code snippets from Crayon to Enlighter we simply need to replace the respective Crayon tags with the Enlighter version in our MySQL database of our WordPress site. Needless to say, we need to delete Crayon and install the Enlighter plugin to make it work.

*After migration. The site looks better than ever!

1. Backup Your Site!

This step is self-explanatory, for many it’s not even a question but for admins with less experience under their belts it’s important to highlight:

2. Get the dump of the MySQL database

Use phpMyAdmin, or the bash shell to export the whole MySQL database of the website. In the phpMyAdmin menu select your database on the left-hand side menu, and under the Export tab you can easily get the dump of the whole site database.

If you prefer using the shell, see the command below.

The code:

# Shell command for MySQL database dump
mysqldump -u [mysql user name] -p[mysql user password] [database name] -r [output file name]

# Example
mysqldump -u  "wp_user" -pSuperS3cretPasswd "MySiteDatabaseName" -r "./TheOutputDump.sql"

3. Check the code

It’s technically the reconnaissance step. We have to know what piece of code to replace with what in our database. The following snippet contains examples of the preformatted text tags generated by both plugins.

We are hunting specifically for PRE html tags. PRE means: preformatted text. Used to display code snippets, as contents are displayed with a fixed-width font and preserve all spaces and line breaks.

I use phpMyAdmin to view a post in my MySQL database, all posts and all of their revisions are stored in the table called wp_posts.

Then I open another post where Enlighter is used for a code snippet.

Looks like Crayon use a pretty simple format. As class it has the language as lang, in this case it’s PowerShell, and the decode:true clause. The Enlighter tag is a little lengthier, also containing the language and theme.

# Old crayon tags look like:
<pre class="lang:ps decode:true ">

# New Enlighter tags to replace crayon:
<pre class="EnlighterJSRAW" data-enlighter-language="powershell" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">

This gives us a good understanding of the job ahead of us. In the next step we make sure all the Crayon code pieces are included as there might be slightly different versions. Then using simple regex expressions, we replace the tags in our dump.

4. Replace tags (default and PowerShell)

As mentioned above the Crayon tags are fairly simple, however we have to make sure all of the Crayon snippets are included in our process otherwise some posts will display untagged preformatted code pieces. From memory I remember that I use three different themes in Crayon: one for PowerShell code with a custom PowerShell theme, one for PowerShell code but with the default theme, and one generic for everything else. You might use more or less, but don’t worry, in the following steps we’ll find all the variations we need.

A quick PowerShell one-liner to the rescue to find all tags. We run through the MySQL dump file, looking for the ‘<pre class=’ pieces.

# One-liner in PowerShell to get all 'pre class' tags
(Select-String -Path '.\ott.sql' '<pre class=.+?>' -AllMatches).Matches.Value | Sort -Unique

Great, we’ve discovered many of those. What tells us that they are Crayon snippets is all contain a lang and a decode element, optionally a theme piece which we ignore as it bears no significance.

The tags we are looking for matches this regex pattern:
(<pre class=[^>]+lang[^>]+decode.+?>)

Replace them:

Now it’s time for the critical part: replacing the tags with Enlighter specific classes in them.

a. Open Notepad++ (you might use any other text editor that handles regex expressions, like VIM, etc)
b. Push [CTRL + H] for Search and Replace
c. Make sure the Regular expression radio button is selected.
d. Wrap around ensures the document is searched up and down, not only down from the location of the cursor.

The following table contains the regex expression to find the tag pieces to replace, also the Enlighter tags add to our database.

1. Regex all PS themed:
(<pre class=[^>]+theme:ps[^>]+lang:ps[^>]+decode.+?>)
Replace with:
<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"powershell\" data-enlighter-theme=\"wpcustom\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">

2. Regex simply PS language:
(<pre class=[^>]+lang:ps[^>]+decode.+?>)
Replace with:
<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"powershell\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">

3. Regex all other:
(<pre class=[^>]+lang[^>]+decode.+?>)
Replace with:
<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">

5. Upload the New Database

Now we have the database as it should look like in a dump form. It’s a piece of cake from this point on.

The next step is to drop the tables from the existing database, and import our edited dump.

a. Open phpMyAdmin again. Highlight all the tables in our database. Then in the bottom drop-down menu select DROP.

b. Once the database is clear, click on the Import tab on the top menubar, select the sql dump on our computer and hit Go

6. Remove Crayon and Activate Enlighter

The very last thing is deactivating Crayon and deleting it for good.

Also, adding the Enlighter plugin to WordPress if it has not been done already, and activate it.

I don’t include those steps here as they are probably self-explanatory, if not please comment me down below and I augment the tutorial.

7. Configure Enlighter, Upgrade PHP

Last thing is to configure Enlighter the way you want it.

Also upgrade PHP to 7.4 ! 🙂

That’s all guys, comment your opinion below!