There are 2 main parts to this:
- When highlight.js is used to detect a language, if it is given no constraints on languages to choose from, it will choose the language that results in the most distinct highlighting. If the site has a large number of available languages - like here on Stack Exchange - then the resulting chosen language is frequently inaccurate. This is a deficiency on highlight.js's side.
- When Stack Exchange asks highlight.js to highlight code blocks in a question, it will either require all code blocks to be highlighted with the same language (if the question is tagged with exactly one tag associated with a language), or (in all other cases) it will ask highlight.js to detect the language automatically, without any language constraints. As a result, the resulting highlighting is frequently off. This is a deficiency on Stack Exchange's side, and is easily fixable.
How highlight.js does it: When it needs to choose a language to use given code text, it tries highlighting with all languages it can, and the one with the highest "relevance" wins:
Highlight.js tries to automatically detect the language of a code fragment. The heuristics is essentially simple: it tries to highlight a fragment with all the language definitions and the one that yields most specific modes and keywords wins. The job of a language definition is to help this heuristics by hinting relative relevance (or irrelevance) of modes.
So, if some language happens to share a similar structure and/or keywords with another language, and if the highlighter is not given any hints as to which language is preferable, it may well often get those mixed up.
How Stack Exchange does it: Some of this is described in the meta FAQ. Other details in a Meta post I made on this subject.
Some tags are associated with highlight languages. These associations can be seen at the bottom of the tag wiki page, eg javascript is associated with lang-js
:
Code Language (used for syntax highlighting): lang-js
If a question has exactly one tag with an associated highlight language, all code blocks in the post get highlighted with that language.
If there are 2+ tags associated with a highlight language, all code blocks in the post are highlighted by having highlight-js guess at the most appropriate language between all available languages (not just the languages associated with question tags, but with all possible languages SE has loaded), which doesn't work well.
If none of the tags on a question are associated with a highlight language, no automatic highlighting will occur (not even guessing).
In the case of the question being asked about:
- Neither tag on the question has a language associated with it, so auto-detection was used. You might think "We should associate the
html
tag with the xml highlight language, or the jquery
tag with the javascript highlight language", but given the current system, adding additional default languages to tags increases the chance of default-language collisions on questions, and such collisions result in neither language being passed to highlight.js.
- Lua may have been chosen because both
input
and type
are "built-in" words in Lua, so the highlighter found Lua to have the highest relevance of all languages it tried.
The fix
Stack Exchange can significantly improve highlighting accuracy by passing all related languages to highlight.js when a code block needs to be highlighted. For example, a question tagged with javascript
and css
should call highlight.js with ['javascript', 'css']
as language hints, rather than with no hint at all due to both tags being associated with a separate language. This can easily be achieved using highlight.js's current API. This is described at length in a post on Meta SE.
matlab
andpython
tags, where code blocks for each were highlighted asyaml
(before I edited in specific highlighting)markdown
), then I added the language tags after realizing the highlighting was off (before you posted your answer), then I rolled it back after seeing this question so I could use it as an example