Highlight.js 在 Laravel 开发环境正常运行，但在生产环境（Cloudflare + LiteSpeed）下失效，根本原因在于 DOM 加载时机不一致：生产环境需确保高亮逻辑在文档就绪后执行，推荐使用 $(document).ready() 或原生 DOMContentLoaded 事件包裹初始化代码。
highlight.js 在 laravel 开发环境正常运行，但在生产环境（cloudflare + litespeed）下失效，根本原因在于 dom 加载时机不一致：生产环境需确保高亮逻辑在文档就绪后执行，推荐使用 `$(document).ready()` 或原生 `domcontentloaded` 事件包裹初始化代码。
在 Laravel 10 项目中集成 Highlight.js 时，开发者常遇到「开发环境高亮正常、生产环境代码块无样式且无语法着色」的问题。该现象并非 Highlight.js 本身缺陷，而是由资源加载顺序、JavaScript 执行时机及服务器优化策略差异共同导致。
? 根本原因分析
- 开发环境（如 Laravel Valet / PHP内置服务器）：HTML 渲染与脚本执行相对宽松，hljs.highlightAll() 可能恰好在 DOM 完全解析后被调用，因而“偶然成功”。
- 生产环境（LiteSpeed + Cloudflare）：启用 HTML 压缩、延迟渲染、JS 合并/延迟加载等优化，导致 <script> 标签执行时，目标 <pre><code> 元素尚未挂载到 DOM 中；此时 highlightAll() 扫描不到代码块，静默失败。
- jQuery 依赖误区：答案中提到“需用 jQuery”，实为表象——真正起作用的是 $(document).ready() 提供的DOM 就绪保障机制，而非 jQuery 本身（若项目未引入 jQuery，则不应强依赖）。
✅ 推荐解决方案（无需 jQuery）
将初始化逻辑改为原生方式，确保 DOM 加载完成后再执行：
@push('script')
<script>
document.addEventListener('DOMContentLoaded', () => {
// 确保 CopyButtonPlugin 已定义（注意：需在 highlight.min.js 之后加载）
if (typeof CopyButtonPlugin !== 'undefined' && typeof hljs !== 'undefined') {
hljs.addPlugin(new CopyButtonPlugin());
hljs.highlightAll(); // 自动查找并高亮所有 <pre><code> 块
} else {
console.warn('Highlight.js or CopyButtonPlugin not loaded');
}
});
</script>
@endpush✅ 关键点说明：
- DOMContentLoaded 事件比 window.onload 更早触发，仅等待 HTML 解析完成，不阻塞 CSS/图片加载，性能更优；
- 显式检查 hljs 和 CopyButtonPlugin 是否可用，避免因 CDN 加载延迟导致 ReferenceError；
- 此方案完全脱离 jQuery，符合现代前端轻量化趋势。
⚠️ 额外注意事项
- CDN 资源稳定性：您当前使用的 cdn.jsdelivr.net/gh/highlightjs/... 地址含 GitHub 仓库哈希（如 @11.9.0），属语义化版本锁定，推荐保留；但需确认该版本确实包含 CopyButtonPlugin（它非 Highlight.js 官方内置插件，需独立引入）。
- CSS 加载顺序：确保 github-dark.min.css（或其他主题）在 <script> 执行前已加载完毕，否则可能出现高亮但无样式的“白字”现象。建议将 <link> 放在 <head> 顶部。
- LiteSpeed 缓存干扰：若启用 Autoptimize 或 LiteSpeed 的 JS Minify/Combine 功能，可能破坏 hljs.highlightAll() 的执行上下文。可在 LiteSpeed 后台 → Cache → Excludes 中排除 /post/* 或对应页面路径，或临时禁用 JS 优化验证问题。
- Cloudflare 设置：关闭 Rocket Loader™（已弃用但仍可能启用）和 Auto Minify → JavaScript（可能混淆 hljs 对象引用），在 Cloudflare 仪表盘 → Speed → Optimization 中调整。
? 快速验证方法
在浏览器开发者工具 Console 中手动执行：
hljs.highlightAll(); // 若立即生效 → 证明是执行时机问题
document.querySelector('pre code')?.textContent; // 检查代码块是否存在通过以上结构化修复，可彻底解决 Highlight.js 在 Laravel 生产环境下的初始化失效问题，兼顾兼容性、性能与可维护性。
