Menu
I am attempting to partially highlight a line / lines using a marker.
according to the documentation on ranges it it possible to create one with 4 inputs: startLine, startColumn, endLine, endColumn
I fed such a range into an add marker method but it just highlights the entire lines
my code:
var editor = ace.edit("editor");
var Range = ace.require('ace/range').Range;
editor.session.addMarker(
new Range(startLine - 1, startPos, stopLine - 1, stopPos),
"highlightError",
"line",
true
);
I think my problem may be to do with the 3rd argument of addMarker, the documentation I managed to find only states that this should be the 'type of marker' but I cannot find what the available types of marker are.
812
Because selected answer was not clear enough, I add an example in this answer.
You need to add position: absolute; to the highlighting class.
For example here I am using .blue to make the selection to blue, then I should add position: absolute; to it.
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");#editor {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.blue {
position: absolute;
background-color: blue;
}<!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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
