Preserve white-space in Page

Question

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.

Answer 1

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/

Answer 2

Don't use the visual editor. Copy the code into your 'HTML' view and it will preserve indentation. Copy it into 'Visual' view and your code will be all left-aligned...

http://codex.wordpress.org/Writing_Code_in_Your_Posts

Answer 3

Perhaps you could do remove_filter( 'the_content', 'wp_filter_kses' ); but that would remove the markup from the rest of the post as well, not just the code bits.

Perhaps you can try removing the filter as described above, then add a filter on 'the_content' with your own function. In that function you could specify exactly which things to translate to markup, and which things to leave in their original form (e.g. everything that is between <pre> tags for example).

Answer 4

You could use a code highlighting plugin, for example http://wordpress.org/extend/plugins/syntaxhighlighter/. They should be able to keep the white space.

Subsequent white space gets removed by default in HTML (for example: " " two spaces become " " one.

You should replace spaces with the code  , or you can add the code between <pre></pre> tags (indicating preformatted text)

(I've not tested the plugin or associated with)