: 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
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?
More posts by @Bethany197
2 Comments
Sorted by latest first Latest Oldest Best
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
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.
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2025 All Rights reserved.