layui的code模块需手动引入highlight.js并按序调用，否则代码块无高亮；必须先引入CSS再JS，lay-code值须与highlight.js语言标识严格一致，且layui.code()必须在hljs.highlightAll()前执行。
layui 的 code 模块本身不带语法高亮能力，必须手动引入 highlight.js（或 prism.js）并按特定顺序调用，否则代码块永远是单色文本。
必须引入 highlight.js 的 CSS 和 JS 文件
layui 只负责把 <pre> 渲染成带标题、行号、滚动条的容器，高亮逻辑完全交给第三方库。不引入 highlight.js，lay-code 属性再规范也没用。
- 推荐用 CDN（2026 年仍稳定）：
https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.csshttps://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js - 如果要用 nginx、toml 等非主流语言，还得额外加载对应语言文件，比如：
https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/nginx.min.js - 注意：CSS 必须在 JS 前引入，否则高亮文字有颜色但背景缺失
lay-code 属性值必须和 highlight.js 语言标识严格一致
highlight.js 对语言名非常敏感，写错一个字母或缩写就失效。它不识别 js、ts、vue 这类简写。
- ✅ 正确写法：
lay-code="javascript"、lay-code="typescript"、lay-code="html"、lay-code="bash" - ❌ 常见错误：
lay-code="js"（无效果）、lay-code="ts"（应为typescript）、lay-code="vue"（需单独加载 vue 插件且注意版本） - 自定义语言如
nginx，必须确保已加载对应语言文件，且lay-code="nginx"全小写、无空格
layui.code() 和 hljs.highlightAll() 的调用顺序不能颠倒
这是最容易被忽略的执行时机问题。layui 的 code 模块是异步解析 DOM 的，如果页面一加载完就调 hljs.highlightAll()，它根本找不到刚生成的 <code> 节点。
- 必须在
layui.use(['code'], function(){})回调里操作 - 先执行
layui.code()，让 layui 把原始<pre>转成带 class 的结构 - 紧接着立刻调
hljs.highlightAll()，此时节点已就位 - 示例：
layui.use(['code'], function(){
layui.code(); // 必须先渲染容器
hljs.highlightAll(); // 再高亮内容
});
行号、主题、自定义样式要靠 CSS 补齐
layui 的 code 模块默认不开启行号，highlight.js 也不控制主题色——这些都得自己加 CSS 或传参。
- 启用行号：给
<pre>加lay-line-numbers属性（layui 2.8+ 支持），或用 CSS 伪元素模拟 - 换主题：替换 highlight.js 的 CSS 文件链接，比如从
github-dark.min.css换成atom-one-light.min.css - 字体/大小不匹配：highlight.js 默认用
font-family: "SFMono-Regular", Consolas, ...，若页面用了其他字体，需覆盖pre code的font-family和font-size
真正卡住人的往往不是“怎么写”，而是 lay-code 写对了但没加载语言文件、highlightAll() 调太早、或者 CSS 覆盖不全导致颜色出不来——这些细节不逐个验证，高亮就永远是灰的。
