Are these styles all right, or is this intervening too much into the editor?

I tried to achieve a certain decoration effect. I’m using markdown language, and I would like to highlight CodeBlock elements, for the whole line, but not from the left of the code block. So for example, if the code was in a list, then the two spaces to the left of the could would not be decorated.

I can’t use Decoration.line(), since that edits the whole line, and there is not way to sqew it, so I must use Decoration.mark(), but when I do that, I achieve this effect.


To “pull” the background to the right, I added :after element after the mark decoration, into the view. I set it to position:absolute, set an arbitrarly wide width, but that made the editor scroll-bar appear.


Now this was the time I thought I’m interfering with the editor too much, and that my idea’s probably not going to work well. I added overflow:hidden style to .cm-line class, and now it behaves all right (I think). I also had to add pointer-events: none; and z-index: -1 to the pseudo-element to have it behave normally.

Is there anything I did that breaks the editor in some way? Perhaps there’s a case I didn’t think, and that’s a really bad idea? Or perhaps there’s a safer way to add background to the items from a position to the end of the line?

These are the styles that I added

  .cm-line {
    overflow: hidden;

    .highlight-code {
      position: relative;

      &:after {
        content: '';
        position: absolute;
        pointer-events: none;
        left: 0;
        top: -2px;
        bottom: -2px;
        opacity: 1;
        width: 1900px;
        z-index: -1;
        height: 22px;
        background-color: #f2f2f2;

highlight-code is a class added by Decoration.mark() to node CodeText.

I don’t see anything that would obviously cause problem with this, but then, CSS is a subtle monster so I also can’t guarantee that nothing is going to get confused by it. Try and see, I guess.

1 Like

Okay, cool.

But I have another problem.

When I have code with empty lines in markdown list, then in the DOM there is .cm-line with two spaces inside


I wanted to mark it somehow, add Decoration.mark() for it with the styles, but it doesn’t get applied for empty lines. Do you have an idea?

I apply Decoration.mark() for these start and end, and this leaves off empty line

PS: If I add even a space to that place, then mark correctly gets applied, cause this works:

I tried adding Decoration.widet() and Decoration.replace(), but then they occupy space in the editor, and I don’t want that. I find it unintuivity, for you can very easily mark Decoration.line() for an empty line, you should be able to add Decoration.mark() for empty line as well.

Mark decorations can only style content, so if there’s no content, they don’t appear, no.

What do you mean with Decoration.widget occupying space?

What do you mean with Decoration.widget occupying space?

I mean it behaves like a zero-width character. In other words, it takes 2 key strokes of ArrowLeft to move cursor over it. Like there would be an invisible “something there”.

Ps: it’s actually my bad, this was because I was using browser keyboard. When i used keymap for Arrow keys from “@codemirror/commands”, everything works fine.