我想在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编辑器里面的动态生成代码，我想将方法​​[GET]改为红色，方法[post]改为Blue，方法[put]和方法[删除]

我尝试写这样的，并使用类属性

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编辑器中更改文本颜色我想改变不同方法的颜色GET POST删除并把我试过但它不会工作

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了解更多有关模式的信息