How to add classes to lines?

v6
1

I’m trying to figure out how to add extra classes to lines to identify code blocks in markdown. Is there a supported way to do this in CodeMirror 6?

2

It looks like this might be what I’m looking for, but I’m still not entirely sure how to implement a line decoration. Anyone have any examples of this?

https://codemirror.net/6/docs/ref/#view.Decoration^line

3

This example might help.

1 Like
4

That is perfect. Thanks!

5

Okay, after digging in a bit more, the piece I’m struggling with now is figuring out how to dig into the markdown parser to determine whether a given line is part of a code block. I will continue digging into the source code, but if you have any tips, I’d appreciate it! :grin:

6

Iterating over the syntax tree is probably the easiest approach.

1 Like
7

This breaks the line numbering. Is there a way to save a block with line numbering?

8

Nothing about that example breaks line numbering.

9

I apologize. Following the example, it really worked out. But it was a more difficult way than just

private markInvalidLines(): void {
  const state = [];
  for (let i = 0; i < this.view.state.doc.lines; i++) {
    const className = this.errorLinesNum().includes(i + 1) ? 'line-error' : '';
    console.log(i);
    state.push(Decoration.line({attributes: {class: className}}).range(i));
  }
  const decorations = Decoration.set(state);
  this.view.dispatch({effects: StateEffect.reconfigure.of(EditorView.decorations.of(decorations))});
}

When a method this.view.dispatch({effects: ... is called, the entire block cm-gutters is deleted

10

That example simply doesn’t enable the gutter. When you do, that works too.