默认情况下，如何激活CodeMirror中的代码颜色（突出显示）

Question

我正在主题为“ abcdef”的Extjs5应用程序中使用代码镜像

但是，代码文本只是白色，没有颜色。

默认情况下，如何激活CodeMirror中的代码颜色（突出显示）。

为了更好地了解背景，请参阅这篇文章

编辑

我的文字区：

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%');
        }
    }
}],

我在网格侦听器上的itemClick方法：

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文件：

<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

您是否加载并启用了语言模式？ 即加载实现您正在使用的语言的脚本，并设置mode选项。 （并在初始化编辑器之前确保已加载模式脚本。）