Is there a way of putting text instead of icon classes in the Monaco Editor Margin?

Question

I'm aware of how to add a glyphMarginClassName, linesDecorationsClassName, and inlineClassName to the options of the Monaco Editor. But is there a way to add alphabetical characters into the margin? Like this:

Answer 1

You can do that, yes. However, not with dynamic text, but instead attaching a ::before or ::after element to that margin node.

Start by setting a custom CSS class name in the lines decoration:

            let ids = this.backend.deltaDecorations(sourceIDs, [{
                range: new Range(this.startLine, 1, this.startLine, model.getLineLength(this.startLine)),
                options: {
                    stickiness: Monaco.TrackedRangeStickiness.GrowsOnlyWhenTypingBefore,
                    isWholeLine: false,
                    linesDecorationsClassName: `editorPromptFirst.${this.language}`,
                },
            }]);

And in your CSS add the text like this:

.codeEditor .editorPromptFirst.sql::before,
.codeEditor .editorPromptFirst.mysql::before {
    content: "sql>";
    display: block;
    margin-left: 4px;
    font-size: 0.9rem;
    color: #db8f00;
}

which results in this display: