How can I activate by default, the code colors in CodeMirror (highlighting)

Question

I am using Code Mirror in a Extjs5 app, with theme "abcdef"

However, code text is just white, no color.

How can I activate by default, the code colors in CodeMirror (highlighting).

To better contextualize see this Post

EDIT

My Textarea:

items:[{
xtype: 'textarea',
anchor:'100%',
// name: 'scripts',
itemId:'textareaItemId',
height:'100%',
autoScroll: true,
listeners: {
        afterrender:function(textarea){
            var editableCodeMirror = CodeMirror.fromTextArea(textarea.getEl().query('textarea')[0], {
                  mode: "javascript",
                  theme: "abcdef",
                  lineNumbers: true,
                  keyMap:"sublime",
                  content: '',
                  matchBrackets: true,
                  electricChars:true,
                  autoClearEmptyLines: true,
                  extraKeys: {"Enter": "newlineAndIndentContinueComment"}
            });
            editableCodeMirror.setSize('100%', '100%');
        }
    }
}],

My itemClick method on grid listeners:

itemclick: function(grid, record, item, index, e, eOpts ) {
    var textAreaForCodeMirror = Ext.ComponentQuery.query('#textareaItemId')[0];
    var editableCodeMirror = textAreaForCodeMirror.getEl( ).query('.CodeMirror')[0].CodeMirror;
    editableCodeMirror.getDoc().setValue(record.get('scripts'));
},

CodeMirror files:

<link rel="stylesheet" type="text/css" href="CodeMirror/lib/codemirror.css">

<link rel="stylesheet" type="text/css" href="CodeMirror/theme/abcdef.css">
<link  rel="stylesheet" type="text/css" href="CodeMirror/theme/base16-dark.css">

<script src="CodeMirror/lib/codemirror.js"></script>

<!-- EDIT missing the following file -->
<script src="CodeMirror/mode/javascript/javascript.js"></script> 

<script src="CodeMirror/addon/edit/matchbrackets.js"></script>
<script src="CodeMirror/addon/comment/continuecomment.js"></script>

<script src="CodeMirror/addon/runmode/colorize.js"></script>

<script src="CodeMirror/addon/hint/javascript-hint.js"></script>
<script src="CodeMirror/addon/hint/html-hint.js"></script>
<script src="CodeMirror/addon/hint/css-hint.js"></script>
<script src="CodeMirror/addon/hint/anyword-hint.js"></script>
<script src="CodeMirror/addon/hint/sql-hint.js"></script>
<script src="CodeMirror/addon/lint/lint.js"></script>

<script src="CodeMirror/keymap/sublime.js"></script>

Answer 1

Did you load and enable a language mode? Ie load the script that implements the language you are using, and set the mode option. (And make sure the mode script has been loaded before you initialize the editor.)