CodeMirror with line numbers - Javascript CodeMirror

Javascript examples for CodeMirror:Configuration

  1. HOME
  2. Javascript
  3. CodeMirror
  4. Configuration

Description

CodeMirror with line numbers

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
      <link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/codemirror.css"> 
      <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/codemirror.js"></script> 
      <style id="compiled-css" type="text/css">

.CodeMirror {/*from  w  ww . j ava  2 s  .  c  om*/
   height: auto;
}
.CodeMirror-scroll {
   overflow-y: hidden;
   overflow-x: auto;
}


      </style> 
      <script type="text/javascript">
    $(window).load(function(){
var minLines = 5;
var startingValue = '';
for (var i = 1; i < minLines; i++) {
    startingValue += '\n';
}
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
    lineNumbers: true,
    gutter: true,
    lineWrapping: true,
    value: startingValue
});
editor.setValue(startingValue);
    });

      </script> 
   </head> 
   <body> 
      <textarea id="code"></textarea>  
   </body>
</html>

Related Tutorials