WordPress Code Markup plugin – long lines of code break my layout

I noticed that the Code Markup plugin I installed the other was breaking my WordPress layout in Internet Explorer. There is nothing wrong with the plugin, it’s just doing what it is supposed to do, i.e. display code snippets or blocks of code exactly – without rendering HTML in the browser. And I think if I had a WordPress layout where the sidebar and menu was on the left side of the page, it wouldn’t be an issue.

But I don’t (my sidebar is on the right) and I had to do something about it.

So here is how I fixed it:

Whenever you insert code into your post editor, you have to put these tags before it (and of course close them out at the end of your code snippet): <pre> and <code markup=”none”>

Then insert this into your theme’s CSS (style.css):

/* code markup */
code {
	font: 1.1em 'Courier New', Courier, Fixed;
	color: lightblue;
	}

pre {
  overflow-x: auto;
  width: 410px;
  overflow-y: auto;
  height: 110px;
}

html>body pre {
  overflow: auto;
  width: 410px;
  height: 110px;
}
/* End Code Markup*/

And the problem is fixed 🙂 .