highlight.js 默认只在页面加载时自动高亮已存在的代码块；若通过 fetch 异步插入代码，则需手动调用 `hljs.highlightelement()` 触发高亮，否则无法生效。
要在网页中对从 GitHub（或其他远程源）动态获取的代码实现语法高亮，关键在于理解 Highlight.js 的执行时机：它默认在 DOM 加载完成后立即扫描并高亮所有
<code> 元素。而通过 fetch 异步加载内容并写入 DOM 的操作发生在该扫描之后，因此新插入的代码不会被自动识别。</p><p>✅ 正确做法是：<strong>在代码写入 DOM 后，显式调用 hljs.highlightElement() 对目标 <code> 元素进行手动高亮</strong>。</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/ai/1273" title="Avatar AI"><img
src="https://img.php.cn/upload/ai_manual/001/431/639/68b6dad229e35722.png" alt="Avatar AI" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/ai/1273" title="Avatar AI">Avatar AI</a>
<p>AI成像模型，可以从你的照片中生成逼真的4K头像</p>
</div>
<a href="/ai/1273" title="Avatar AI" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div><h3>✅ 正确代码结构（含 HTML + JS）</h3><pre class="brush:php;toolbar:false;"><!-- 必须包含 pre + code 结构 -->
<pre class="brush:php;toolbar:false;"><code id="code"></code>
css">
<script src="https://cdn.jsdelivr.net/gh/highlightjs/[email%C2%A0protected]/build/highlight.min.js"></script><script src="https://cdnjs.cloudflare.com/<a%20style=" color: text-decoration:underline title="ajax" href="https://www.php.cn/zt/15849.html" target="_blank">ajax/libs/highlight.js/11.7.0/languages/powershell.min.js"></script><script>
fetch("https://raw.<a style="color:#f60; text-decoration:underline;" title= "git" href="https://www.php.cn/zt/15841.html" target="_blank">githubusercontent.com/Ayanmullick/test/master/AutomationAcc/test1.ps1")
.then(response => {
if (!response.ok) throw new Error(`HTTP ${response.status}`);
return response.text();
})
.then(data => {
const codeEl = document.getElementById('code');
codeEl.textContent = data;
codeEl.className = 'language-powershell'; // ? 关键：设置 language class，让 hljs 自动匹配语言
hljs.highlightElement(codeEl); // ? 手动触发高亮
})
.catch(err => {
console.error('Failed to load or highlight code:', err);
document.getElementById('code').textContent = `Error: ${err.message}`;
});
</script>
⚠️ 注意事项
- 必须使用
<code> 包裹</strong>：Highlight.js 依赖 <pre class="brush:php;toolbar:false;"> 容器保留换行与空格，仅 <code> 不足以正确渲染。</li><li>*<em>务必设置 `language-</em>类名**：如class="powershell"，否则highlightElement()` 无法推断语言（即使已加载 PowerShell 语法模块）。</li><li><strong>避免重复初始化</strong>：不要在异步回调中再次调用 hljs.highlightAll() —— 它仅作用于初始 DOM，且可能引发性能问题或重复处理。</li><li><strong>推荐使用 highlightElement() 而非 highlightAuto()</strong>：前者更精准、高效，且支持显式语言指定；后者需额外传参且易误判。</li></ul><h3>✅ 补充：支持多语言的通用写法</h3><p>若需根据文件扩展名自动设置语言类，可增强逻辑：</p><pre class="brush:php;toolbar:false;">const url = "https://raw.githubusercontent.com/Ayanmullick/test/master/AutomationAcc/test1.ps1"; const ext = url.split('.').pop().toLowerCase(); const langMap = { ps1: 'powershell', js: 'javascript', py: 'python', md: 'markdown' }; const lang = langMap[ext] || 'plaintext'; codeEl.textContent = data; codeEl.className = `language-${lang}`; hljs.highlightElement(codeEl);通过以上方式，即可稳定、可靠地为任意远程加载的代码片段启用 Highlight.js 语法高亮，兼顾可维护性与专业体验。
