linenumbers grouped to actual lines in sourcecode

i had trouble with proper aligning of linenumbers and the actual code and tried to fix the css, but with limited sucess.

after some hours of trail and error i quit the approach and fixed it with the given solution:

Prism.languages.insertBefore('plsql','keyword',{
    aline: {
        pattern: /(.*)\n/,
        inside: Prism.languages.plsql,
        greedy: true

    }
} )

with this little language extention is was able to encapsulate lines with spans to represent actual lines.

this approach brought a couple of advantages. it could use a per line hightligthing on hover with:

.aline:hover {
    background-color: #222;
}

and added the linenumbers to the .aline elements:

pre.line-numbers .aline::before  {
    content: counter(lines);
    counter-increment: lines;
    position: absolute;
    left: 0em;
    text-align: right;
    display: block;
    width: 2em;
    padding-right: .3em;
    border-right: 1px solid;
    height: 100%;
    background-color: black;
}

pre.line-numbers .aline::after  {
    content: "⤷";
    font-size: 16px;
    position: absolute;
    left: -0.3em;
    text-align: right;
    display: block;
    width: 2em;
    height: 1em;
    top: 14px;
}

then downside of this approach is the mixing of the token elements and misuse of the token aline.
on the upside, this approach yield way better results, than the current line number plugin.

is there any chance, that we might reconsider the prism architecture to incorperate the grouped lines for better styling options?

an example screenshot:

PS: i love your project, thank you every much for the ongoing effort!

Start by reviewing Prism's tokenization architecture and the current line number plugin, as well as the proposed CSS for grouped lines. Define whether source lines can be grouped without misusing token elements, then verify that line numbering and per-line styling work correctly.