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

【问题标题】：How can I activate by default, the code colors in CodeMirror (highlighting)默认情况下如何激活 CodeMirror 中的代码颜色（突出显示）
【发布时间】：2015-12-03 03:37:19
【问题描述】：

我在 Extjs5 应用程序中使用 Code Mirror，主题为“abcdef”

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

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

为了更好地了解上下文，请参阅Post

编辑

我的文本区域：

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

代码镜像文件：

<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>

【问题讨论】：

您是否加载并启用了语言模式？ IE。加载实现您正在使用的语言的脚本，并设置mode 选项。（并确保在初始化编辑器之前已经加载了模式脚本。）
感谢 Marijn 的帮助。我用我的代码编辑我的帖子。我试过使用各种模式都没有成功。我不明白我的代码是否有问题或缺少某些 CodeMirror 文件。
我没有看到CodeMirror/mode/javascript/javascript.js在那里的任何地方。
感谢 Marijn。实际上缺少这个文件，插入在之后（如果放置在给出错误之前）。也许您可以将您的最后一条评论放在答案中，这样我就可以投票（超过应得的：帮助非常有用和有效）并将帖子标记为已回答。现在效果很好。再次感谢。

标签： javascript extjs extjs5 codemirror

【解决方案1】：

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

【讨论】：