Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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.

share|improve this question
2  
Plugin recommendations are off topic here, so I took the liberty to edit that part out before you are hit with close votes. :) –  toscho Mar 9 '13 at 2:18
1  
Wow, I never would have guessed that it'd be off topic, but I can see why it got banned--endless questions asking for recommendations... Thanks for the edit. –  brentonstrine Mar 9 '13 at 2:31
add comment

3 Answers

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

share|improve this answer
    
Thanks, but I think you've misunderstood my problem. I am already using the HTML view exclusively. –  brentonstrine Mar 18 '13 at 17:11
    
@brentonstrine that's the way I post my codes with no changes. maybe a plugin or specific function filters it. –  revo Mar 18 '13 at 17:31
    
Can you show me an example of one of your pages? Are you using wordpress.com? Also, are you aware that I'm trying to preserve indendtation for example code that my visitors will see? –  brentonstrine Mar 18 '13 at 18:19
    
@brentonstrine not wordpress.com, but own-hosted. I can't give a live example on wordpess now but I tested again. As i said maybe a function filters it or you have styles set for <pre> tag! –  revo Mar 18 '13 at 19:10
    
Hm. It's not styles because WordPress collapses the spaces before it's even sent to the browser. I haven't messed with WP, no weird plugins or modifications that would affect this. What version of Wordpress do you have? I have 3.5.1. –  brentonstrine Mar 18 '13 at 21:50
add comment

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).

share|improve this answer
    
This looks like it's in the ballpark of being the right answer--however I'm unsure of where I would put remove_filter(). I usually prefer to markup the HTML myself, so I don't mind if Wordpress stops adding <p> tags everywhere whenever I hit enter, but I don't want to mess up ay of the other stuff Wordpress does. –  brentonstrine Mar 18 '13 at 17:14
    
You can add that line of code anywhere in your functions.php file. It is probably not the best way to solve your question, but it should do what you want without installing a plugin. A plugin that does the proper job will likely add additional features such as syntax coloring. –  Marc Dingena Mar 18 '13 at 21:15
add comment

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 &nbsp;, or you can add the code between <pre></pre> tags (indicating preformatted text)

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

share|improve this answer
    
That looks great. It's almost perfect. But Wordpress still strips out the whitespace indentation and I just get 1 or 2 spaces. :( They show demos of it working the way I need... why doesn't it work for me? –  brentonstrine Mar 18 '13 at 18:20
    
As far as I can tell, this would work for most installations of WordPress and there's something wrong with mine. –  brentonstrine Mar 22 '13 at 16:42
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.