在 ace 编辑器中突出显示整行

Question

我在我的角度应用程序中使用 ace 编辑器，在其中以只读模式显示 json 数据。现在我想突出显示包含特定字符串的行。

Answer 1

您可以使用 searchHighlight 的修改版本

//samples/hello world

// Easiest way to run ACE editor in container with id="example"
var editor = ace.edit("example", {
    theme: "ace/theme/textmate",
    mode: "ace/mode/javascript",
    value: "x".repeat(1000).split("").map((_,i)=>i).join("\n")
});
 
var {SearchHighlight} = ace.require("ace/search_highlight")

var highlight = new SearchHighlight(null, "my-marker", "fullLine");

highlight.update = function (html, markerLayer, session, config) {
        if (!this.regExp)
            return;
        var start = config.firstRow, end = config.lastRow;
        
        for (var i = start; i <= end; i++) {
            
            var ranges = this.cache[i];
            if (ranges == null) {
                var line = session.getLine(i);
                if (this.regExp.test(line)) {
                    ranges = new ace.Range(i, 0, i, 1)
                }
                this.cache[i] = ranges || "";
            }
            if (ranges) {
                var rangeToAddMarkerTo = ranges.toScreenRange(session);
                markerLayer.drawFullLineMarker(html, rangeToAddMarkerTo, this.clazz, config);
            }
        }
    };

editor.session.addDynamicMarker(highlight);


highlight.setRegexp(/2|3|5/g);

.my-marker {
    background: yellow;
    position: absolute;
}

<script src="https://www.unpkg.com/ace-builds@latest/src-noconflict/ace.js"></script>
<div id='example' style="height: 80vh"></div>