我想在ace编辑器中改变特定的文本颜色。

Question

我想在ace-editor中将特定的文本更改为一些颜色

DEBUG [ApiV1AutocodGetNoParams] : Method [GET]
DEBUG [ApiV1AutocodeGetNoParams] : Request []
DEBUG [ApiV1AutocodeGetNoParams] : Method [POST]
DEBUG [ApiV1AutocodeGetNoParams] : Request-Headers []
DEBUG [ApiV1AutocodeGetNoParams] : Response
DEBUG [ApiV1AutocodeGetNoParams] : Method [DELETE]

上面是动态生成的代码里面的ace编辑器，我想更改颜色为红色的MethodGET和方法帖子的蓝色和一些方法输入和方法删除

我试着像这样写，也使用了class属性

this.editor.getEditor().getSession().addMarker(new Range(2, 2, 2, 6), 
"foo", "ace_active-line");
editor.container.classList.add("myEditor")

.myEditor{
color: blue;
background-color: aqua;
}

我想要改变文本颜色内的ace编辑器，就像上面提到的，我想改变颜色为不同的方法得到后，删除和放置我尝试，但它不起作用

Answer 1

如果这没有嵌入到其他代码中，并且是一个单独的文件，则可以创建一个新的模式

​

// define a mode for highlighting logs
ace.define("ace/mode/my-log-mode", function(require, exports, module) {
    
var oop = require("ace/lib/oop");
var TextHighlightRules = require("ace/mode/text_highlight_rules").TextHighlightRules;
var TextMode = require("./text").Mode;
var LogHighlightRules = function() {
    this.$rules = {
        "start" : [{
            token : "keyword",
            regex : /Method \[(?:POST|GET|)\]/,
        }], 
    };
};
oop.inherits(LogHighlightRules, TextHighlightRules);

var Mode = function() {
    this.HighlightRules = LogHighlightRules;
};
oop.inherits(Mode, TextMode);

(function() {
}).call(Mode.prototype);

exports.Mode = Mode;
});

// set mode to the editor
editor = ace.edit("log", {
  mode: "ace/mode/my-log-mode"
});

<script src=http://ajaxorg.github.io/ace-builds/src/ace.js></script>
<div id=log style="height:500px">DEBUG [ApiV1AutocodGetNoParams] : Method [GET]
DEBUG [ApiV1AutocodeGetNoParams] : Request []
DEBUG [ApiV1AutocodeGetNoParams] : Method [POST]
DEBUG [ApiV1AutocodeGetNoParams] : Request-Headers []
DEBUG [ApiV1AutocodeGetNoParams] : Response
DEBUG [ApiV1AutocodeGetNoParams] : Method [DELETE]</div>

​

您可以从https://ace.c9.io/#nav=higlighter了解有关模式的更多信息