简体   繁体   English

默认情况下,如何激活CodeMirror中的代码颜色(突出显示)

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

I am using Code Mirror in a Extjs5 app, with theme "abcdef" 我正在主题为“ abcdef”的Extjs5应用程序中使用代码镜像

However, code text is just white, no color. 但是,代码文本只是白色,没有颜色。

How can I activate by default, the code colors in CodeMirror (highlighting). 默认情况下,如何激活CodeMirror中的代码颜色(突出显示)。

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方法:

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

Did you load and enable a language mode? 您是否加载并启用了语言模式? Ie load the script that implements the language you are using, and set the mode option. 即加载实现您正在使用的语言的脚本,并设置mode选项。 (And make sure the mode script has been loaded before you initialize the editor.) (并在初始化编辑器之前确保已加载模式脚本。)

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM