How to use Gutter Markers in Code Mirror 6


I’m new to Codemirror 6 and I want to show Gutter Markers. Can anyone provide me some useful link how to implement them in Codemirror 6? The markers should show a symbol and a tooltip. Thank you very much!

I’ve added an example page that demonstrates how to create custom gutters with markers. Please take a look.

That’s great that there’s an example, and the simple stateless one I can get to work fine! But I can’t for the life of me get the “markers” (as opposed to “lineMarker”) driven version to work.

I’ve tried to setup a totally minimal example here: infallible-dust-18j6w - CodeSandbox

The code in that sandbox seems to work, no?

The lineMarker style works fine, but the markers function doesn’t seem to work. I’ve updated the codeSandbox to be more clear - apologies.

Ok it looks like Mark positions are in charcters, not line numbers, so by utilizing v.state.doc.line(6).from I managed to get it to work. It seems like this might be the wrong approach - but I can’t tell what part of the example for the line breaks solves this problem… weathered-architecture-9vnd1 - CodeSandbox

I’m happy using this for now though

You mean the breakpoint example? toggleBreakpoint is called with character positions, so that’s the number that gets used to create the marker set. Generally, CodeMirror 6 uses such position throughout, rather than line number, because they can be, for example mapped through changes, which is more awkward with line numbrs.