skip to content W3C SVG

Wordpress - displaying code without line breaks or paragraph tags

Note: Since writing this blog post I quit using Wordpress and moved to Hugo.

Since updating Wordpress to v5.1, <br> and <p> symbols started appearing in my code snippets in Wordpress. I was pasting Python code into the editor. The solution I found was to:

Install the Syntax Highlighter plugin.

Go to the Code Editor. Surround your code with these tags:

You can select a Syntax Highlighter block in the Visual Editor under the ‘format’ tab. I found that selecting a language from the syntax highlighter menu in the Visual Editor corrupted my code, converting < or > symbols to &lt or &gt and various other shenanigans. So I stick with adding my code through the Code Editor.

When I go back to the visual editor, for the code block I see this:

Visual Editor interface getting confused over the code block entered in the Code Editor interface.

The code renders well on my web page, without any spurious formatting or addition of <br> and <p> symbols.

To get a smooth looking bash terminal output like displays, surround the output with <pre> and </pre> tags. Remove <p> and </p> tags. and tags put in by wordpress and any other spurious tags. Then you get something nice like:

Hello
    I'm a nicely
      formatted and indented bash terminal output.

I’ve spent an hour of my life fixing a problem I didn’t have with the previous version of Wordpress.