Have you ever wanted to syntax highlight text area with specific content in it? Let's say it contains json data. We also need to have
code folding (+/- in front of objects to collapse them). The tool that can be used for this purpose is codeMirror:
- https://codemirror.net/index.html

One of the things that I want to note here is that textarea wont get updated when you enter data in codeMirror field. For that you need to call save() method of codeMirror like below:

var myEditor = CodeMirror.fromTextArea(page_content, {
     lineNumbers: true,
     mode: "markdown",
     lineWrapping: true,
     lineNumbers:false,
     indentWithTabs: true
 });

 function updateTextArea() {
     myEditor.save();
 }
 myEditor.on('change', updateTextArea);

Download all the demos from github:
- https://github.com/codemirror/codemirror


Instead of myEditor change you can update textarea on form submit.

#syntax_highlighting #syntax #codeMirror #code_folding