如何使用 PrismJS 突出显示 React tsx

Question

我有这个 html 文件：

<!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>

本来应该显示高亮的代码，但是所有的Component标签都被删除了，我只有注释：

// Display some tsx:

请帮忙。

Answer 1

易于修复。只需确保在下载 prism.js 时包含 Unescaped Markup 插件，并将代码包裹在 html 注释中，例如这个：

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

如何使用 PrismJS 突出显示 React tsx

How to highlight React tsx with PrismJS

reactjs

syntax-highlighting

prismjs