时间戳

首页 > 解决方案 > Codemirror setGutterMarker 样式

javascript - Codemirror setGutterMarker 样式

问题描述

我想实现这个例子： https ://codemirror.net/demo/marker.html#

但是在我的代码镜像上，标记不在演示中的线标记之外。它位于代码行的开头。

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

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;

}

标签： javascriptcodemirror

解决方案

@Peter 我似乎遇到了类似的问题，我通过将以下全局样式添加到使用 codemirror 的组件来解决它。然而，我正在使用 react 但它应该在任何一种情况下都有效。

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

希望它对您有所帮助，如果不是您，那么在不久的将来会遇到同样问题的人。

推荐阅读