如何为动态加载的 GitHub 代码实现 Highlight.js 语法高亮

highlight.js 默认只在页面加载时自动高亮已存在的代码块;对于通过 fetch 异步插入的 github 源码,需手动调用 `hljs.highlightelement()` 触发高亮,否则无法生效。

要在网页中正确高亮从 GitHub(如 raw.githubusercontent.com)动态获取的代码(例如 PowerShell 脚本),关键在于理解 Highlight.js 的执行时机:它默认在 DOM 加载完成时通过 hljs.highlightAll() 扫描并处理所有

 元素。而你使用 fetch() 获取内容并设置 textContent 是异步操作,发生在 highlightAll() 之后,因此新插入的代码不会被自动识别。

✅ 正确做法是:在代码写入 DOM 后,显式调用 hljs.highlightElement(element) 对目标 元素进行单次高亮。

✅ 完整工作示例