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

问题描述

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

解决方法

你可以这样做，是的。但是，不是使用动态文本，而是将 ::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;
}

导致此显示：