highlight.js 默认只在页面加载时自动高亮已存在的代码块；若通过 fetch 异步插入代码，则需手动调用 `hljs.highlightelement()` 触发高亮，否则无法生效。
要在网页中对从 GitHub（或其他远程源）动态获取的代码实现语法高亮，关键在于理解 Highlight.js 的执行时机：它默认在 DOM 加载完成后立即扫描并高亮所有 <pre><code> 元素。而通过 fetch 异步加载内容并写入 DOM 的操作发生在该扫描之后，因此新插入的代码不会被自动识别。
✅ 正确做法是：在代码写入 DOM 后，显式调用 hljs.highlightElement() 对目标 <code> 元素进行手动高亮。
✅ 正确代码结构（含 HTML + JS）
<!-- 必须包含 pre + code 结构 -->
<pre><code id="code"></code></pre>
<!-- 样式与脚本（注意：PowerShell 语言支持需单独引入） -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/styles/atom-one-dark-reasonable.min.css">
<script src="https://cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/highlight.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/languages/powershell.min.js"></script>
<script>
fetch("https://raw.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>⚠️ 注意事项
- 必须使用 <pre><code> 包裹：Highlight.js 依赖 <pre> 容器保留换行与空格，仅 <code> 不足以正确渲染。
- *务必设置 `language-类名**：如class="powershell"，否则highlightElement()` 无法推断语言（即使已加载 PowerShell 语法模块）。
- 避免重复初始化：不要在异步回调中再次调用 hljs.highlightAll() —— 它仅作用于初始 DOM，且可能引发性能问题或重复处理。
- 推荐使用 highlightElement() 而非 highlightAuto()：前者更精准、高效，且支持显式语言指定；后者需额外传参且易误判。
✅ 补充：支持多语言的通用写法
若需根据文件扩展名自动设置语言类，可增强逻辑：
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 语法高亮，兼顾可维护性与专业体验。
