如何在默认情况下激活CodeMirror(高亮显示)中的代码颜色

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

本文关键字：显示 颜色 代码 高亮 默认 情况下 CodeMirror 激活      更新时间：2023-09-26

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

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

如何默认激活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>

是否加载并启用语言模式?也就是说，加载实现你正在使用的语言的脚本，并设置模式选项。(并且确保在初始化编辑器之前已经加载了模式脚本)

相关文章：