使用run_prettify.js时无刷新页面跳转代码片段不高亮如何解决？

google/code-prettify 默认仅在页面首次加载完成后自动执行一次高亮逻辑，无刷新跳转属于前端动态替换DOM内容，新增的带prettyprint类的代码块不会被自动识别处理，因此会出现无刷新跳转后代码无高亮的问题。

在无刷新跳转完成、新页面内容完全插入DOM后，手动调用prettify暴露的高亮API即可，不同技术栈的调用时机可以对应调整：

• 如果使用PJAX类的无刷新跳转方案，绑定对应内容加载完成的事件：

document.addEventListener('pjax:complete', function () {
  // 执行全页代码高亮
  PR.prettyPrint()
})

• 如果是Vue、React等单页应用框架，在页面组件的mounted/useEffect等DOM挂载完成的生命周期中调用PR.prettyPrint()即可。
• 如果需要避免重复处理已高亮的代码块，可以添加标记判断，仅处理新增的未高亮代码：

// 以PJAX事件为例，可替换为对应技术栈的回调时机
document.addEventListener('pjax:complete', function () {
  // 筛选未被高亮处理的代码块
  const codeBlocks = document.querySelectorAll('code.prettyprint:not([data-highlighted])')
  codeBlocks.forEach(el => {
    PR.prettyPrintElement(el)
    // 增加已处理标记，避免重复执行
    el.setAttribute('data-highlighted', 'true')
  })
})

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