how to code highlight in a JSX?

[artola]

I would like to highlight 1 line, but as it is JSX, the comments should follow the pattern {/* ... */} to be valid JSX, but in such a way, they are not understood by shiki and therefore not replaced. I did try the latest v2 and even v3.

// button-group.tsx

function ButtonGroup({children, isDisabled}: ButtonGroupProps) {
  return (
    <div style={{display: 'flex', gap: 8}}>
      {/* [!code highlight] */}
      <ButtonContext.Provider value={{isDisabled}}>
        {children}
      </ButtonContext.Provider>
    </div>
  );
}

If I set the comment above the JSX, then I could highlight several lines, but not only 1 desired.

// button-group.tsx

function ButtonGroup({children, isDisabled}: ButtonGroupProps) {
  return (
    // [!code highlight]:2
    <div style={{display: 'flex', gap: 8}}>
      <ButtonContext.Provider value={{isDisabled}}>
        {children}
      </ButtonContext.Provider>
    </div>
  );
}

I can not figure out a solution, is it possible somehow?

[artola]

my wrong, the language was not properly set in the plugin