Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

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?

share|improve this question
    
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 '11 at 3:16

2 Answers 2

up vote 12 down vote accepted

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.

share|improve this answer
1  
+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. –  koiyu Jul 9 '11 at 13:49

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

share|improve this answer
    
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 '11 at 15:46

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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