: How to mimic with 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

@Reiling115

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: reference.sitepoint.com/css/white-space

Vote Up Vote Down

@Kevin317

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.

Vote Up Vote Down