本文详解 Highlight.js 在 Laravel 10（搭配 Cloudflare + LiteSpeed）生产环境中不生效的根本原因及可靠修复方案，重点解决因 DOM 加载时机差异导致的 highlightAll() 失效问题。
本文详解 highlight.js 在 laravel 10（搭配 cloudflare + litespeed）生产环境中不生效的根本原因及可靠修复方案，重点解决因 dom 加载时机差异导致的 `highlightall()` 失效问题。
在 Laravel 项目中集成 Highlight.js 实现代码高亮时，开发者常遇到一个典型现象：本地开发环境（php artisan serve 或 Valet）一切正常，但部署至生产环境（尤其是启用 Cloudflare CDN 和 LiteSpeed Web Server 的场景）后，代码块不再高亮，控制台也无明显报错。这并非 Highlight.js 本身缺陷，而是执行时机与 DOM 生命周期不匹配所致。
根本原因在于：
- 开发服务器响应快、资源加载顺序相对稳定，hljs.highlightAll() 可能在 DOM 元素渲染完成后立即执行；
- 生产环境经 Cloudflare 缓存、LiteSpeed 压缩/延迟加载、以及可能的 JS 合并优化后，HTML 渲染与脚本执行时序发生变化；
- 若 <script> 直接写在 Blade 模板末尾（如 @push('script')），但未确保 DOM 已就绪，highlightAll() 将找不到待高亮的 <pre><code> 元素，从而静默失败。
✅ 正确做法是显式等待 DOM 完全加载后再初始化 Highlight.js。推荐使用原生 DOMContentLoaded 事件（无需 jQuery 依赖）：
@push('script')
<script>
document.addEventListener('DOMContentLoaded', function() {
// 确保插件已定义（如 highlightjs-copy）
if (typeof CopyButtonPlugin !== 'undefined') {
hljs.addPlugin(new CopyButtonPlugin());
}
hljs.highlightAll();
});
</script>
@endpush⚠️ 注意事项：
- 避免强制引入 jQuery：原答案中通过 $(document).ready(...) 解决问题，本质是借用了 jQuery 的 DOM 就绪检测，但 Laravel 10 默认不包含 jQuery，额外引入会增加包体积与维护成本；现代浏览器原生 DOMContentLoaded 完全可替代。
- 检查 CDN 资源可用性：Cloudflare 可能拦截或重写含邮箱字符的 URL（如 @ 符号被混淆为 __cf_email__）。请将原始 CDN 链接替换为标准格式（移除 HTML 注释与 email 保护干扰）：
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/highlight.js@11.9.0/build/styles/github-dark.min.css"> <script src="https://cdn.jsdelivr.net/gh/highlightjs/highlight.js@11.9.0/build/highlight.min.js"></script> <script src="https://unpkg.com/highlightjs-copy@1.0.0/dist/highlightjs-copy.min.js"></script> <link rel="stylesheet" href="https://unpkg.com/highlightjs-copy@1.0.0/dist/highlightjs-copy.min.css" />- 版本锁定更稳妥：CDN 链接中明确指定 @11.9.0 等具体版本号，防止上游更新引发兼容性问题。
- 验证执行时机：可在 highlightAll() 前添加 console.log(document.querySelectorAll('pre code').length)，确认元素是否真实存在。
总结：生产环境 Highlight.js 失效，90% 源于执行过早。坚持「DOM 就绪 → 初始化插件 → 执行高亮」三步原则，并使用原生事件监听，即可一劳永逸解决跨环境不一致问题，同时保持项目轻量与可维护性。
