Wordpress - displaying code without line breaks or paragraph tags
Last updated: Jan 23, 2023
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 < or > 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:
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.