title: codemirror rendering code on single line
body: <h2><a href="http://fiddle.jshell.net/tLth8/6/show/" rel="noreferrer">http://fiddle.jshell.net/tLth8/6/show/</a></h2>
  
  <p>in IE &lt;9 the code is highlighted however new lines are ignored and the code  is all on a single line like below
  <img src="https://i.stack.imgur.com/vBbS9.png" alt="How the code is rendered in ie&lt;9"></p>
  
  <p>how can i get the lines to be rendered properly as in the source code like below</p>
  
  <p><img src="https://i.stack.imgur.com/6Q3PI.png" alt="How the code should be rendered, (google chrome)"></p>
  
  <p>I have tried altering the css so lines are <code>display:block;</code> however there is no difference</p>
  
  <p>what i have tried</p>
  
  <pre><code>.CodeMirror pre {
      display:block;
  }
  .CodeMirror-lines div{
      display:block;
  }
  </code></pre>
  
  <h2>jQuery source:</h2>
  
  <pre><code>$("span.code, div.code").each(function () {
  
      var $this = $(this),
          isdiv = $this.is("div"),
          $code = (isdiv) ? $this.html().replace(/^(\r\n)|(\n)/, ''):$this.html(),
          $unescaped = (isdiv) ? $('&lt;div/&gt;').html($code).text() : $('&lt;span/&gt;').html($code).text();
  
      $this.empty();
      if (isdiv) {
          $this.css({
              "display": "block"
          });
          $this.after('&lt;div class="clear"/&gt;');
      }
  
      var editor = CodeMirror(this, {
          value: $unescaped,
          mode: (isdiv) ? "text/html" : "javascript",
          lineNumbers: (isdiv) ? true : false,
          readOnly: false
      });
      if (isdiv) {
          var linecount = editor.lineCount();
          for (j = 0; j &lt; linecount; j++) {
              editor.indentLine(j);
  
          }
      }
  });
  </code></pre>