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

希望它能对您有所帮助，即使对您也有帮助，在不久的将来也会遇到同样的问题。

Codemirror setGutterMarker 样式

Codemirror setGutterMarker styling

javascript

codemirror