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

要在网页中对从 GitHub（或其他远程源）动态获取的代码实现语法高亮，关键在于理解 Highlight.js 的执行时机：它默认在 DOM 加载完成后立即扫描并高亮所有

 元素。而通过 fetch 异步加载内容并写入 DOM 的操作发生在该扫描之后，因此新插入的代码不会被自动识别。
✅ 正确做法是：在代码写入 DOM 后，显式调用 hljs.highlightElement() 对目标  元素进行手动高亮。
✅ 正确代码结构（含 HTML + JS）


css">


⚠️ 注意事项

必须使用
 包裹：Highlight.js 依赖 
 容器保留换行与空格，仅  不足以正确渲染。
*务必设置 `language-类名**：如class="powershell"，否则highlightElement()` 无法推断语言（即使已加载 PowerShell 语法模块）。
避免重复初始化：不要在异步回调中再次调用 hljs.highlightAll() —— 它仅作用于初始 DOM，且可能引发性能问题或重复处理。
推荐使用 highlightElement() 而非 highlightAuto()：前者更精准、高效，且支持显式语言指定；后者需额外传参且易误判。
✅ 补充：支持多语言的通用写法
若需根据文件扩展名自动设置语言类，可增强逻辑：

							

								
								

									小蓝本
									
ToB智能销售增长平台
								
								下载 
							
						
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 语法高亮，兼顾可维护性与专业体验。


https://www.php.cn/faq/1967746.html