title: Trouble with excess white-space inside PRE elements
body: <p>So, I normally format my HTML source code like so:</p>
  
  <pre><code>&lt;article&gt;
      &lt;section&gt;
          &lt;p&gt;
              Text...
              Text...
          &lt;/p&gt;
          &lt;pre&gt;
              Code...
              Code...
              Code...
          &lt;/pre&gt;
          &lt;p&gt;
              Text...
              Text...
          &lt;/p&gt;
      &lt;/section&gt;
  &lt;/article&gt;
  </code></pre>
  
  <p>However, this formatting style is not compatible with PRE elements since all white-space inside those elements is significant. </p>
  
  <p><strong>See here:</strong> <a href="http://jsfiddle.net/pjEYm/" rel="nofollow">http://jsfiddle.net/pjEYm/</a></p>
  
  <p>In order to fix the presentation of the code block, I would have to format the source code like so:</p>
  
  <pre><code>&lt;article&gt;
      &lt;section&gt;
          &lt;p&gt;
              Text...
              Text...
          &lt;/p&gt;
          &lt;pre&gt;
              Code...
  Code...
  Code...&lt;/pre&gt;
          &lt;p&gt;
              Text...
              Text...
          &lt;/p&gt;
      &lt;/section&gt;
  &lt;/article&gt;
  </code></pre>
  
  <p><strong>See here:</strong> <a href="http://jsfiddle.net/pjEYm/1/" rel="nofollow">http://jsfiddle.net/pjEYm/1/</a></p>
  
  <p>This, however, reduces the tidiness and readability of my source code.</p>
  
  <p>I would like to use a solution which would enable me to preserve my formatting style.</p>
  
  <p>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.</p>
  
  <p><strong>See here:</strong> <a href="http://jsfiddle.net/pjEYm/2/show/" rel="nofollow">http://jsfiddle.net/pjEYm/2/show/</a></p>
  
  <p>So, I went with JavaScript:</p>
  
  <pre><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 &gt; 1 &amp;&amp; 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></pre>
  
  <p><strong>Live demo:</strong> <a href="http://jsfiddle.net/pjEYm/3/" rel="nofollow">http://jsfiddle.net/pjEYm/3/</a></p>
  
  <p>While this works, I would still prefer some sort of <strong>CSS solution</strong>. Is there one?</p>