Ace editor blurring the text -

i'd use ace editor display program code part of tutorial, twilio does.

how can tell ace highlight text , blur rest? see below.

add css class applying blur filter, , add blur class lines afterrender event

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>