Codemirror setGutterMarker styling

Question

I want to implement this example: https://codemirror.net/demo/marker.html#

But on my codemirror the marker is not besides the line marker as in the demo. It is at the beginning of the code line.

So I want to know how can I set the width of the line number gutter, so my own marker will be in the line number gutter.

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"]
});

Set the marker:

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

Function for set marker:

function makeMarker(sign, color) {

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

}

Answer 1

@Peter I seem to have had a similar problem and I solved it by adding the following global styles to the component that uses the codemirror. I was, however, using react but it should work in either case.

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

Hope it helps if not you then someone who faces the same problem in the near future.