我想更改 ace-editor 中的特定文本颜色

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-editor 中的动态生成代码，我想将颜色更改为 Method[GET] 为红色，Method[post] 更改为 Blue，以及 Method[put] 和 Method[delete]

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

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-editor 中更改文本颜色我想为不同的方法更改颜色 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了解更多关于模式的信息