我如何默认激活CodeMirror中的代码颜色(突出显示)
How can I activate by default, the code colors in CodeMirror (highlighting)
我在 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'));
},
代码镜像文件:
<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。加载实现您正在使用的语言的脚本,并设置模式选项。 (并确保在初始化编辑器之前已加载模式脚本。)
我在 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'));
},
代码镜像文件:
<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。加载实现您正在使用的语言的脚本,并设置模式选项。 (并确保在初始化编辑器之前已加载模式脚本。)