想要在 Ace Editor 中突出显示/更改某些单词的颜色? [英] Want to highlight/change color of certain words in Ace Editor?
本文介绍了想要在 Ace Editor 中突出显示/更改某些单词的颜色?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在使用以下内容设置文本:
I am setting text using the following:
var someString = 'Mark has solved the problem';
editor.getSession().setValue(someString);
在上述情况下，只需要标记"以蓝色显示.有没有办法在ace编辑器中加载html标签或操纵某些单词的样式?
In above case, Need only 'Mark' to appear in blue color. Is there a way to load html tags in ace editor or manipulate styling of certain words?
推荐答案
您可以创建自定义突出显示规则来执行此操作
You can create custom highlight rules to do this
<!DOCTYPE html>
<html lang="en">
<head>
<title>ACE in Action</title>
<meta charset="utf-8">
<style type="text/css" media="screen">
#editor {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.ace_customTokenName {color: darkred}
</style>
</head>
<body>
<div id="editor" style="height: 500px; width: 800px"></div>
<script src="https://ajaxorg.github.io/ace-builds/src/ace.js"></script>
<script>
define('ace/mode/custom', [], function(require, exports, module) {
var oop = require("ace/lib/oop");
var TextMode = require("ace/mode/text").Mode;
var Tokenizer = require("ace/tokenizer").Tokenizer;
var CustomHighlightRules = require("ace/mode/custom_highlight_rules").CustomHighlightRules;
var Mode = function() {
this.HighlightRules = CustomHighlightRules;
};
oop.inherits(Mode, TextMode);
(function() {
}).call(Mode.prototype);
exports.Mode = Mode;
});
define('ace/mode/custom_highlight_rules', [], function(require, exports, module) {
var oop = require("ace/lib/oop");
var TextHighlightRules = require("ace/mode/text_highlight_rules").TextHighlightRules;
var CustomHighlightRules = function() {
var keywordMapper = this.createKeywordMapper({
"variable.language": "this",
"keyword": "Mark|Ben|Bill",
"constant.language": "true|false|null",
// it is also possible to use css, but that may conflict with themes
"customTokenName": "problem"
}, "text", true);
this.$rules = {
"start": [
{
regex: "\w+\b",
token: keywordMapper
},
]
};
this.normalizeRules()
};
oop.inherits(CustomHighlightRules, TextHighlightRules);
exports.CustomHighlightRules = CustomHighlightRules;
});
var editor = ace.edit("editor");
editor.session.setMode("ace/mode/custom");
var someString = 'Mark has solved the problem';
editor.session.setValue(someString);
</script>
</body>
</html>这篇关于想要在 Ace Editor 中突出显示/更改某些单词的颜色?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
