Fixing code examples on this site.

This website was started in 2010. Before that I was writing articles on a Blogspot blog that I had integrated into the website. While there are only around 85 articles currently on the site, the article data has been through a lot. Text is generally pretty easy to upkeep, but programming code appears to be another matter.

WordPress switched to the concept of “Blocks” back in version 5. They offer a way to convert posts made in their “Classic” format. That generally works okay, but I’ve noticed that code blocks through the years haven’t translated properly even when they are still unconverted.

Part of it could be that I’ve used 3rd party plugins but if memory serves me correctly I remember not using the WYSIWYG editor, which might have meant I had to escape certain characters in many types of programming languages before putting the code into the site. It’s possible the way I had written articles wasn’t what I should have done to keep perfect compatibility through the years, but having programming code on the site is somewhat of an edge case anyways.

The obvious characters with issues are part of HTML’s structure:

< > & ' "

There are a multitude of additional special characters in the HTML specification, but these are the ones that are likely double converted in my old articles. I’ve also got extra problems with any code examples that have HTML in them. Like when C# code outputs HTML or a URL.

So to quickly and cleanly decode any broken article code I wrote up an extremely simple application in C# .NET Winforms that will decode anything that needs to be fixed.

All of the relevant code in that application boils down to this:

private void btnConvert_Click(object sender, EventArgs e)
{
    //figure out which direction to convert the pasted text
    //and then do the switch with the already available
    //html utility in the .net framework
    if(txtEscaped.Text.Trim().Length > 0 )
    {
        txtNormal.Text = System.Web.HttpUtility.HtmlDecode(txtEscaped.Text);
    } else if (txtNormal.Text.Trim().Length > 0 )
    {
        txtEscaped.Text = System.Web.HttpUtility.HtmlEncode(txtNormal.Text);
    }
}

private void btnClearTextAreas_Click(object sender, EventArgs e)
{
    txtEscaped.Text = string.Empty;
    txtNormal.Text = string.Empty;
}Code language: C# (cs)

The .NET framework has built-in functions under System.Web.HttpUtility that do the conversion, making this project extremely fast and easy to make. Most of the work was messing with the interface of which I decided on a bit of a unique design. The user can paste text in either textbox and the program will fill whatever side is empty.

Before converting an article from classic, you can see that the code example is broken. It should show two actual ampersands instead of the HTML escaped version. It also looks double incorrect because there are 4 characters represented instead of 2 characters in the conditional statement. Not sure what happened!

I can go through the site and have those characters potentially programmatically decoded into their original characters with the tool I made, but there could be further issues with articles that have HTML in them or other weird quirks. I’ll then have to go back and make sure any of the HTML and URL generating code is re-converted to its encoded form.

The SyntaxHighlighter Evolved plugin doesn’t play well with classic articles. It also doesn’t work well with the 2023 “make everything blocks” theme.

After converting the article to blocks it is readable, but the issue of encoded and decoded characters remains.

I’m dropping the SyntaxHighlighter Evolved plugin. I experimented with a few others that work in a similar way, but the plan is to use the built-in code block with a plugin called “Syntax-highlighting Code Block (with Server-side Rendering)” which augments the code block rather than creating a new 3rd party block. For the long term I think that will work better than relying on a custom block that could break in the future. It isn’t especially featured, but it works well enough for the moment.

Even with a tool to help conversion I’m thinking this will be a lot of adjustment by hand to hopefully get code examples functional, but it’s very possible older articles on the site could have unintended errors.

I’ll get to it!