Codemirror setGutterMarker样式

Question

我想实现此示例：https://codemirror.net/demo/marker.html#

但是在我的codemirror上，标记与演示中的行标记不同。它在代码行的开头。

所以我想知道如何设置行号槽的宽度，所以我自己的标记将位于行号槽中。

var codemirror = this.codemirror = CodeMirror.fromTextArea(this.el, {
    lineNumbers: true,
    mode: {name: "javascript", json: true},
    matchBrackets: true,
    readOnly: readonly,
    gutters: ["CodeMirror-linenumbers", "replacement", "add", "delete"]
});

设置标记：

this.codemirror.setGutterMarker(pos.start.line, "replacement", makeMarker("<i class='fas fa-search-plus' style='font-size: 12px;'></i>", color));

设置标记的功能：

function makeMarker(sign, color) {

    var marker = document.createElement("div");
    marker.style.color = color;
    marker.innerHTML = sign;
    return marker;

}

Answer 1

@@ Peter我似乎也有类似的问题，我通过向使用codemirror的组件中添加以下全局样式来解决了该问题。但是，我当时使用了react，但无论哪种情况都应该可以工作。

.breakpoints {width: .8em;}
.breakpoint {color: #822;}
.CodeMirrow {border: 1px solid #aaa;}

希望这对您有所帮助，然后在不久的将来遇到相同问题的人。