UI.Ace: Marker demo

<!DOCTYPE html>
<html ng-app="x">

  <head>
    <meta name="viewport" content="width=device-width">
    <meta charset="utf-8" />
    <title>UI.Ace: Marker demo</title>
    
    <script>document.write('<base href="' + document.location + '" />');</script>
    
    
    <!-- Le css -->
    <link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" type="text/css" />
    <link href="style.css" rel="stylesheet" type="text/css" />
    
    
  </head>

  <body>
  
    <div class="jumbotron">
      <div class="container">
        <h1>UI.Ace: Marker demo</h1>
      </div>
    </div>
    
    <section ng-controller="AceCtrl">
      <div class="container">
        <div ui-ace="aceOption">Some marked text here</div>
      </div>
    </section>
    
  </body>
    
    <!-- Le vendor... -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
    
    <!-- Le ace things... -->
    <script src="https://rawgithub.com/ajaxorg/ace-builds/v1.1.1/src-min-noconflict/ace.js"></script>
    <script src="http://angular-ui.github.io/ui-ace/build/ui-ace.js"></script>
    
    <!-- Le custom js -->
    <script src="app.js"></script>
    
</html>

var app = angular.module('x', ['ui.ace']);



/* =AceCtrl
 * Used for the demo
-----------------------------------------------------------------------------*/

app.controller('AceCtrl', ['$scope', function($scope) {
  
  // The ui-ace option
  $scope.aceOption = {
    onLoad : function(_ace){
     
     // Yeap I"m using the noconflict version
      var Range = ace.require('ace/range').Range;
       _ace.getSession().addMarker(new Range(0, 5, 0, 16),"warning", "text");
    }
  };
}]);

.ace_editor{
  min-height : 200px;
}


/*
 Your marker style
*/
.ace_marker-layer .warning {
    position: absolute;
    z-index: 4;
    background: #f1c40f;
}

/*
 TWBS HACK
*/

.jumbotron {
  position: relative;
  font-size: 16px;
  color: #fff;
  color: rgba(255,255,255,.75);
  text-align: center;
  background-color: #563d7c;
  border-radius: 0;
}

# UI.Ace: Marker demo