我想实现这个例子: 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;
}
最佳答案
@Peter 我好像遇到过类似的问题,我通过在使用 codemirror 的组件中添加以下全局样式解决了这个问题。然而,我使用的是 React,但它在任何一种情况下都应该有效。
.breakpoints {width: .8em;}
.breakpoint {color: #822;}
.CodeMirrow {border: 1px solid #aaa;}
希望它能帮助到在不久的将来遇到同样问题的人。
关于javascript - Codemirror setGutterMarker 样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50831759/