🏠 back to Observable

Syntax coloring problem?

I think there is a problem in syntax coloring when a function has a lot of parameters (or if a parameter name is very long). The variables are shown in grey as if they were erroneous. They should be printed in blue imho.

This is a known limitation of the CodeMirror Javascript mode. The syntax highlighting fails even if there’s just one argument to the “fat-arrow” function, as long as it’s on different lines from the enclosing parentheses, e.g.:

showTheProblem = (abnormal
) => {
  const normal = true;
  console.log(`syntax coloring is ${abnormal} here, but ${normal} here`);

already fails.

Presumably when CodeMirror 6 rolls around with its lezer-based syntax highlighting things will be much better.

OK, thanks for finding the reason. Let’s wait for the next version.

If you have such a long list of parameters, consider just using function (...) {...}

notAProblem = function (
) {
  console.log(`syntax ${coloring} is fine here`);

Yes, you’re right. As @bgchen stated, the problem is just with the fat arrow notation, so it’s a good workaround.