Codemirror set up - Javascript CodeMirror

Javascript examples for CodeMirror:Configuration

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

Description

Codemirror set up

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://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.js"></script> 
      <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.20.2/codemirror.min.css"> 
      <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.20.2/addon/scroll/simplescrollbars.min.css"> 
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.20.2/codemirror.min.js"></script> 
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.20.2/addon/scroll/simplescrollbars.js"></script> 
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.20.2/mode/javascript/javascript.min.js"></script> 
      <style id="compiled-css" type="text/css">

.CodeMirror {//from   ww w .j  a  va  2s.c  o  m
   height: calc(100vh - 25px);
   width: 100%;
}
#content {
   cursor: pointer;
   position: relative;
}
#popup {
   display: none;
   position: absolute;
   top: 0;
   z-index: 1;
   width: 100%;
}


      </style> 
      <script type="text/javascript">
    window.onload=function(){
$(document).ready(function(){
    $('#content').click(
        function(){
            popup = $('#popup');
            if (popup.hasClass('show')) {
                popup.slideUp(250, function() {
                    popup.fadeOut(250).removeClass('show');
                });
            } else {
                popup.slideDown(250, function() {
                    popup.fadeIn(250).addClass('show');
                });
            };
        }
    );
});
    }

      </script> 
   </head> 
   <body> 
      <script type="text/javascript">
   var myCodeMirror = CodeMirror(document.body, {
     value: "function myScript(){return 100;}",
    mode:  "javascript",
    lineSeparator: null,
    theme: "default", // theme directory
    indentUnit: 2,
    smartIndent: true,
    tabSize: 2,
    indentWithTabs: false,
    electricChars: true,
    extraKeys: null,
    lineWrapping: false,
    lineNumbers: true,
    firstLineNumber: 1,
    scrollbarStyle: "overlay",
    inputStyle: "contenteditable",
    readOnly: false, // also "nocursor"
    showCursorWhenSelecting: false,
    lineWiseCopyCut: true,
    undoDepth: 200,
    historyEventDelay: 1250,
    autofocus: true
  });

      </script> 
      <div id="content">
          ABC 
         <div id="popup">
             DEF 
         </div> 
      </div>  
   </body>
</html>

Related Tutorials