静态HTML页Prism渲染JSX代码块被浏览器解析为HTML问题

浏览器解析HTML DOM的时机早于Prism脚本的执行时机：你直接把带尖括号的JSX标签写在<code>标签内部时，浏览器在构建DOM树阶段就会把<开头的JSX标记识别为自定义HTML元素，等Prism运行读取DOM内容时，拿到的已经是被浏览器解析篡改过的残缺结构，自然无法正确识别、高亮JSX语法——这个场景不属于Prism默认配置的自动兜底范围。
另外先排查基础依赖问题：默认的基础Prism包只支持原生JavaScript高亮，不识别JSX语法，你需要额外引入Prism的JSX语法扩展组件，加载顺序必须是：Prism核心脚本 → JavaScript语法组件 → JSX语法组件，顺序错了也会导致JSX高亮失效。

你可以任选以下两种方案，不需要逐行替换尖括号为实体字符：

• 方案1：使用text/plain类型的script标签包裹代码内容
  浏览器不会解析非可执行类型script标签内的任何内容，会完整保留原始文本，这个写法是Prism原生兼容的，不需要额外加载插件。
  代码示例：

  <pre>
    <code class="language-jsx">
      <script type="text/plain">
  

const SomeReactComponent = (props) => {
return (

return (<ThisWillRenderCorrectly />)

- 方案2：开启Prism的未转义标记插件
加载Prism的`unescaped-markup`插件（需要同时引入插件对应的JS和CSS文件），不需要修改原有代码块的嵌套结构，插件会自动提取`<code>`标签内的原始代码内容，避免浏览器提前解析标签。
注意要在引入Prism核心脚本之前声明全局配置，避免插件不生效：
```html
<script>
  window.Prism = window.Prism || {};
  Prism.plugins = Prism.plugins || {};
</script>
<!-- 按顺序引入Prism核心、语法组件、unescaped-markup插件的JS和CSS -->

如果是动态插入到页面的代码块，插入完成后手动执行Prism.highlightAll()即可触发高亮。

不要将未转义的代码块直接放在body根节点下无父容器的位置，否则部分浏览器对自定义元素的解析逻辑会出现异常，导致内容丢失。

内容的提问来源于stack exchange，提问作者Byron