CodeMirror custom mode - apply styles on keywords - Javascript CodeMirror

Javascript examples for CodeMirror:Configuration

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

Description

CodeMirror custom mode - apply styles on keywords

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Using CodeMirror mode</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://codemirror.net/lib/codemirror.js"></script> 
      <link rel="stylesheet" type="text/css" href="https://codemirror.net/lib/codemirror.css"> 
      <style id="compiled-css" type="text/css">

.cm-style1 { color: red; }
.cm-style2 { color: blue; }


      </style> 
   </head> 
   <body> 
      <textarea rows="4" cols="30" id="cm" name="cm">aaa bbb ccc</textarea> 
      <script type="text/javascript">
CodeMirror.defineMode("mymode", function() {
    return {/*from   w w  w .  ja  va 2 s . co  m*/
        token: function(stream,state) {
            if (stream.match("aaa") ) {
                return "style1";
            } else if (stream.match("bbb") ) {
                return "style2";
            } else {
                stream.next();
                return null;
            }
        }
    };
});
var editor = CodeMirror.fromTextArea(document.getElementById('cm'), {
    mode: "mymode",
    lineNumbers: true
});

      </script>  
   </body>
</html>

Related Tutorials