有没有办法在摩纳哥编辑器边距中放置文本而不是图标类？

Question

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

Answer 1

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

首先在行修饰中设置自定义 CSS class 名称：

            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;
}

导致此显示：

有没有办法在摩纳哥编辑器边距中放置文本而不是图标类？

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

angular

monaco-editor

ngx-monaco-editor

有没有办法在摩纳哥编辑器边距中放置文本而不是图标 类？

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

angular

monaco-editor

ngx-monaco-editor

有没有办法在摩纳哥编辑器边距中放置文本而不是图标类？