Mark a position between 2 characters - ide

Question

I often use markers to underline a part of code (e.g., to invite users to hover on it and see hints). Most of time, we want to underline at least one characters. But sometimes, we may want to underline the position between two characters. For instance, given a formula fg(23,), I want to underline the position between , and ), then hovering on it shows a non-empty argument is expected here.
It seems that the following code in the playground can achieve this more or less.
var ed = monaco.editor.create(document.getElementById("container"), {
value: "fg(23,)",
language: "javascript"
});
monaco.editor.setModelMarkers(ed.getModel(), 'test', [{
startLineNumber: 1,
startColumn: 7,
endLineNumber: 1,
endColumn: 7,
message: "a non-empty argument is expected here",
severity: 8
}])
However, setting startColumn same as endColumn does not always do the trick. For instance, I cannot underline the position between ( and 2; setting startColumn: 4, endColumn: 4 does not work.
So does anyone know how to mark a position between 2 characters? We are not limited to underlining, other ways like highlighting are welcomed as well.
(* Link on GitHub: https://github.com/microsoft/monaco-editor/issues/3039 *)

Answer 1

To your question: following this post, it seems that a solution may look something like this (please use the playground to test)
HTML
<div id="container" style="height: 100%"></div>
CSS
.formulaHighlight { /* this class name can be whatever you want */
color: #3456ff !important;
cursor: pointer;
text-decoration: underline;
font-weight: bold;
font-style: oblique;
}
JS
const ed = monaco.editor.create(document.getElementById("container"), {
value: "fg(23,)",
language: "javascript"
});
monaco.editor.setModelMarkers(ed.getModel(), 'test', [{
startLineNumber: 1,
startColumn: 7,
endLineNumber: 1,
endColumn: 7,
message: "a non-empty argument is expected here",
severity: 8
}])
const decorations = ed.deltaDecorations(
[],
[
{
range: new monaco.Range(1, 4, 1, 6),
options: { inlineClassName: 'formulaHighlight' }
}
]
);
The delta decoration method allow to customize styles in specific locations. The monaco.Range method uses the following parameters:
startLineColumn - from which line to start the highlight
startColumn - the numeric value of the first highlight character
endLineNumber - which line stops the highlight
endColumn - the numeric value of last highlighted character
In your case it seems that startLineColumn and endLineNumber will be the same line number. Also,startColumn and endColumn will represent the actual highlight range (within the same line)