如何在JS加载代码内容后使用Prism.js实现语法高亮？

当然可以实现，Prism.js本身就提供了手动触发语法高亮的API，完全适配动态内容的场景。

核心实现步骤 #

• 确保Prism基础库及对应语言包已加载：如果你的代码包含特定语言（比如Python、Java），要提前引入Prism对应的语言模块，否则无法正确高亮。
• 动态插入代码后手动调用高亮API：
  1. 针对单个代码元素：使用Prism.highlightElement(element)，传入你刚插入页面的<code>元素即可。
  2. 针对多个代码元素或全局重新高亮：使用Prism.highlightAll()，它会遍历页面所有带有language-xxx类名的元素并重新处理。

示例代码 #

假设你通过Fetch加载JSON中的代码片段并插入页面：

// 加载JSON中的代码片段
fetch('code-snippets.json')
  .then(res => res.json())
  .then(data => {
    // 获取页面中的代码容器
    const container = document.getElementById('code-container');
    
    // 创建符合Prism要求的代码结构：<pre><code class="language-xxx"></code></pre>
    const pre = document.createElement('pre');
    const code = document.createElement('code');
    code.className = `language-${data.language}`; // 从JSON获取语言类型，比如javascript
    code.textContent = data.codeContent; // 从JSON获取代码内容
    
    pre.appendChild(code);
    container.appendChild(pre);
    
    // 关键：插入后立即触发高亮
    Prism.highlightElement(code);
  });

注意事项 #

• 必须给<code>元素添加正确的language-xxx类名，Prism依赖这个类来识别代码语言。
• 如果是替换已有代码块的内容，替换完成后要再次调用Prism.highlightElement，因为Prism不会自动监听内容变化。
• 若使用Prism的模块化版本（比如ES模块），要确保语言模块在调用高亮API前已经加载完成。

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