I am trying to style a code block in Lexical Editor for which I cannot change the markup
Basically, a code block is a flat sequence of span and br, like :
<span class='inserted'>+</span><span>let</span><span>myvar1</span><span>=</span><span>1</span><br>
<span class='deleted'>-</span><span>let</span><span>myvar2</span><span>=</span><span>2</span><br>
is there a way to style the lines with a green background color when it is 'inserted' and a red background color when it is 'deleted'
I thought about using sibling operator like
.inserted ~ span { background-color: green; }
but I can't find a way to have the sibling selection stop at the first br (or at the end of the sibling list) to make sure to select only a single line.
it would be even better if it could background-color the whole line relative to the parent container.
and of course, there is an unknown number of span between brs.
.inserted ~ span {
background-color: green;
}
.deleted ~ span {
background-color: red;
}
<div>
<span class='inserted'>+</span><span>let </span><span>myvar1 </span><span>= </span><span>1</span><br>
<span class='unchanged'> </span><span>let </span><span>myvar2 </span><span>= </span><span>2</span><br>
<span class='deleted'>-</span><span>let </span><span>myvar3 </span><span>= </span><span>3</span><br>
</div>
Since you want to color the whole line, here is an idea using border-image
that you apply to the span with the specific class.
.inserted {
border-image: conic-gradient(green 0 0) fill 0//0 100vw;
}
.deleted {
border-image: conic-gradient(red 0 0) fill 0//0 100vw;
}
div {
overflow: hidden;
}
<div>
<span class='inserted'>+</span><span>let </span><span>myvar1 </span><span>= </span><span>1</span><br>
<span class='unchanged'> </span><span>let </span><span>myvar2 </span><span>= </span><span>2</span><br>
<span class='deleted'>-</span><span>let </span><span>myvar3 </span><span>= </span><span>3</span><br>
</div>