I just completed the responsive web design project “Build a Technical Documentation Page”. There is one item that is bugging me, which I would like to resolve before moving on.
Here is a link to my pen: https://codepen.io/joe-devine/pen/mdVzbzP
I have the following css for my code elements:
background: #f2f2f2; padding: 15px; white-space: pre-wrap; display: block; margin: 10px; border-radius: 5px;
My issue is that white-space is not being handled as I would expect. Tabs and line breaks seem to be stripped out, which makes the displayed code look poorly formatted. For example, instances where there should be double line break, only a single line break is displayed.
I’ve also tried just using
white-space: pre; and it did not resolve my issue.
I appreciate any help!