ace more permanent highlight (search click away)

https://stackoverflow.com/questions/22166784/dynamically-update-syntax-highlighting-mode-rules-for-the-ace-editor
<br>
https://cloud9-sdk.readme.io/docs/highlighting-rules
<br>
https://ace.c9.io/#nav=higlighter


<!DOCTYPE html>
<html lang="en">
<head>
<title>ACE in Action</title>
<style type="text/css" media="screen">
    #e1 { 
        position: absolute;
        top: 0;
        right: 0;
        bottom: 50%;
        left: 0;
    }
  #e2 { 
        position: absolute;
        top: 50%;
        right: 0;
        bottom: 0;
        left: 0;
        margin:0
    }
    .ace_keyword {
  background-color: orange;
}

.ace_editor .ace_marker-layer .ace_selected-word {
  background-color: orange;
}

</style>
</head>
<body>
  
<div id="e1">
  function foo(items) {
    var x = "All this is syntax highlighted";
    return x;
  }
  first second editor
  
  if you change the keyword in bottom editor 
  "keyword": "foo|change|this|editor"

  you see them change in top editor
  if you edit addpaste text in this editor highlight are working

  these marked words are not clicked away
  like a search find marked selection 
  
  ctrl+f search selection is clicked away

  need this for minimap
  https://ldijkman.github.io/Ace_Seventh_Heaven/Hell.html

  it is not perfect it meshes up the html highlight syntax
</div>
<pre id="e2">
{
    "keyword": "second|items|editor"
}

</pre>
    
  <script src="https://ajaxorg.github.io/ace-builds/src/ace.js"></script> 
  <script src="https://www.unpkg.com/ace-builds@1.2.6/src/mode-html.js"></script> 
  
<script>
  
define("DynHighlightRules", [], function(require, exports, module) {
"use strict";

var oop = require("ace/lib/oop");

var TextHighlightRules = require("ace/mode/text_highlight_rules").TextHighlightRules;
var HtmlHighlightRules = require("ace/mode/html_highlight_rules").HtmlHighlightRules;


var DynHighlightRules = function() {
   this.setKeywords = function(kwMap) {     
       this.keywordRule.onMatch = this.createKeywordMapper(kwMap, "identifier")
   }
   this.keywordRule = {
       regex : "\\w+",
       onMatch : function() {return "text"}
   }
     
   this.$rules = {
        "start" : [ 
            {
                token: "string",
                start: '"', 
                end: '"',
                next: [{ token : "constant.language.escape.lsl", regex : /\\[tn"\\]/}]
            },
            this.keywordRule
        ]
   };
   this.normalizeRules()
};

oop.inherits(DynHighlightRules, TextHighlightRules);
//oop.inherits(DynHighlightRules, HtmlHighlightRules);

exports.DynHighlightRules = DynHighlightRules;

});
  
  
  
    var editor = ace.edit("e1");
    editor.setTheme("ace/theme/vibrant_ink");    
    var HtmlMode = require("ace/mode/html").Mode;
    var dynamicMode = new HtmlMode();
    require("ace/mode/html")
    dynamicMode.HighlightRules = require("DynHighlightRules").DynHighlightRules;
    
    editor.session.setMode(dynamicMode);
     //editor.session.setMode("ace/mode/html");



    var editor2 = ace.edit("e2");
    editor2.setTheme("ace/theme/solarized_dark");
    editor2.session.setMode("ace/mode/json")
    editor2.on("input", function() {
      dynamicMode.$highlightRules.setKeywords(JSON.parse(editor2.getValue()))
      
      
      //dynamicMode.$highlightRules.setKeywords({keyword: "foo|change|this"});
      console.log(JSON.parse(editor2.getValue()));
     
      editor.session.bgTokenizer.start(0)


    })()
  


 
</script> 

</body>
</html>