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