Is there any way to bookmark a line in Monaco-editor, similar to VSCode bookmarks? It seems there is no such built-in feature. If so, how can I show a marker in front of a line? Something like a breakpoint will also be acceptable.
Advertisement
Answer
I found a solution below for anyone who later needs this functionality.
CSS:
JavaScript
x
13
13
1
<head>2
<style>3
.BookmarkGlyphMarginClass {4
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAGlJREFUOE9jZKAQMKLp/0+keXB9owYwMIyGwWAPg3sMDAwF0KQ9gYGBQQkpmeNNyt8ZGBi6GBgYOhgYGH5ANXEyMDCUQzEHA5LX0dPBZgYGhnwGBgaQ7dgAyBUTGRgYfGGS6BYQmRkRygCJrhYRt46k9gAAAABJRU5ErkJggg==');5
background-size: contain;6
}7
8
.BookmarkLine {9
background: #FDFD96;10
}11
</style>12
</head>13
Javascript:
JavaScript
1
32
32
1
function ToggleBookmarkCurrentLine() {2
var line = editor.getPosition().lineNumber;3
current_bookmarks = [];4
5
editor.getLineDecorations(line).forEach(decoration=>6
{7
if (decoration.options.className === 'BookmarkLine') {8
current_bookmarks.push(decoration.id);9
}10
});11
12
if (current_bookmarks.length == 0) {13
decorationsId = editor.deltaDecorations(14
[],15
[16
{17
range: new monaco.Range(line, 1, line, Infinity),18
options: {19
isWholeLine: true,20
className: 'BookmarkLine',21
glyphMarginClassName: 'BookmarkGlyphMarginClass',22
stickiness: monaco.editor.TrackedRangeStickiness.NeverGrowsWhenTypingAtEdges23
}24
}25
]26
);27
}28
else {29
editor.deltaDecorations(current_bookmarks, [] );30
} 31
}32