Removing leading whitespace from indented HTML source in pre/code tags

Question

I currently have the following html within a pre-code block:

                <pre class="prettyprint"><code>                     &lt;html&gt;                     &lt;body&gt;                      &lt;form name=&quot;input&quot; action=&quot;html_form_action.asp&quot; method=&quot;get&quot;&gt;                     &lt;input type=&quot;radio&quot; name=&quot;sex&quot; value=&quot;male&quot;&gt;Male&lt;br&gt;                     &lt;input type=&quot;radio&quot; name=&quot;sex&quot; value=&quot;female&quot;&gt;Female&lt;br&gt;                     &lt;input type=&quot;submit&quot; value=&quot;Submit&quot;&gt;                     &lt;/form&gt;                       &lt;p&gt;If you click the &quot;Submit&quot; button, the form-data will be sent to a page called &quot;html_form_action.asp&quot;.&lt;/p&gt;                      &lt;/body&gt;                     &lt;/html&gt;                 </code></pre> 

It is indented within the html source for better structure within the document. How can I remove the leading whitespace? Through the use of javascript or is there a more simple method.

Answer 1

The question asks if there's a JavaScript solution or a simpler method for removing leading whitespace. There's a simpler method:

CSS

pre, code {     white-space: pre-line; } 

DEMO

white-space

The white-space property is used to describe how whitespace inside the element is handled.

pre-line

Sequences of whitespace are collapsed.

Answer 2

I really like Homam's idea, but I had to change it to deal with this:

<pre><code><!-- There's nothing on this line, so the script thinks the indentation is zero -->     foo = bar </code></pre> 

To fix it, I just take out the first line if it's empty:

[].forEach.call(document.querySelectorAll('code'), function($code) {     var lines = $code.textContent.split('\n');      if (lines[0] === '')     {         lines.shift()     }      var matches;     var indentation = (matches = /^[\s\t]+/.exec(lines[0])) !== null ? matches[0] : null;     if (!!indentation) {         lines = lines.map(function(line) {             line = line.replace(indentation, '')             return line.replace(/\t/g, '    ')         });          $code.textContent = lines.join('\n').trim();     } }); 

(I'm also processing <code> tags instead of <pre> tags.)