Css not working properly in codemirror editor

Question

I have successfully installed the codemirror editor .
But there is one problem with the css of this editor.

You can check here what I mean.

So, how can I display the color after the third line in the editor.

Answer 1

you have to look

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

instead of some_pixel after pressing enter or any keyword it will automatically set the height of the line number,
if you have this problem at startup, you can see how to create first,
There are three common methods,
The simplest is to define your text area and just use this code:

 var YourCodeMirror = CodeMirror.fromTextArea(YourDefinedTextArea); 

It is best to set values ​​using code:

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

hope this helps

UPDATE: there is a guide website here: http://codemirror.net/doc/manual.html

Answer 2

CodeMirror parses HTML using XML mode. To use it, you must enable the appropriate script, as in any other mode.

Add your dependency to 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 can configure the parser so that it does not format XML. You can do this by switching the htmlMode flag to:

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