Ace编辑器模糊文本

Question

我希望使用Ace编辑器将程序代码显示为教程的一部分，例如Twilio。

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

Answer 1

添加css类以应用模糊过滤器，并将模糊类添加到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>