如何使用 PrismJS 突出显示 React tsx答案

【问题标题】：How to highlight React tsx with PrismJS如何使用 PrismJS 突出显示 React tsx
【发布时间】：2022-01-11 19:37:51
【问题描述】：

我有这个 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>

它应该显示代码突出显示，但是所有的组件标签都被删除了，我只有注释：

// Display some tsx:

请帮忙。

【问题讨论】：

标签： reactjs syntax-highlighting prismjs

【解决方案1】：

易于修复。只需确保在下载 prism.js 时包含 Unescaped Markup 插件，并将代码包装在 html cmets 中，如下所示：

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

【讨论】：