Formatting <code>?

Question

I have serious trouble displaying code blocks in my theme.

I want to display something like:

<something>
     <something-else>
          Content
     </something-else>
</something>

And it works fine everywhere, but doing that inside code tag:

<code>
    <something>
         <something-else>
              Content
         </something-else>
    </something>
</code>

Displays code block looking like:

<something>
<something-else>
Content
</something-else>
</something>

And setting code's CSS to:

white-space: pre-wrap;

Produces confusing:

<something>
</br>
   <something-else>
</br>
      Content
</br>
   </something-else>
</br>
</something>

Almost perfect, but where these come from?

Additionally I'm disabling WP AutoP and it works, but not within code tags:

functions.php

remove_filter ('the_content',  'wpautop');
add_filter( 'the_content', 'wpautop' , 12);

Any ideas?

Answer 1

You either need to add such code via the HTML editor (and not switch back to the Visual editor), or else you will need to pass a custom configuration to the Visual editor.

I have similar needs, and here's what I use (in functions.php):

// http://tinymce.moxiecode.com/wiki.php/Configuration
function cbnet_tinymce_config( $init ) {

// Change code cleanup/content filtering config

    // Don't remove line breaks
    $init['remove_linebreaks'] = false; 
    // Convert newline characters to BR tags
    //$init['convert_newlines_to_brs'] = true; 
    // Preserve tab/space whitespace
    $init['preformatted'] = true; 
    // Add to list of formats to remove with Remove Format button
    $init['removeformat_selector'] = 'b,strong,em,i,span,ins,del,h1,h2,h3,h4,h5,h6,pre';
    // Do not remove redundant BR tags
    $init['remove_redundant_brs'] = false;

// Add to list of valid HTML elements (so they don't get stripped)

    // IFRAME
    $valid_iframe = 'iframe[id|class|title|style|align|frameborder|height|longdesc|marginheight|marginwidth|name|scrolling|src|width]';
    // PRE
    $valid_pre = 'pre[id|name|class|style]';
    // DIV
    $valid_div = 'div[align<center?justify?left?right|class|dir<ltr?rtl|id|lang|onclick|ondblclick|onkeydown|onkeypress|onkeyup|onmousedown|onmousemove|onmouseout|onmouseover|onmouseup|style|title]';

    // Concatenate 
    $cbnet_valid_elements = $valid_iframe . ',' . $valid_pre . ',' . $valid_div;

    // Add to extended_valid_elements if it alreay exists
    if ( isset( $init['extended_valid_elements'] ) ) {
        $init['extended_valid_elements'] .= ',' . $cbnet_valid_elements;
    } else {
        $init['extended_valid_elements'] = $cbnet_valid_elements;
    }

// Pass $init back to WordPress
    return $init;
}
add_filter('tiny_mce_before_init', 'cbnet_tinymce_config');

Specifically, you'll want to set remove_linebreaks to false, set preformatted to true, and probably add the <pre> tag to the whitelist.