Friday Fix: WordPress code tag with a bad character

Simple Wordpress Logo

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

 

This is the admin account for catsandcode.com. It should not be posting entries to the site

Comments are disabled

%d bloggers like this: