I am publishing python code on a website (that is CMS). I have a python script which 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 unclear reasons, removes <pre> tag. Admin told me that I should use <div> instead of <pre>. Could you help me in styling a <div> to keep the wihte-space formatting?

  • John's answer is fine for the specific question asked, though this does degrade the semantics of your content a bit. Regarding the CMS stripping the pre tag, some applications have a setting that specifies what HTML is allowed in content. If you post a lot of pre-formatted text, it might be worth asking your admin to look into adjusting that if it exists for your application, rather than telling you to use (frankly) arbitrary workarounds.
    – Su'
    Jul 9, 2011 at 3:16

2 Answers 2


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

  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:

  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.

  • 2
    +1 for mentioning <code> and semantics. Note that <code> wraps whitespace by default, so you must assign white-space:nowrap to it too. Also <pre> is a block element where <code> is inline; so to mimic <pre>, display:block should be given. Jul 9, 2011 at 13:49
  • Omit "Courier New", default font matches your browser's pre more closely. Apr 19, 2017 at 17:45

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

  • 1
    You are correct about the value of the white-space should be pre and not nowrap. I've corrected my answer.
    – John Conde
    Jul 9, 2011 at 15:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.