prism.js 默认不识别 data-language 属性，需加载 prism-data-attributes 插件才能生效；插件会自动将 data-language="json" 转为 class="json" 并触发高亮，且优先级高于 class 中的语言声明。
Prism.js 的 data-language 属性根本不起作用？
它确实不起作用——因为 Prism.js 默认压根不读这个属性。Prism 识别语言靠的是 class="xxx"（比如 class="js"），不是 data-language。如果你只写了 data-language="python" 而没配 class，代码块就按纯文本渲染，高亮完全失效。
怎么让 data-language 真正生效
必须手动启用 Prism 的「data-* 属性支持」插件：prism-data-attributes。这个插件会监听 data-language、data-toolbar 等属性，并自动补全对应 class 或行为。
- 确保加载了插件文件：
prism-data-attributes.min.js（需在prism.js之后加载） - HTML 中可直接写：
<pre class="brush:php;toolbar:false;"><code data-language="json">{"ok": true}</code> - 插件会自动给
code元素加上class="json"，触发高亮 - 注意：插件也支持
data-tag（用于自定义标签名）、data-diff（diff 高亮）等，但核心是先配好data-language
data-language 和 class="xxx" 能共存吗
能，但有优先级：插件默认以 data-language 为准，会覆盖 class 中的语言声明。不过这容易引发混淆，建议统一用一种方式。
- 如果用了插件，就别再写
class="js"，只留data-language="js" - 如果不用插件，必须写
class="py"（注意 Prism 使用的短名：py 不是 python，ts 不是 typescript） - 常见短名对照：
js、py、sh、json、html、css、bash—— 全部小写，无空格 - 错误示例：
data-language="JavaScript"→ 不识别；data-language="Python"→ 不识别
为什么推荐用 data-language 而不是 class
主要为解耦和动态场景服务，不是为了“更高级”。比如 CMS 输出 HTML 时，模板可能无法自由拼接 class 字符串，但能安全注入 data 属性；或者 JS 动态插入代码块时，用 el.dataset.language = 'rust' 比操作 classList 更干净。
- 静态页面、手写 HTML：用
class="xxx"最简单，不依赖插件 - 需要运行时切换语言、或集成到富文本编辑器中：插件 +
data-language是合理选择 - 插件本身很小（约 1.5KB gzip），但多一个 HTTP 请求或 bundle 体积，得权衡是否值得
实际最常被忽略的一点：插件必须在 Prism 主库初始化之后加载，否则 Prism.plugins 还不存在，插件会静默失败，控制台也不报错。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
