Syntax coloring problem?

Feedback
1

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.

https://observablehq.com/@severo/syntax-coloring-problem

Capture%20d%E2%80%99%C3%A9cran%20de%202019-09-13%2011-50-26
Capture%20d%E2%80%99%C3%A9cran%20de%202019-09-13%2011-50-261772×1024 52.9 KB

2

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.

3

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

4

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

notAProblem = function (
  syntax,
  coloring,
  works,
  here
) {
  console.log(`syntax ${coloring} is fine here`);
}
2 Likes
5

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