Inline code with angle brackets nested in JSX tag causes highlighting to fail

[willcrichton]

Subject of the issue

If I have a program like this:

<Hey>
`<F<` x  
y
</Hey>

This has weird syntax highlighting:

This case is minimal. If I remove e.g. the F or an angle bracket <, then the highlighting returns to normal:

Your environment

• OS: MacOS
• Packages: n/a
• Env: VSCode 1.61.2, VSCode MDX 0.2.3

[karlhorky]

Another example of this:

Code:

<RevealAnswer>

abc `a <firstName>`

</RevealAnswer>

error`Unexpected token, expected "{"`

What's the problem here?

```javascript showLineNumbers
function addAndDivideByFive(numberA, numberB)
  console.log('numberA', numberA) {
  const sum = numberA + numberB;
  const result = sum / 5;
  return result;
}
```

Solution: We broke the function statement because we misplaced the `console.log`. The error message already gave us a hint about that. A `{` is expected right after specifying the parameters because the function