layui的code组件不自带语法高亮，需手动引入highlight.js并严格匹配lay-code语言标识（如javascript而非js），且必须在layui.code()执行后再调用hljs.highlightAll()。
layui 的 code 组件不自带语法高亮
layui 官方的 code 组件只是个带预设样式的 <pre><code></code></pre> 容器，它不会自动识别语言、也不会加高亮类名或调用 highlight.js 等库。你看到的“高亮效果”，基本都来自手动引入第三方库 + 自行初始化。
常见错误现象：code 渲染后代码全是单色、关键字没颜色、行号不显示、javascript 写成 js 也不识别。
- 必须显式引入
highlight.js（或prism.js）CSS 和 JS 文件 -
code组件的lay-code属性值要和 highlight.js 支持的语言标识严格匹配（比如html、javascript、css，不能写js） - layui 初始化
code后，得再手动调用hljs.highlightAll()或逐个处理
在 layui 中正确绑定 highlight.js
最稳妥的做法是：等 layui 的 code 渲染完成后再触发高亮。因为 code 是异步解析 DOM 的，直接在页面加载完就调 highlightAll() 很可能找不到目标节点。
使用场景：页面含多个 code 块，且语言类型不一致（如混用 python 和 nginx）。
- 引入
highlight.js的 CSS 和 JS（推荐 CDN：https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css和https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js） - 在
layui.use(['code'], function(){ ... })回调里，先执行layui.code()，再立即调用hljs.highlightAll() - 如果用了自定义语言（如
nginx），需额外加载对应语言文件：https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/nginx.min.js
示例关键片段：
layui.use(['code'], function(){
layui.code(); // 必须先调这个
hljs.highlightAll(); // 再高亮
});
lay-code 属性值写错导致高亮失效
highlight.js 对语言标识很敏感。lay-code="js" 或 lay-code="vue" 是无效的——前者不被识别，后者需要单独加载 vue 语言包且注意版本兼容性。
参数差异直接影响是否生效：
- ✅ 正确写法：
lay-code="javascript"、lay-code="html"、lay-code="bash"、lay-code="json" - ❌ 常见错误：
lay-code="js"（highlight.js 不认）、lay-code="ts"（应写typescript）、lay-code="vue-html"（不标准，建议拆成html块和javascript块） - 兼容性影响：旧版 highlight.js（tsx，新版才支持
typescript和tsx两个标识
行号、复制按钮这些“增强功能”得自己补
layui 的 code 组件默认不提供行号、复制按钮、语言标签栏。这些不是配置开关能开的，得靠 CSS + JS 补全。
性能影响小，但容易踩坑：比如复制逻辑监听了所有 pre，结果把非 code 区域也绑上了；或者行号用 :before 伪元素生成，但没重置 white-space 导致换行错位。
- 行号推荐用 JS 动态插入
<span class="line-numbers-rows"><span></span></span>，配合 CSS 计数器或data-line属性控制 - 复制按钮建议加在
pre右上角，用position: relative+absolute定位，点击后调用navigator.clipboard.writeText() - 别用
layui.code({skin: 'dark'})试图改高亮主题——它只改背景色，不影响 highlight.js 的语法类名，真正主题在 highlight.js 的 CSS 文件里
code 组件本身是个壳，真正的高亮、行号、复制能力全靠你填进去。最容易被忽略的是：渲染时机（必须等 layui.code() 完成）、语言标识字符串（大小写和全称必须对）、以及 highlight.js 版本和语言包的配套关系。这三个点卡住，代码再漂亮也白搭。 
