
highlight.js 默认只在页面加载时自动高亮已存在的代码块;对于通过 fetch 异步插入的 github 源码,需手动调用 `hljs.highlightelement()` 触发高亮,否则无法生效。
要在网页中正确高亮从 GitHub(如 raw.githubusercontent.com)动态获取的代码(例如 PowerShell 脚本),关键在于理解 Highlight.js 的执行时机:它默认在 DOM 加载完成时通过 hljs.highlightAll() 扫描并处理所有
<code> 元素。而你使用 fetch() 获取内容并设置 textContent 是<strong>异步操作</strong>,发生在 highlightAll() 之后,因此新插入的代码不会被自动识别。</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill9972" title="Wechat Article Html"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20e695c2374.jpg" alt="Wechat Article Html" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill9972" title="Wechat Article Html">Wechat Article Html</a>
<p>将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML,微信编辑器可直接渲染,无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。</p>
</div>
<a href="/xiazai/skill9972" title="Wechat Article Html" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div><p>✅ 正确做法是:在代码写入 DOM 后,<strong>显式调用 hljs.highlightElement(element)</strong> 对目标 <code> 元素进行单次高亮。</p><h3>✅ 完整工作示例</h3><pre class="brush:php;toolbar:false;"><!DOCTYPE html>
<html>
<head>
<!-- 样式必须引入(推荐原子主题) -->
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/gh/highlightjs/highlight.js@11.9.0/build/styles/atom-one-dark-reasonable.min.css">
</head>
<body>
<!-- 必须使用 <pre class="brush:php;toolbar:false;"><code> 结构,且指定 language 类(可选但推荐) -->
<pre class="brush:php;toolbar:false;"><code id="code" class="powershell"></code>
<script src="https://cdn.jsdelivr.net/gh/highlightjs/highlight.js@11.9.0/build/highlight.min.js"></script><script src="https://cdnjs.cloudflare.com/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>

















