Skip to content
Advertisement

Add Line Bookmarks to Monaco-Editor

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:

<head>
    <style>
        .BookmarkGlyphMarginClass {
            background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAGlJREFUOE9jZKAQMKLp/0+keXB9owYwMIyGwWAPg3sMDAwF0KQ9gYGBQQkpmeNNyt8ZGBi6GBgYOhgYGH5ANXEyMDCUQzEHA5LX0dPBZgYGhnwGBgaQ7dgAyBUTGRgYfGGS6BYQmRkRygCJrhYRt46k9gAAAABJRU5ErkJggg==');
            background-size: contain;
        }

        .BookmarkLine {
            background: #FDFD96;
        }
    </style>
</head>

Javascript:

function ToggleBookmarkCurrentLine() {
    var line = editor.getPosition().lineNumber;
    current_bookmarks = [];

    editor.getLineDecorations(line).forEach(decoration=>
        {
            if (decoration.options.className === 'BookmarkLine') {
                current_bookmarks.push(decoration.id);
            }
        });

    if (current_bookmarks.length == 0) {
        decorationsId = editor.deltaDecorations(
            [],
            [
                {
                    range: new monaco.Range(line, 1, line, Infinity),
                    options: {
                        isWholeLine:            true,
                        className:              'BookmarkLine',
                        glyphMarginClassName:   'BookmarkGlyphMarginClass',
                        stickiness:             monaco.editor.TrackedRangeStickiness.NeverGrowsWhenTypingAtEdges
                    }
                }
            ]
        );
    }
    else {
        editor.deltaDecorations(current_bookmarks, [] );
    }   
}
Advertisement