Preserve white-space in Page

by

I frequently post pages with code examples. However, WordPress strips out whitespace, thus ruining the indentation and formatting of my code. So this:

<pre>
    selector {
       property: value;
       property: value;
    }
</pre>

becomes this:

selector {property: value;property: value;}

I found the Raw HTML plugin, which fixes linebreaks, but even with Raw HTML, the spaces aren’t preserved, so it looks like this:

selector {
property: value;
property: value;
}

I also have played with the Preserved HTML Editor Markup plugin, but it does not support <pre> or <code> tags, which is exactly where I need it. How can I preserve multiple contiguous spaces?

Edit: Just to clarify, the white space is stripped out by WordPress before it is sent to the browser: viewing the source code reveals that the spaces have been collapsed.

4 Answers
4

You are not wrapping the code inside <code> tags.

<pre>
<code>    
selector {
           property: value;
           property: value;
        }
</code>
</pre>

Furthermore, most syntax highlighting plugins also use this format (both <pre> and <code>) to render code.
Here you have more about this.
https://css-tricks.com/snippets/css/make-pre-text-wrap/

Leave a Comment