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

希望它能帮助你，如果不是你，那么某人在不久的将来也会面临同样的问题。