add span to all spans within ace_line div for background of text

[P5LIVE]

Working on a live-coding environment in the browser, using Ace Editor overlaying a canvas element.

I was using 'mix-blend-mode:difference;' which looked great, but has performance issues.

Now I'd like to put a black background behind each line of code (from start to end of text). 

I tried stylising the span's within each 'ace_line' div, but that results in gaps between each word (spaces) and is distracting.

I also tried playing with thick borders and margins, but all pretty hacky and fails are various sizes.

Using CSS on each ace_line div isn't an option, since then I can't see past the code.

So I found that if I wrapped all of the spans within a given ace_line div, I could get what I'm after...

the question is, who/where can this be done?? Essentially, I want something like this for every line:

Instead of:

<div class="ace_line" style="height: 27px; top: 486px;">    <span class="bg"><span class="ace_storage ace_type">var</span> <span class="ace_identifier">v</span> <span class="ace_keyword ace_operator">=</span> <span class="ace_constant ace_numeric">0.002</span><span class="ace_punctuation ace_operator">;</span></div>

I'd like to have (with extra span using custom class, ie. "bg"):

<div class="ace_line" style="height: 27px; top: 486px;">    <span class="bg"><span class="ace_storage ace_type">var</span> <span class="ace_identifier">v</span> <span class="ace_keyword ace_operator">=</span> <span class="ace_constant ace_numeric">0.002</span><span class="ace_punctuation ace_operator">;</span></span></div>

Ideally keeping the spaces and indents there.. since I was able to accomplish it if I ditched indenting, but that should stay.

Not sure if there's a clever regex that could solve this?

This is what I have:

And what I'd hope to have:

[P5LIVE]

Ahaaa - figured out a decent solution, wrapping those span elements afterRender!

Nevertheless, if there's a better way to do this, happy to learn about it.

editor.renderer.on("afterRender", function(){

adjustLines();

});

function adjustLines(){

var pcode = document.getElementsByClassName("ace_line");

for(var i=0; i < pcode.length; i++){

var pitem = pcode[i];

var pcontents = pitem.innerHTML;

pitem.innerHTML = '<span class="ace_line_bg">' + pcontents + '</span>';

}

}

[Harutyun Amirjanyan]

another possible solution it to reset the tokens treated as text

https://github.com/ajaxorg/ace/blob/master/lib/ace/layer/text.js#L328

textToken = editor.renderer.$textLayer.$textToken; 

Object.keys(textToken).forEach(k=>delete textToken[k])

and use css

.ace_line>span {

    background: aliceblue;

}

unfortunately both of this solutions have a drawback that selection is not visible

and css like 

.ace_layer.ace_marker-layer {

    z-index: 2;

    opacity: 0.4;

}

doesn't look very good.