应使用 class="xxx" 标注语言类型，因 Prism.js 和 highlight.js 等主流高亮库默认仅通过 class 属性识别语言，data-language 本身不触发高亮，需手动解析调用。
HTML 里怎么给 <pre><code> 标注语言类型
直接用 class 或 data-language 都行，但实际生效的是 class —— 大多数语法高亮库（比如 Prism.js、highlight.js）只认 class="xxx" 这种写法。
常见错误是写成 class="js" 或 data-language="javascript" 却没配对，结果高亮失效。不是所有名字都通用，得看库的文档认什么前缀。
-
class="js"、class="python"是 Prism.js 的标准写法（注意language-前缀不能少） -
class="javascript"和class="lang-js"是 highlight.js 支持的几种变体之一，但优先推荐language-* -
data-language属性本身不触发高亮，只是你自定义用的；如果自己写 JS 解析它，得手动读取并调用高亮函数 - 别写
class="js syntax"这种多类名且没language-前缀的，Prism 会直接跳过
为什么 class 比 data-language 更可靠
因为高亮库启动时默认扫描 <code> 元素的 class，而不是自定义属性。除非你显式配置了 highlight.js 的 languageDetect 或自己写了初始化逻辑，否则 data-language 就是个摆设。
使用场景很明确：你在静态页面里贴代码块，想开箱即用，那就老老实实用 class="xxx"；只有当你需要动态切换语言、或做服务端渲染预处理时，才可能把 data-language 当中间字段用。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- Prism.js 初始化时默认只看
class，不读data-language - highlight.js 的
highlightElement(el)方法也优先从class推断，data-language要靠额外参数传入 - 如果你用的是 VS Code 插件生成 HTML，它输出的也是
class="xxx"，不是data-属性
language-xxx 里的 xxx 有哪些合法值
没有统一标准，每个高亮库维护自己的语言列表，而且大小写、连字符、缩写都可能不同。写错就等于没写 —— 代码块会显示为纯文本，没颜色。
最容易踩的坑是凭感觉写：比如以为 language-vue 一定支持，结果发现 Prism 默认不带 Vue 插件；或者写了 language-bash，但库只认 language-shell。
- Prism 官方支持的语言 ID 列表在
prismjs/components/目录下，文件名就是 ID，比如prism-javascript.min.js对应language-javascript - Vue 单文件组件的
<script>块要用language-js，模板部分用language-html，不能写language-vue（除非你手动加了 vue 插件） - YAML 文件别写
language-yml，Prism 只认language-yaml；JSON 同理，必须是language-json，不是language-js - 不确定时，打开对应语言的 Prism 官网示例页，查看源码里
<code>的 class 是什么
要不要加 data-language？什么时候加
加，但只在你需要 JS 动态控制时加 —— 比如用户点按钮切换代码语言、或者服务端返回的代码块语言是变量，前端要根据 data-language 再调一次 hljs.highlightElement()。
这时候它不是替代 class，而是补充。你仍然得保留 class="xxx" 让初始渲染生效，再用 data-language 存原始值供后续操作。
- 静态页面、构建时确定语言 → 只用
class="xxx"，删掉data-language - 后台 CMS 输出代码块，语言由字段控制 → 保留
data-language="{{ lang }}"，再用 JS 把它同步到class上 - 用了
data-language却忘了初始化高亮函数 → 代码块永远是黑底白字，不会自动变色 - 不要同时写
class="js" data-language="typescript"，语义冲突，高亮库会按 class 执行，TS 代码用 JS 规则高亮会出错
