Ace Editor Bootstrap

by uedatakuya

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/ace/1.1.01/ace.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/css/bootstrap.min.css">
<div class="container">
    <div class="panel panel-default">
        <div class="panel-heading">
             <h3 class="panel-title">Editor</h3>
        </div>
        <div class="panel-body">
<div id="editor">function foo(items) {
    var x = "All this is syntax highlighted";
    return x;
}</div>
        </div>
    </div>
    <div class="text-center">---End of editor---</div>
</div>

CSS

#editor {
    /** Setting height is also important, otherwise editor wont showup**/
    height: 300px;
}

#editor {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
  .foo{
    position:absolute;
    background:rgba(100,200,100,0.5);
    z-index:20
  }
  .bar{
    position:absolute;
    background:rgba(100,100,200,0.5);
    z-index:40; width:2px!important
  }
  
  .bar::before{
    position:absolute;
    background:rgba(100,100,200,0.5);
    z-index:999;
    top: -100%; content: 'Khoa Ma'; left:0px; font-family: Arial; padding:1px 2px
  }

JavaScript

var editor = ace.edit("editor");
editor.setTheme("ace/theme/monokai");
editor.getSession().setMode("ace/mode/javascript");

    var Range = ace.require('ace/range').Range;
    setTimeout(function() {
      // editor.gotoLine(154);
      //editor.session.addMarker(new Range(3, 0, 15, 0), "ace_active-line", "fullLine");
      //editor.session.addMarker(new Range(4, 5, 8, 5), "foo", "line");
       editor.session.addMarker(new Range(2, 3,2, 11), "bar", true);
      
      editor.session.setAnnotations([{ 
                  row: 1, 
                  column: 2, 
                  text: "Strange error", 
                  type: "info" 
                }]); 
    }, 100);