Ace 编辑器模糊文本

Question

我想使用 Ace Editor 在教程中显示程序代码，就像 Twilio 那样。

我如何告诉 Ace 突出显示某些文本并模糊其余部分？见下文。

Answer 1

添加一个 css class 用于应用模糊滤镜，并将模糊 class 添加到来自 afterRender 事件的行

editor.renderer.on("afterRender", function(e, renderer) {
    var textLayer = renderer.$textLayer;
    var config = textLayer.config;
    var session = textLayer.session;

    var first = config.firstRow;
    var last = config.lastRow;

    var lineElements = textLayer.element.childNodes;
    var lineElementsIdx = 0;

    var row = first;
    var foldLine = session.getNextFoldLine(row);
    var foldStart = foldLine ? foldLine.start.row : Infinity;

    var useGroups = textLayer.$useLineGroups();

    while (true) {
        if (row > foldStart) {
            row = foldLine.end.row + 1;
            foldLine = textLayer.session.getNextFoldLine(row, foldLine);
            foldStart = foldLine ? foldLine.start.row : Infinity;
        }
        if (row > last)
            break;

        var lineElement = lineElements[lineElementsIdx++];
        if (lineElement) {
            if (row < 2 || row > 7 && row < 23 || row > 25) 
               lineElement.classList.add("blur")
        }
        row++;
    }
})

.ace_line.blur {
    -webkit-filter: blur(0.1em);
       -moz-filter: blur(0.1em);
        -ms-filter: blur(0.1em);
         -o-filter: blur(0.1em);
            filter: blur(0.1em);
}

<script src="https://ajaxorg.github.io/ace-builds/src/ace.js"></script>
<style>
    html, body, #editor { height: 100%; margin: 0; padding: 0 }
</style>
  
<pre id="editor"></pre>
<div id="return"></div>

<script>
    var editor = ace.edit("editor");    
    editor.session.setMode("ace/mode/html");
    editor.session.setValue(document.documentElement.outerHTML);
</script>

Ace 编辑器模糊文本

Ace editor blurring the text

ace-editor