Prismjs无法高亮JS拉取JSON动态内容，Netlify部署后失效

Prism 的默认高亮触发时机与动态 DOM 渲染时序不匹配，和 Netlify 托管本身无关。

• Prism 默认会在页面 DOMContentLoaded 事件触发时，自动执行一次全页面扫描，给当前已存在的带language-*类名的<code>节点做语法高亮
• 你是通过异步 fetch 拉取 JSON、动态向页面插入代码块的：本地开发环境因为有热更新、资源加载延迟，时序错位不明显，Prism 扫描时动态节点已经存在，高亮可正常生效；生产环境静态资源加载更快，Prism 完成初始高亮扫描时，fetch 请求尚未返回、动态代码块还未插入 DOM，自然不会被高亮
• 如果你之前写的Prism.highlightAll()是放在脚本顶层、fetch 流程外部执行，那么这个调用发生时同样还没渲染出代码块，等于完全无效。

• 调整高亮触发的位置：将Prism.highlightAll()的调用挪到所有动态代码块渲染完成之后，也就是 fetch 成功、appendData循环执行完毕、节点全部挂载到页面后再触发
  参考修改后的代码：

  const root = document.getElementById("root");
  
  fetch("./shorthands.json")
    .then((res) => res.json())
    .then((data) => {
      appendData(data);
      // 等DOM渲染完成后再执行高亮扫描
      Prism.highlightAll();
    })
    .catch((err) => console.log(err));
  
  function appendData(data) {
    for (let i = 0; i < data.length; i++) {
      const syntaxContainer = document.createElement("div");
      syntaxContainer.classList.add("w-full", "py-5");
      syntaxContainer.innerHTML = `<div class="flex items-center" id="${data[i].id}">
            <img src="./hashtag.svg" alt="hashlink" class="w-8" />
            <h1 class="text-white text-3xl">${data[i].name}</h1>
          </div>
          <div class="mt-5 ml-2 text-white">
            <p class="text-lg">longhand</p>
            <pre>
            <code class="language-css">${data[i].longhand}</code>
          </div>
          <div class="mt-5 ml-2 text-white">
            <p class="text-lg">shorthand</p>
            <pre><code class="language-css">${data[i].shorthand}</code>
          </div>
          `;
      root.appendChild(syntaxContainer);
    }
  }
  

• 排查附带影响因素：
  • 确认生产环境加载的 Prism 资源包含 CSS 语法解析模块，仅引入 Prism 核心包、未加载对应语言的语法插件时，即使时序正确也无法完成 CSS 代码的高亮解析
  • 确认./shorthands.json、./hashtag.svg等相对路径引用的静态资源在生产环境可正常访问，若出现404状态码，说明相对路径在Netlify部署的目录结构下匹配错误，会导致数据加载失败，根本没有动态代码块渲染
  • 移除重复的id="pre"属性，DOM 规范不允许同页面存在重复 ID，会导致后续 DOM 选择、脚本逻辑出现异常
  • 检查 Prism 对应的主题 CSS 资源是否在生产环境正常加载，避免高亮的 DOM 结构生成了，但样式缺失导致看起来和没高亮效果一致
• 可选性能优化：后续如果还会动态新增代码块，可以使用 Prism 提供的Prism.highlightElement()方法，针对单个新插入的 code 节点单独触发高亮，无需每次全量扫描整个页面，降低性能消耗。

注：Netlify 仅提供静态文件托管能力，不会修改前端 JS 的运行逻辑，这类本地正常、生产失效的问题，基本都来自加载时序、资源路径、执行顺序的差异，可通过浏览器控制台的资源加载报错快速定位。

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