Code highlight in JSX

[Yonom]

To Reproduce

I wanted to add a code highlight as such:

```ts
const Test: React.FC = () => {
  return (
    <div> {/* [!code highlight] */}
      <div />
    </div>
  );
};
```

The highlighting works, but this gets rendered as:

<div> {}
  <div />
</div>

Omitting the {} works, but is not valid JSX and thus breaks my editor highlighting

Current vs. Expected behavior

I expected the [!code highlight] to capture JSX {/* */} blocks as this is the usual way to add comments in JSX

Provide environment information

Node.js v20.15.0

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.6.0: Mon Jul 29 21:14:30 PDT 2024; root:xnu-10063.141.2~1/RELEASE_ARM64_T6000
  Available memory (MB): 32768
  Available CPU cores: 10
Binaries:
  Node: 20.15.0
  npm: 10.7.0
  Yarn: N/A
  pnpm: 9.9.0
Relevant Packages:
  next: 14.2.7 // There is a newer version (14.2.8) available, upgrade recommended! 
  eslint-config-next: 14.2.7
  react: 18.3.1
  react-dom: 18.3.1
  typescript: 5.5.4
Next.js Config:
  output: N/A

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

Not sure

Additional context

No response

[fuma-nama]

Use // comment on the top of element instead. For further issues, you can open an issue on Shiki.

[Yonom]

adding // [!code highlight:2] above works as a workaround, but only for the outermost JSX element

Opened an issue on shiki, thanks for pointing me to the right place
shikijs/shiki#770