Code diff highlighting breaks on tsx/jsx code blocks

[SaadBazaz]

To Reproduce

1. Make a tsx codeblock in an .mdx page
2. Example:

// ...

export default function MyAgent() {
  return (
    <Agent>
      <PokemonDexAssistant /> // [!code ++]
    </Agent>
  );
}

3. Run the app

Current vs. Expected behavior

Current

The // [!code ++] renders as-is:

Expected

According to the documentation, this should have rendered that particular line as an insert diff.

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.6.0: Mon Jul 29 21:13:04 PDT 2024; root:xnu-10063.141.2~1/RELEASE_ARM64_T6020
  Available memory (MB): 16384
  Available CPU cores: 10
Binaries:
  Node: 22.9.0
  npm: 10.8.3
  Yarn: N/A
  pnpm: 9.5.0
Relevant Packages:
  next: 15.0.1 // There is a newer version (15.0.3) available, upgrade recommended! 
  eslint-config-next: 14.1.0
  react: 18.3.1
  react-dom: 18.2.0
  typescript: 5.6.3
Next.js Config:
  output: N/A
 ⚠ There is a newer version (15.0.3) available, upgrade recommended! 
   Please try the latest canary version (`npm install next@canary`) to confirm the issue still exists before creating a new issue.
   Read more - https://nextjs.org/docs/messages/opening-an-issue

Which area(s) are affected? (Select all that apply)

Not sure

Additional context

No response

[fuma-nama]

This comment syntax is invalid in JSX, you need to use something like:

<>
  {/* [!code highlight] */}
</>

[SaadBazaz]

Doesn't look consistent

[SaadBazaz]

Okay update here, I've realized it's possible by just adding the comment in the line above the line you want highlighted. The only catch is that it has to be the only content in that line. Which works for me.