Friday Fix: WordPress code tag with a bad character

Inside WordPress’s WYSIWYG editor, if you start a line of text, inside a code tag with a bad character, in my case, the ‘#’ character, the output gets screwed up. Here’s how to fix it.

If anyone looked at my previous post in the first week or two after I posted it, you may have noticed how ugly the post was when it came to the displaying my console’s output. This is because I put the console’s output inside a <code> tag in the WordPress WYSIWYG editor. My intent was to differentiate my blog post text from the output of the console I was using as an example. However, after wrapping the console output in the tag, this is what it looked like:

Code Tag with Incorrect Output


I have successfully used the <code> tag in WordPress before to stylize blocks of text, so that’s what I was using here to represent the console output. I didn’t have any trouble in any previous posts, so I wasn’t sure what was different this time. After experimenting a bit, I found that the “#” character that begins each line was the culprit.

code tag with a bad character at the start of each line


The fix was simple, I added a space before each line.

Code tag with a bad character, but prepended with spaces


This small change gave the output the desired effect.

Code output with corrrect formatting