I am not sure what to do after this:
<link rel="stylesheet" href="lib/codemirror.css"> <script src="lib/codemirror.js"></script> <script> var editor = CodeMirror.fromTextArea(myTextarea, { mode: "text/html" }); </script> can someone help me?
does this points you to the right direction?
<link rel="stylesheet" href="lib/codemirror.css"> <script src="lib/codemirror.js"></script> <script src="mode/javascript/javascript.js"></script> <script src="addon/fold/foldcode.js"></script> </head> <body> <form style="width:500px;"> <textarea id="code" name="code"> alert("HI"); //says HII </textarea> </form> <script> window.onload = function() { window.editor = CodeMirror.fromTextArea(code, { mode: "javascript", lineNumbers: true, lineWrapping: true, foldGutter: { rangeFinder: new CodeMirror.fold.combine(CodeMirror.fold.brace, CodeMirror.fold.comment) }, gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"] }); }; </script> </body> </html> First: you have to select the first element that matches the selector.
$("#editor") won't do it, it has to be $("#editor")[0]
Second: The following code is all you need to get it to work:
window.onload = function () { var editor = CodeMirror.fromTextArea($("#editor")[0], { lineNumbers: true, lineWrapping: true, }); };<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.29.0/codemirror.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.29.0/codemirror.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.29.0/mode/javascript/javascript.js"></script> </head> <body> <p>Type some javascript below</p> <textarea id="editor"></textarea> </body> </html>