Is there a way to have syntax highlighting in JSX?

[jcubic]

I want to render code blocks in React code. I was trying to import:

import CodeBlock from '@theme/CodeBlock';

But when rendering this code:

<ul className="list">
  {examples.map((example, index) => {
    return (
      <li key={index}>
        <div className="example">
          <CodeBlock language="scheme">{example.code}</CodeBlock>
        </div>
        <div className="description">{example.description}</div>
      </li>
    );
  })}
</ul>

it renders everything in one line, and since the first line is a comment everything is a single line comment.

I want to have code snippets to run in REPL (on the home page) and I want the syntax highlighting for the snippets. My REPL uses Prism loaded with a script tag, but I can't add syntax highlighting using the same code because I've got rehydration errors.

EDIT: it seems that it's highlighted for a split second and then replaced with a single line.
I'm not able to reproduce it at CodeSandbox, do you know what may be the reason why the syntax highlighting disappear?

[jcubic]

Found the issue, the CodeBlock added language-scheme class to output. I'ts not required by Prism at all, but it interferes with the Prism that I loaded for REPL. Fixed this with swizzle of CodeBlock.