How to underline text and change mouse cursor to pointer in Ace editor

Question

I want to underline a portion of code in the ace editor when I go with the mouse over it, and even more, to display the mouse cursor as pointer. I have tried to do it like this:

editSession.addMarker(new Range(loc.start.line - 1, loc.start.column, loc.end.line - 1, loc.end.column), "ace_underline", "text")

This will not work. What puzzles me though is that if I replace ace_underline (the second parameter of addMarker function) with ace_highlight-marker or ace_selection it works in the sense that the range that I want gets colored.

I also tried to create my own css class that looks like:

.myCustomMouseOverHighlight {
   text-decoration: underline;
   cursor: pointer !important;
}

and then replace the second parameter with myCustomMouseOverHighlight, but again, to no avail.

Any pointers will be highly appreciated.

Radu

Answer 1

It doesn't work because addMarker adds a div behind the text. try

.myCustomMouseOverHighlight {
   border-bottom: 1px solid red;
   position: absolute;
   cursor: pointer !important;
   pointer-events: auto;
}

<script src="https://ajaxorg.github.io/ace-builds/src/ace.js"></script>
<style>
.myCustomMouseOverHighlight {
   border-bottom: 1px solid red;
   position: absolute;
   cursor: pointer !important;
   pointer-events: auto;
}
</style>
<script>
var Range = ace.Range;
var editor = ace.edit(null, {value: "Hello World"});
editor.container.style.height = "100px";
document.body.appendChild(editor.container);

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

</script>