title: Removing blank lines in <pre> with javascript?
body: <p>How all formats of writing html code below can be issued the same result as in the picture?
  <a href="https://i.stack.imgur.com/xOqGn.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xOqGn.png" alt="Remove Blank Lines"></a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;pre&gt;&lt;code&gt;The text line 1
  The text line 2
  The text line 3&lt;/code&gt;&lt;/pre&gt;
  
  &lt;pre&gt;&lt;code&gt;The text line 1
  The text line 2
  The text line 3
  &lt;/code&gt;&lt;/pre&gt;
  
  &lt;pre&gt;&lt;code&gt;
  The text line 1
  The text line 2
  The text line 3
  &lt;/code&gt;&lt;/pre&gt;
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>(function() {
      var pre = document.getElementsByTagName('pre'),
          pl = pre.length;
      for (var i = 0; i &lt; pl; i++) {
          pre[i].innerHTML = '&lt;span class="line-number"&gt;&lt;/span&gt;' + pre[i].innerHTML + '&lt;span class="cl"&gt;&lt;/span&gt;';
          var num = pre[i].innerHTML.split(/\n/).length;
          for (var j = 0; j &lt; num; j++) {
              var line_num = pre[i].getElementsByTagName('span')[0];
              line_num.innerHTML += '&lt;span&gt;' + (j+1) + '&lt;/span&gt;';
          }
      }
  })();
  </code></pre>
  
  <p>Code details can be seen at <a href="http://jsfiddle.net/hidyanaputri/sqq2qkon/1/" rel="nofollow noreferrer">http://jsfiddle.net/hidyanaputri/sqq2qkon/1/</a></p>
  
  <p>Bottom line if the first line or the last row is empty it will not appear numbered. Not a problem if there is a blank line in the middle.</p>