Why do highlights work the way they do?


It seems that highlights (used for linter errors, bracket matching, and probably other stuff) work by creating “regions” and absolutely positioning them.

My question is why they work this way, rather than wrapping the actual text that needs to be highlighted. Is there a reason, or a wisdom behind this? With the current scheme, I am only able to add a background and a border, but not change the foreground colour of the text, which is what I want to do.

If there is a reason that can’t work, then I’d love to know it, but it doesn’t seem like there should be.


It would be hard and expensive and sometimes impossible to divide arbitrary chunks of text into divs to highlight.

Edit: To be more explicit, the text is already divided for grammar and intersecting regions would be problematic. Also, multiple highlights can cover the same text. How can you handle that?


For a visual representation of what @mark_hahn is talking about. Take a look at the fictional language here:

keyword functionName(typeName variableName)

In order to syntax highlight it even at a minimal level, it would turn into HTML roughly like this:

<span class=".source.fictional.keyword">keyword</span>
<span class=".source.fictional.function">functionName</span>
<span class=".source.fictional.punctuation">(</span>
<span class=".source.fictional.type">typeName</span>
<span class=".source.fictional.variable">variableName</span>
<span class=".source.fictional.punctuation">)</span>

Now, lets select a portion of the text, with [ signifying the beginning of the selection and ] signifying the end of the selection.

keyword func[tionName(typeName varia]bleName)

The simplest way to represent this is:

<span class=".source.fictional.keyword">keyword</span>
<span class=".source.fictional.function">func<span class=".selection">tionName</span>
<span class=".source.fictional.punctuation">(</span>
<span class=".source.fictional.type">typeName</span>
<span class=".source.fictional.variable">varia</span>bleName</span>
<span class=".source.fictional.punctuation">)</span>

Which, while it may work, the behavior is certainly undefined and will probably not work reliably. Besides the fact that I’m sure there are performance issues with this approach and similar alternatives.


I guess OP’s problem can be solved if the highlight region was overlaid on the actual text and had the highlighted text copied into it so that it can be styled.


That would blow away any other backgrounds which are useful but it might be worth it from some people, not me.


That is a very interesting idea. The default theme could set the color to rgba(0, 0, 0, 0) or something, or a lower z-index, or whatever.


Once again you have the overlap problem. The new kind of highlight won’t necessarily align exactly with the div from the theme. Also the theme is set in advance. Adding this new highlight would have to change the theme below and remember what to restore it to.