动态高亮报错主因是DOM状态、执行时机或HTML结构不匹配；常见“element is null”需检查节点是否存在，Vue用$nextTick、React用useEffect确保渲染完成，v-html插入后须手动调用highlightElement()。
动态高亮报错，绝大多数不是 highlight.js 本身出问题，而是 DOM 状态、执行时机或 HTML 结构没对上。直接修比猜快。
hljs.highlightElement() 报错“element is null”
这是最常卡住人的第一步：你传了个不存在的 DOM 节点进去。
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
- 检查
element是否真被查到了，比如document.querySelector('.code-block')返回null，常见于元素还没挂载完就执行 - Vue/React 中别在
mounted或useEffect的初始回调里直接查——得等框架完成渲染，Vue 用this.$nextTick(() => {...})，React 用useEffect(() => { ... }, [deps])并确保依赖正确 - 如果元素是通过
v-html或innerHTML插入的，记得它不触发生命周期钩子，必须手动监听插入完成（如MutationObserver）或在插入后立刻调用hljs.highlightElement()
高亮后代码变空白或只显示纯文本
表面是“没高亮”，实际是 HTML 解析失败或样式被干掉。
- 确认代码块包裹结构是严格的
<pre class="brush:php;toolbar:false;"><code class="js">...</code></pre>—— 少一层、多一层、class 拼错（如写成js而非javascript）都会让highlight.js跳过处理 - 检查浏览器 Network 面板，
highlight.min.js和 CSS 文件是否返回 200；控制台若报hljs is not defined，说明 JS 没加载成功或执行顺序错了（hljs.highlightAll()不能写在<script src="...>%20%E5%89%8D%EF%BC%89 %0A - %E7%94%A8%20Elements%20%E9%9D%A2%E6%9D%BF%E7%9C%8B%E7%9C%9F%E5%AE%9E%20DOM%EF%BC%9A%E5%A6%82%E6%9E%9C%20
<code>%20%E5%86%85%E9%83%A8%E8%A2%AB%E8%BD%AC%E4%B9%89%E6%88%90%20<div>%20%E8%BF%99%E7%A7%8D%E5%AD%97%E7%AC%A6%E4%B8%B2%EF%BC%8C%E8%AF%B4%E6%98%8E%E4%BD%A0%E7%94%A8%E4%BA%86%20v-html%20%E4%BD%86%E6%9C%8D%E5%8A%A1%E7%AB%AF%E6%88%96%E5%AF%8C%E6%96%87%E6%9C%AC%E8%BF%94%E5%9B%9E%E7%9A%84%E6%98%AF%E5%B7%B2%E8%BD%AC%E4%B9%89%20HTML%EF%BC%8C%E5%BE%97%E5%85%88%20DOMPurify.sanitize()%20%E6%88%96%E7%94%A8%20unescape()%20%E8%BF%98%E5%8E%9F %0A
%E5%8A%A8%E6%80%81%E6%8F%92%E5%85%A5%E5%90%8E%E9%AB%98%E4%BA%AE%E5%A4%B1%E6%95%88%EF%BC%8C%E4%BD%86%E6%89%8B%E5%8A%A8%E8%B0%83%E7%94%A8%20highlightAll()%20%E6%B2%A1%E5%8F%8D%E5%BA%94
%0AhighlightAll()%20%E5%8F%AA%E6%89%AB%E6%8F%8F%E5%BD%93%E5%89%8D%E5%B7%B2%E5%AD%98%E5%9C%A8%E7%9A%84%E8%8A%82%E7%82%B9%EF%BC%8C%E4%B8%94%E9%BB%98%E8%AE%A4%E8%B7%B3%E8%BF%87%E5%B7%B2%E5%A4%84%E7%90%86%E8%BF%87%E7%9A%84%20<code>%EF%BC%88%E5%AE%83%E4%BC%9A%E5%8A%A0%20data-highlighted%20%E5%B1%9E%E6%80%A7%E6%A0%87%E8%AE%B0%EF%BC%89%E3%80%82%E5%8F%8D%E5%A4%8D%E8%B0%83%E7%94%A8%E4%B8%8D%E4%BC%9A%E9%87%8D%E5%88%B7%E3%80%82
%E7%AB%8B%E5%8D%B3%E5%AD%A6%E4%B9%A0%E2%80%9C 真正麻烦的不是报错本身，而是错误发生时 DOM 已被浏览器静默修正过一次——你看到的源码和实际参与高亮的结构可能根本不是一回事。每次改完，务必切到 Elements 面板，点开
hljs.highlightAll()</script>，尤其在滚动或输入频繁触发的场景下，性能差还无效hljs.highlightElement(element) 单独处理，更轻量、可控document.querySelectorAll('code[data-highlighted]').forEach(el => el.removeAttribute('data-highlighted'))，再调 hljs.highlightAll()
<pre class="brush:php;toolbar:false;"><code></code> 看里面是不是真有代码文本，而不是空标签或一堆 <code>。这一步省掉，后面全白忙。</code></pre>
