如何使用PrismJS正确高亮React tsx代码解决组件标签丢失问题

AI 小北

2026-9-23

问题原因

你写在<code>标签内的<、>等HTML特殊字符会被浏览器当作真实HTML标签解析，<SocketProvider>这类自定义标签会被浏览器识别为无效DOM标签直接移除，PrismJS执行时能拿到的就只剩注释内容了。

解决方案

方案1：手动转义代码内的HTML特殊字符

把代码里的所有<替换为<，>替换为>，&替换为&即可，修改后的代码块部分如下：

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

方案2：用script标签包裹代码避免浏览器解析

不想手动转义的话，可以用type为text/prism的script标签存代码，再用PrismJS API渲染，示例如下：

<script type="text/prism" id="tsx-code" class="language-tsx">
// Display some tsx:
<SocketProvider url={`ws://${apiServer}/...`}>
  <Stats />
</SocketProvider>
</script>
<pre><code id="code-container"></code></pre>

<script>
  const code = document.getElementById('tsx-code').textContent;
  const container = document.getElementById('code-container');
  container.textContent = code;
  Prism.highlightElement(container);
</script>