At first glance it looks like we should change this:

.hljs ::selection {} /* existing rule */
.hljs::selection {} /* add this rule */

The problem now is only the children get the rule applied not content from the code block itself that has no other highlighting applied. Can you confirm?

Do you mean for example changing

.hljs ::selection {
  color: #353535;
}

to

.hljs::selection {
  color: #353535;
}

If so, it seems that change would still have the problem, this time only it hides non syntax-highlighted text, which actually hides more content. Here is what it looks like on my end for example:

I think it makes sense to just delete the ::selection rule, if possible.

Do you mean for example changing ... to ...

No, BOTH rules are necessary (the parent and the children) and in my testing it looked great.

@highlightjs/core Any philosophical thoughts on whether a theme should be able to change selection color - as a matter of policy? If we wanted to be picky we could decide this "hurts usability" or violates the users choice in some way and just disallow it... but I think technically this can be fixed as I already mention above.

Nothing changes on my end when I add them both, and I think that's because adding both rules is actually just what was originally the problem: only the syntax highlighted content gets the rule, not the content which has no highlighting, and because the ::selected color is very similar to the color of the background, it hides the syntax-highlighted content.

If possible, this rule should just be taken out. The default blue colors that browsers provide are perfectly fine and are what users naturally expect. Additionally, when one is selecting code via click and drag, they are probably focused and in the middle of a more important task, hence they don't need to be distracted by a random color or inconvenienced by text disappearing for a task that should be really short and simple. That's probably why most websites with syntax-highlighted code, like Github or StackOverflow, don't have any interruption or fancy coloring in the selection highlighting.

Nothing changes on my end when I add them both

https://jsfiddle.net/pz2wkuya/

Working properly with both Safari and Chrome here. You can disagree with the visual merits, but I'm more concerned with the technical problem you first raised, which seems solvable. Now, it's worth asking if the intention of ::selected is to use the background-color, rather than color... and if so, then that's a mistake on my part I think - and something we should indeed fix (which might address some of your concerns). But these are themes - a great many of them are already a matter of personal taste, and "selection color" is an official part of the Base16 spec. If you don't like it, then don't use a base16 theme, or modify the CSS to remove ::selection.

So:

• We'll fix the CSS flaw you originally reported with inconsistent highlights.
• We'll see if the actual intention was background-color (vs color), which seems obvious now in hindsight.

We'll change those two things and think that will improve the situation greatly and get us back to what the theme authors originally intended.

The linked fiddled works and looks great! It has different CSS syntax than what one would get by just applying your initial suggestion, hence why I did not see a difference (i.e.., Material Darker's ::selection does not have a background-color value and the color value is not inherent). This works great for me though.

@ltrujello You want to poke around in the base16-highlightjs repo and see if that looks good to you? If things are all good now we'll copy these newer versions over for the next release.

Yes these look great! Personally I stuck with color: inherit suggestion instead of a fixed color, so the text selection preserves the syntax highlighting, but that is just a matter of preference. Thanks for the help!

934f2e7 Should land in 11.3

@highlightjs/core Any philosophical thoughts on whether a theme should be able to change selection color - as a matter of policy? If we wanted to be picky we could decide this "hurts usability" or violates the users choice in some way and just disallow it... but I think technically this can be fixed as I already mention above.

I, personally, would allow themes to change selection color. Yes, it can lead to usability issues but there's also a chance that the browser color for highlighting can conflict with the theme. I don't think existing themes should be changed to add a selection color but if there's a problem with it, then it can be fixed.

If you're a theme author and you want to torture everyone by having red on green, we won't stop you; just nobody will use your theme 🤷‍♂️