reactjssyntax-highlightingprismjs

How to highlight React tsx with PrismJS

I have this html file:

<!DOCTYPE html>
<html>
  <head>
    <title>Test PrismJS</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="prism/prism-onedark.css">
  </head>

  <body>
    <pre><code class="language-tsx">
      // Display some tsx:
      <SocketProvider url={`ws://${apiServer}/...`}>
        <Stats />
      </SocketProvider>
    </code></pre>

    <script type="text/javascript" src="prism/prism.js"></script>
  </body>
</html>

It is supposed to display the code highlighted, but all the Component tags are removed, and all I have is the comment:

// Display some tsx:

Please help.

Solution

  • Easy to fix. just make sure you include the Unescaped Markup plugin when downloading prism.js, and wrap you code in html comments, like this:

    <pre><code class="language-tsx"><!--
  // Display some tsx:
  <SocketProvider url={`ws://${apiServer}/...`}>
    <Stats />
  </SocketProvider>
--></code></pre>