multi-line wrapping mark decoration

1

hi,

thanks to pointers in a topic 1-2 days back, i was able to create an extension that adds/removes a mark decoration on specific range of document as needed.

This is my current “decoration” i use:

const decoration = Decoration.mark({ class: 'cm-highlighted' }).range(from, to);

and my style:

.cm-highlighted {
  background-color: lightblue;
}

When the range of my higlight spand multiple lines, every line’s background is separated for above/below lines with tiny margin - and it is clear as on why its happening…

What would be CM’s idiomatic way to adjust this and remove the horizontal white spaces between lines - make the bluish background touch/overlap a bit between each line?

current state:

multiline-mark
multiline-mark293×291 4.89 KB

expected/wanted:

multiline-mark-wanted
multiline-mark-wanted293×291 5.14 KB

thanks for pointers!

2

The way browsers style inline content, you unfortunately don’t have a lot of control over how tall the colored space is, as I think that depends on font metrics. In some cases, reducing line height in CSS can help. Alternatively, you could use a layer instead of decorations—those are backdrops drawn behind the code, whose dimensions are determined by the library, and thus shouldn’t suffer from this issue.