highlight.js 默认只在页面加载时自动高亮已存在的代码块；对于通过 fetch 异步插入的 github 源码，需手动调用 `hljs.highlightelement()` 触发高亮，否则无法生效。
要在网页中正确高亮从 GitHub（如 raw.githubusercontent.com）动态获取的代码（例如 PowerShell 脚本），关键在于理解 Highlight.js 的执行时机：它默认在 DOM 加载完成时通过 hljs.highlightAll() 扫描并处理所有
<code> 元素。而你使用 fetch() 获取内容并设置 textContent 是<strong>异步操作</strong>，发生在 highlightAll() 之后，因此新插入的代码不会被自动识别。<p>✅ 正确做法是：在代码写入 DOM 后，<strong>显式调用 hljs.highlightElement(element)</strong> 对目标 <code> 元素进行单次高亮。</code></p> <h3>✅ 完整工作示例</h3> <pre class="brush:php;toolbar:false;"> <!-- 样式必须引入（推荐原子主题） --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/highlight.js@11.9.0/build/styles/atom-one-dark-reasonable.min.css"><!-- 必须使用 <pre class="brush:php;toolbar:false;"><code> 结构，且指定 language 类（可选但推荐） --><pre class="brush:php;toolbar:false;"><code id="code" class="powershell"></code><script src="https://<a%20style=" color: text-decoration:underline title="cdn" href="https://m.php.cn/zt/19618.html" target="_blank">cdn.jsdelivr.net/gh/highlightjs/highlight.js@11.9.0/build/highlight.min.js"></script><script src="https://cdnjs.cloudflare.com/<a%20style=" color: text-decoration:underline title="ajax" href="https://m.php.cn/zt/15849.html" target="_blank">ajax/libs/highlight.js/11.9.0/languages/powershell.min.js"></script><script> // 动态加载 GitHub 原始文件内容 fetch("https://raw.githubusercontent.com/Ayanmullick/test/master/AutomationAcc/test1.ps1") .then(response => { if (!response.ok) throw new Error(`HTTP ${response.status}: ${response.statusText}`); return response.text(); }) .then(data => { const codeEl = document.getElementById('code'); codeEl.textContent = data; // ⚠️ 不要用 innerHTML，避免 XSS codeEl.className = 'language-powershell'; // 显式声明语言（提升检测准确率） // ✅ 关键：手动触发高亮 hljs.highlightElement(codeEl); }) .catch(err => { console.error("代码加载失败：", err); document.getElementById('code').textContent = `// 加载错误：${err.message}`; }); </script>html>
? 重要注意事项
-
HTML 结构规范：务必使用
<code id="..."> 包裹目标区域，Highlight.js 依赖此语义结构识别代码块。</code>
- textContent 而非 innerHTML：防止远程脚本执行（XSS），原始文本渲染更安全。
- 显式设置 class="xxx"：如 language-powershell，可提升语言检测准确性，尤其对无明显特征的脚本。
- CDN 版本一致性：确保 highlight.min.js、CSS 和语言模块版本号一致（如均用 @11.9.0），避免兼容问题。
- 错误处理不可少：GitHub raw 链接可能因权限、路径或 CORS 限制失败（注意：GitHub raw 支持 CORS，但私有库不支持），应添加 .catch() 反馈。
? 补充技巧
若需批量高亮多个动态插入的代码块，可用：
从 Git 仓库历史中彻底删除文件
下载
|Git删除了文件，但还会在Git 仓库历史中遗留。 - 想要从 Git 历史移除敏感信息（密码、密钥、token、私钥） - 想要删除意外提交的大文件 - 想要重写 Git 历史、移除特定文件的所有痕迹 - 提到 "force push"、"重写 commit 历史" - 需要从所有分支、所有 tag 中删除某个文件
hljs.highlightAll(); // 重新扫描整个文档（性能略低）
// 或更高效地：
document.querySelectorAll('pre code.language-powershell').forEach(hljs.highlightElement);
总之，异步加载 ≠ 自动高亮；掌握 highlightElement() 是实现动态代码语法高亮的核心钥匙。
