Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!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
    }
</style>
</head>
<body>
  
<div id="e1">
  function foo(items) {
    var x = "All this is syntax highlighted";
    return x;
  }
  first second editor
</div>
<pre id="e2">
{
    "keyword": "first|items|editor"
}
</pre>
    
  <script src="https://ajaxorg.github.io/ace-builds/src/ace.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 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);
​
exports.DynHighlightRules = DynHighlightRules;
​
});
  
  
  
    var editor = ace.edit("e1");
    editor.setTheme("ace/theme/solarized_light");    
    var TextMode = require("ace/mode/text").Mode;
    var dynamicMode = new TextMode();
    dynamicMode.HighlightRules = require("DynHighlightRules").DynHighlightRules;
    
    editor.session.setMode(dynamicMode);
     
    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()))
      editor.session.bgTokenizer.start(0)
    })()
  
​
​
 
</script> 
​
</body>
</html>
 
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers