angular - 有没有办法在 Monaco Editor Margin 中放置文本而不是图标类？

Question

我知道如何将 glyphMarginClassName、linesDecorationsClassName 和 inlineClassName 添加到 Monaco Editor 的选项中。但是有没有办法在边距中添加字母字符？像这样：

Answer 1

你可以这样做，是的。但是，不是动态文本，而是将 ::before 或 ::after 元素附加到该边距节点。

首先在线条装饰中设置自定义 CSS 类名称：

            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}`,
                },
            }]);

在您的 CSS 中添加如下文本：

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

这导致此显示：