ACE Editor addMarker

There is some problem with marker positioning!

by rezaamya

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<title>ACE in Action</title>
<script src="https://pagecdn.io/lib/ace/1.4.6/ace.js" integrity="sha256-CVkji/u32aj2TeC+D13f7scFSIfphw2pmu4LaKWMSY8=" crossorigin="anonymous"></script>
</head>
<body>

<div id="editor">
function foo(items) {
    var x = items * items;
    return x;
}

var test = foo(2);

console.log(test); //should be 4

console.log(foo(1)); //should be 1

console.log(foo(3)); //should be 9
</div>

</body>
</html>

CSS

#editor {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.blue {
  position: absolute;
  background-color: blue;
}

JavaScript

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

var Range = ace.require("ace/range").Range;
editor.selection.setRange(new Range(4, 0, 6, 5));

editor.session.addMarker(new Range(0, 0, 1, 5), "blue", "text");