Add CodeMirror to Textarea - Javascript CodeMirror

Javascript examples for CodeMirror:Configuration

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

Description

Add CodeMirror to Textarea

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <link rel="stylesheet" href="https://codemirror.net/lib/codemirror.css"> 
      <script src="https://codemirror.net/lib/codemirror.js"></script> 
      <script src="https://codemirror.net/mode/xml/python.js"></script> 
      <script type="text/javascript">
window.onload=function(){/*from   w w  w .j  a v  a2s  .  c  o  m*/

    CodeMirror.fromTextArea(document.getElementById('textbox'), {
       mode: {
          name: "python",
          version: 2,
          singleLineStringErrors: false},
          lineNumbers: true,
          indentUnit: 4
       });
    }

      </script> 
   </head> 
   <body> 
      <textarea id="textbox" name="textbox"># Some Example code
import os
from package import ParentClass
@nonsenseDecorator
def doesNothing():
    pass
class ExampleClass(ParentClass):
    @staticmethod
    def example(inputStr):
        a = list(inputStr)
        a.reverse()
        return ''.join(a)
    def __init__(self, mixin = 'Hello'):
        self.mixin = mixin</textarea> 
      <br> 
      <button type="button" onclick="">Run</button> 
      <pre id="dynamicframe"></pre> 
      <div id="canvas"></div>  
   </body>
</html>

Related Tutorials