Code blocks should be able to display whether a word is a keyword or variable

[luroc]

I don't have a particular reason to request this, but I think this would be a neat feature for code blocks in general and especially for code blocks aimed at people trying to learn programming:

It crossed my mind how when I was starting to get into programming, I had a really hard time differentiating between "things that have to be written that way" and "things where I can choose how to name them".

This is somewhat alleviated by syntax highlighting and variable naming (like 'foo'), but take the first code block on the JS Guide on Loops and Iteration as an example:

step has the same highlighting as console. Does a loop always need something called step? Does it do something different if there is an i instead of step in some different example?

I find it hard to give really good examples, because now I immediately recognize where a variable is declared, which objects are just standard like console or what's a property with a standardized name like array.length, but I know for sure, that this was a significant cognitive load for me when I was starting out.

I'd propose to either

• investigate if there could be changes to the syntax highlighting to make it more clear what's variable or
• have a button to toggle highlighting for variables (maybe a background color?) which would have the improvement to not take away clarity for non-beginners and give beginners the chance to hypothesize what's variable and 'toggle the solution'

[teoli2003]

As we use an external highlighter, I think you should bring this problem to Prism

Note that, from a JS perspective. console, i, or step are all the same (hence the same color).

Maybe what you need is more information about what is the global scopes. The Window interface for the main thread, some WorkerGlobalScope or a subclass for the different types of worker threads, or a subclass of WorkletGlobalScope (like PaintWorkletGlobalScope or AudioWorkletGlobalScope) for worklets. And this concept is not a JS concept, but a web platform one. (There is a different global scope for non webby use of JS, like Node.js or Deno).

Hope this helps.

[OnkarRuikar]

Yari uses Prism's basic/default JS highlighting. To highlight advanced JS components Prism has provided js-extras. If yari uses the extras then more advanced highlighting can be achieved:

If we wish to do this then please raise an issue in mdn/yari repo and ping me. I'll be happy to work on it. 😄

---

We can extend Prism's JS language definition and add Web API interfaces that are global and static methods. This will make code more easy to grasp and it'll be a unique feature for MDN Web Docs site.