Ace Editor Bootstrap

by ramnathv

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='row'>
      <div class='col-md-6'>
       <div id="editor">function foo(items) {
        var x = "All this is syntax highlighted";
        return x;
       }</div>
      </div>
      <div class='col-md-6'>
          
      </div>
    </div>
</div>

CSS

#editor {
    /** Setting height is also important, otherwise editor wont showup**/
    height: 200px;
    width: 100%
}

JavaScript

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