Search code examples
javascriptjquerycodemirror

How do you change CodeMirror settings while the web page is running?

I am using CodeMirror to transform my textareas to syntax highlighters. The code looks something like this: 

<textarea id="editor">
<html>
<body>
<h1>Some Heading</h1>

</body>
</html>
</textarea>
<input type="checkbox" id="ln" checked/>
<label for="ln">Toggle Line Numbers</label>
<script>
var editor = CodeMirror.fromTextArea(document.getElementById('editor'), {
  mode: "javascript",
  theme: "cobalt",
  lineNumbers: true
});
editor.setSize(1000, 500)
</script>

And everything is working well. But I can't change any settings after configuration. I want to know, how do I change, for example, line numbers, to off or on or to any other mode when the web page is running?

Solution

  • You can use the method below to change the CodeMirror settings after its initialization.

    editor.setOption("OPTION_NAME", YOUR_VALUE); // Structure
editor.setOption("lineNumbers", false);      // Example

    For more info about the CodeMirror options, see #setOption and #event_optionChange on the CodeMirror documentation site.