Trouble with excess white-space inside PRE elements

[ht11bv]

So, I normally format my HTML source code like so:\[code\]<article> <section> <p> Text... Text... </p> <pre> Code... Code... Code... </pre> <p> Text... Text... </p> </section></article>\[/code\]However, this formatting style is not compatible with PRE elements since all white-space inside those elements is significant. See here: http://jsfiddle.net/pjEYm/In order to fix the presentation of the code block, I would have to format the source code like so:\[code\]<article> <section> <p> Text... Text... </p> <pre> Code...Code...Code...</pre> <p> Text... Text... </p> </section></article>\[/code\]See here: http://jsfiddle.net/pjEYm/1/This, however, reduces the tidiness and readability of my source code.I would like to use a solution which would enable me to preserve my formatting style.I tried setting the \[code\]white-space\[/code\] property. The closest to a solution is \[code\]white-space: pre-line\[/code\], but it also removes all indentation from the code.See here: http://jsfiddle.net/pjEYm/2/show/So, I went with JavaScript:\[code\]$( 'pre' ).each( function () { var lines, offset; // split the content of the PRE element into an array of lines lines = $( this ).text().split( '\n' ); // the last line is expected to be an empty line - remove it if ( lines.length > 1 && lines[ lines.length - 1 ].trim() === '' ) { lines.pop(); } // how much white-space do we need to remove form each line? offset = lines[ 0 ].match( /^\s*/ )[ 0 ].length; // remove the exess white-space from the beginning of each line lines = lines.map( function ( line ) { return line.slice( offset ); }); // set this new content to the PRE element $( this ).text( lines.join( '\n' ) );});\[/code\]Live demo: http://jsfiddle.net/pjEYm/3/While this works, I would still prefer some sort of CSS solution. Is there one?