How to mimic <pre> with <div>

Question

I am publishing python code on some website that is CMS. I have a python script that reads any python script and makes a syntax-colored HTML out of it. Then I copy/paste this HTML into the CMS editing window.

The problem is that my python syntax highlighting script uses <pre> tag to keep tabs/spaces which are quite important in python. The CMS however for some reasons that are unclear for me removes any <pre> tag. Admin told me that I should use <div> instead of <pre>. Could you help me styling a <div> to keep the wihte-space formatting?

Answer 1

You can do that with the CSS white-space rule:

div
{
  font-family: "Courier New", monospace;
  white-space: pre;
}

The fonts included in that rule make each character the same width which is common formatting for text in a <pre> tag.

Keep in mind that this will make all of your <div> tags behave this way. Ideally you will assign those <div> tags a class to affect only the ones you want to mimic <pre>. Something like:

div.code
{
  font-family: "Courier New", monospace;
  white-space: pre;
}

Or, better yet, use the <code> tag if it isn't stripped out by your CMS. It acts like the <pre> tag but is semantically correct for displaying code.

Answer 2

To format a DIV like an PRE, you need a white-space: pre; for the DIV. Additionally you should use a monospace font, as stated in the first answer.

The solution white-space: nowrap; is not right as it does NOT display tabs and still will collapse multiple spaces (@John Conde).

• nowrap: Specifying nowrap ensures that sequences of whitespace will collapse into a single space character, but line breaks will be suppressed.
• pre: Specifying pre ensures that sequences of whitespace won’t collapse. Lines are only broken at new lines in the markup (or at occurrences of "\a" in generated content).

from: http://reference.sitepoint.com/css/white-space