Layui如何利用code组件展示代码片段并实现语法高亮-Layui教程-PHP中文网

layui的code组件不自带语法高亮，需手动引入highlight.js并严格匹配lay-code语言标识（如javascript而非js），且必须在layui.code()执行后再调用hljs.highlightAll()。

layui 的 `code` 组件不自带语法高亮

layui 官方的 code 组件只是个带预设样式的 <pre class="brush:php;toolbar:false;"><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 文件里