Css not working properly in codemirror editor

Question

I've installed the codemirror editor succesfully.
But there is one issue regarding css of that editor.

You can check here what I mean.

So how can I display the color after 3rd line in the editor.

Answer 1

you should look at

<div class="CodeMirror-gutters" style=" /*height: some_pixel*/; "><div class="CodeMirror-gutter CodeMirror-linenumbers" style="width: 28px;"></div></div>

instead of some_pixel after press enter or any keyword it will automatically set the height of the line number,
if you have that problem on start you might want to see how to create at first,
there is three common method,
The simplest is to define your Text Area and just use this code:

var YourCodeMirror = CodeMirror.fromTextArea(YourDefinedTextArea);

The best is put values using code:

var yourCodeMirror = CodeMirror(PlaceYouWant, {
  value: /*any code here :*/"function(){return 'anything'}",
  mode:  /*your mode ie.*/"javascript"
});

hope it helps

UPDATE: There is a manual site here : http://codemirror.net/doc/manual.html

Answer 2

CodeMirror parses HTML using the XML mode. To use it, the appropriate script must be included, same as with any other mode.

Add its dependency in your markup:

<script type="text/javascript" 
        src="/site.com/js/libs/codemirror/mode/xml/xml.js"></script>

and set the mode to xml:

config = {
    mode : "xml",
    // ...
};

In addition, you may want to configure the parser to allow for non well-formed XML. You can do so by switching the htmlMode flag on:

config = {
    mode : "xml",
    htmlMode: true,
    // ...
};