Я хочу изменить конкретный цвет текста внутри туза-редактора - PullRequest
Новая
       9

Я хочу изменить конкретный цвет текста внутри туза-редактора

0 голосов
/ 23 января 2019

Я хочу изменить определенный текст на некоторые цвета внутри 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] в 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-редактора, как было упомянуто выше, я хочу изменить цвета для другого метода. ПОЛУЧИТЬ ПОСТ Удалить и поставить я пробовал, но это не сработает

1 Ответ

0 голосов
/ 23 января 2019

Если это не встроено в другой код и является отдельным файлом, вы можете создать новый режим 

// 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

...