The problem: SE asks Highlight.js to auto-detect the language when it knows there is no optimal/correct choice for us to make - resulting in very poor outcomes.

Disclaimer: I say this as the current Highlight.js maintainer

Example: SE currently does not load our groovy grammar. When one adds a Groovy block of code and hints it as ```groovy or <!-- language: groovy -->, SE will still ask Highlight.js to auto-detect the language - even knowing the language is groovy and that they've purposely chosen not to enable our Groovy grammar.

This results in poor and inconsistent highlighting for many snippets and encourages bad user behavior that will only make the situation worse long-term. Auto-detect is not intended to be used to find "next best" matches for built-in grammars purposely excluded from a build. This will frequently result in highlighting that appears entirely random (based on variable names that match keywords, etc.).

List of reasons the existing behaviour is bad:

  • It makes users think a language is supported when it is not. (this confusion is obvious in many threads following the switch to Highlight.js)
  • It results in incorrect/poor highlighting here and now (since the correct grammar is not available).
  • It results in seemingly random highlighting (different snippets of a single language end up highlighted with many different languages based on the exact content of the snippet).
    • Worse, this can encourage people to mis-hint or mistag posts consistently (i.e., always using java instead of groovy) just to get more consistent highlighting. This has already been mentioned/suggested in other threads (see Groovy discussion).
    • This mis-hinting/mistagging is not future-proof... if one day SO decides to add proper Groovy support, but older posts are tagged/hinted java (as a workaround)... those posts will not receive the new highlighting that would be possible if they had been hinted properly.
  • It can encourage hinting snippets with none (to avoid terrible auto-formatting) or even picking a random language just to find something that looks "better".
    • This is also not future proof in that if the missing language is ever added in the future the incorrect suboptimal hint will continue to be used indefinitely.
  • It can encourage users to endlessly fiddle with their snippet just to see if they can "push" the highlighter towards a better choice.

What should happen instead:

If it's known that the language requested is not supported then one of several things should happen:

  • No highlighting should be used, i.e. alias to none or plaintext. Unfortunate, but consistent.
  • The next closest match should be hard-coded as an alias. You're already doing this for some languages, like your VBScript => VB.NET mapping.
    • This results in consistent behaviour (keywords will always be highlighted the same from snippet to snippet).
    • Users can learn the pros and cons of this behaviour (i.e., its quirks, etc...)
    • If/when additional language support added in the future, the alias is removed and all existing posts that are correctly hinted are immediately "upgraded" will full and correct highlighting.
  • Lazy-load individual grammars (if it's not part of the default bundle) via a CDN and then perform highlighting as normal.

In summary:

No highlighting should be preferred over random highlighting for hinted snippets where SE has purposely chosen not to load a grammar module. Lazy-loading of grammars or manual hinting of alternatives (i.e., "java is a reasonable approx. of groovy") are some other options.

Also: no formatting may be a better choice for all snippets that have an explicit hint than cannot be resolved to any known language - though that's likely a larger discussion.

This was prompted by the Groovy discussion among others: What happened to Groovy syntax highlighting?

A small auto-detect primer and why this is a "worst-case" scenario for auto-detect.

Highlight.js auto-detection is based on analyzing a code snippet with all available language grammars and scoring it's relevancy with each. Highest score "wins". While the keyword class or a variable named $blah is somewhat relevant in indicating a given piece of code might be PHP - the tag <?php is highly relevant, as it only ever appears in PHP templates. We're looking for which language seems to be the most "relevant" for a particular code snippet.

Lets say we're asked to auto-detect the language and we find (in a perfect world) relevance scores something like:

C++:    9
SQL:    10
Java:   11
Groovy: 102

The code in question registers as 10x more "relevant" for Groovy, so it is highly likely this is a Groovy snippet. So what happens if the Groovy grammar isn't loaded - if we have no idea what Groovy code even is? You often end up with scoring much more like:

C++:  10
SQL:  9
Java: 10
Dart: 8
Go:   11

Our code now poorly matches whatever is left (since the correct answer [of Groovy] is no longer possible). The exact relevance values will of course change (depending on the snippet of code) and may not be this dramatic - but without the correct grammar loaded it's far more likely there is no clear winner... making the final language auto-detected much more of a coin toss.

This isn't a perfect example, but hopefully it is illustrative.

  • I think the most important thing here is to avoid the appearance of "random" behavior with the highlighting. When someone goes to the trouble to manually specify the correct language the last thing they should expect to see is entirely random highlighting. – Josh Goebel Oct 27 at 12:33
  • 1
    that is also in part because people don't check which languages are supported, and hence assume that certain behaviour is supported whilst it isn't. Which then in the end leads to confusion. – Luuklag Oct 27 at 12:36
  • 4
    SE's current behavior doesn't do anything to help with this confusion though. There is a reason our default behavior (as a library) is to fallback to NO highlighting when an incorrect or unknown language is provided. It provides feedback... makes it clear something is wrong, ie that the language "is not supported". Perhaps the user typed it wrong. We also log an error to the console, but SE could of course make a visual warning if they chose: groovy is not a supported language currently - [link to supported list]. They could even do this during composition. – Josh Goebel Oct 27 at 12:41
  • If only people would actually read the warnings. – Mast Oct 27 at 12:54
  • 6
    That's a big reason we default to "no highlight"... it's a warning that's hard to miss - doesn't require reading - yet provides immediate feedback to the user. :-) And if someone was a regular SO user they'd very quickly learn what no highlighting signaled: an unsupported language or a typo in language name. Inconsistent highlighting is a lot harder to "see" at a glance, making it far worse feedback. Perhaps even impossible without multiple examples. – Josh Goebel Oct 27 at 13:01
  • I fully agree with the question, but I wonder what the automatic detection is then good for? It seems to be only good for cases where the content creator itself has no clue what the language is of the code, he/she just provided. And then we would again get potential random behavior. Automatic detection can always lead to random behavior, or not? As for Groovy, StackOverflow could just enable the Groovy grammar. Does the highlight.js auto-detection gets things more often wrong if the number of possible languages increases? – Trilarion Oct 27 at 14:29
  • 4
    Auto-detect allows post authors to use less effort - you don't need to think about tagging every snippet. This can often work very well when paired with post tag context... i.e. a post tagged "javascript" is far more likely to be javascript than say sql. (Though SE still has tons of room to improve here also.) I'm not suggesting we remove ALL auto-detection, only auto-detect where it's known in advance the outcome is likely to be poor. (such as when a grammar is requested that SE has chosen not to load) – Josh Goebel Oct 27 at 14:54
  • 1
    As for Groovy, StackOverflow could just enable the Groovy grammar. I'm pretty sure it's a space/size concern not a reliability concern. Every language makes their site slower to download... our library is almost 1mb if you include every language, yet ~50kb for a small popular set of languages. Does the highlight.js auto-detection gets things more often wrong if the number of possible languages increases? That's certainly a possibility (more to choose from) though SE could mitigate it greatly with smarter usage of tags to clue the auto-detection. – Josh Goebel Oct 27 at 14:56
  • 5
    Automatic detection can always lead to random behavior... No... the hope is you get predictable behavior based on relevant content (when there is enough signal in the snippet) - not random behavior. But when you remove the "right" answer (purposely don't load a grammar, etc.) and then make the highlighter choose from a bunch of sub-optimal answers [none of them good matches]... you're far more likely to get randomness since you have no idea what the correct signal even is. – Josh Goebel Oct 27 at 15:06
  • 1
    It would also be possible to lazy-load a more complete set (or just a differentset) of grammars based on either the specified language or the language specified as the default for the tag (currently, there's a very limited list of permitted tag default syntax highlighting languages, so that would need to change). Being able to load more languages, or even the entire language set, doesn't require that the entire language set be downloaded for every page. It's more complicated, but SE already has a mechanism in place in the JavaScript to lazy-load additional packages when needed/desired. – Makyen Oct 27 at 17:22
  • 1
    Absolutely. Lazy-loading is the answer if the goal is to correctly highlight as many languages as possible as correctly as possible. Though SE has mentioned the monetary bandwidth costs as well, not just the bundle size from a time perspective. Creative client-side caching would help a lot there I think because once you downloaded a grammar a single time there‚Äôs no need to ever download it again. At least not until a new version of library is used. – Josh Goebel Oct 27 at 17:38
  • 2
    It would be nice if you indicated in your bio that you were the maintainer of highlight.js, so users who read your posts have that context. – Sonic the K-Day Hedgehog Oct 27 at 19:41
  • One way to approach this is by ending the practice of tags lacking a specified highlighting language triggering auto-detect... but that may do more harm then good, since there are plenty of tags where a language simply doesn't make sense, especially the ones denoting concepts rather than libraries or languages (eg. array). I think you nailed it in your comment- the best case scenario from a usage POV would be to lazy load it if the language specified/ detected wasn't already loaded. – zcoop98 Oct 27 at 22:06
  • 4
    @zcoop98 if the language specified/ detected wasn't already loaded This wording is a bit confusing. A language grammar must first be loaded before it can be auto-detected... so there is no such thing as "This looks like Groovy, so now lazy load Groovy". But if a post was hinted groovy then SE could choose to lazy load Groovy and use that explicitly. Or if a post was tagged groovy (among other things) then SE could lazy load groovy before highlighting and then auto-detect would consider groovy as a possibility when doing the analysis. – Josh Goebel Oct 27 at 23:54
  • 2
    ending the practice of tags lacking a specified highlighting language triggering auto-detect As you say that might be too radical. Really a list of all valid language tags is necessary... so that when given a tag the JS can query "is groovy a language tag or a generic concept tag"? And if it's a language (one that's simply not in the default bundle) then that would either key the lazy-load - or simply turn off highlighting for that block. – Josh Goebel Oct 28 at 0:01

You must log in to answer this question.

Browse other questions tagged .