Ace 编辑器可以在代码旁边显示标签吗?

Question

我正在尝试在 Ace 编辑器中显示有关代码行的一些信息。因此，我想知道是否有可能在不是代码一部分的行旁边或上方添加信息标签。

例如，在 JavaScript 文件中，我们可以有：

var x = "some string";赋值表达式

为"赋值表达式"文本提供一些额外的样式;但是，当保存文本时，我不希望"赋值表达式"成为内容的一部分。

我很想知道这是否可能。

Answer 1

也许使用 CSS "after" 伪类？

像.ace_line.foo:after {content: 'assignment expression';}？

Answer 2

你可以用类名标记不同的代码行，比如给var x = "some string";类"字符串赋值"。

要使用类标记文本，您可以创建自己的模式突出显示器，该模式突出显示器继承自您使用的任何语言。这是一个扩展 c# 的示例

ace.define("ace/mode/custom_highlight_rules", ["require", "exports", "module", "ace/lib/oop", "ace/mode/text_highlight_rules", "ace/mode/behaviour/xml", "ace/mode/behaviour/cstyle"], function (require, exports, module) {
    "use strict";
    var oop = require("../lib/oop");
    var TextMode = require("../mode/text").Mode;
    var Tokenizer = require("../tokenizer").Tokenizer;
    var TextHighlightRules = require("./text_highlight_rules").TextHighlightRules;
    var CSharpHighlightRules = require("./csharp_highlight_rules").CSharpHighlightRules;
var Mode = function () {
    this.$tokenizer = new Tokenizer(new CustomHighlightRules().getRules());
}

var CusomHighlightRules = function() {
    this.embedRules(CSharpHighlightRules,
        "", [
            {
                token: "csharp.assignment",
                regex: "/[a-zA-A] *= *[a-zA-Z/
            },
            {
                token: "csharp.methodcall",
                regex: "/[a-zA-Z]+()/
        ]);

这将使它标记与您添加的任何正则表达式匹配的所有代码您选择的课程。

在这种情况下，uit 找到字母，然后找到空格或 no，等号和更多字母。 并给它两个类 Csharp 和 ace_assignment （Ace 添加了ace_）

之后，您可以进入CSS并执行：After Psuedo类或jQuery查找。