Question

我想在ace编辑器中将特定文本更改为某些颜色

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

上面是在ace编辑器中动态生成的代码，我想将颜色更改为Method [GET]更改为红色，Method [post]更改为蓝色，并将method [put]和Method [delete]更改为

我通过这样编写并使用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编辑器中更改文本颜色，我想为其他方法更改颜色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

了解更多有关模式的信息

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

1 个答案: