需加class="xxx"才能被高亮工具识别，仅语义标签无样式；HTML中尖括号须实体化；行号与复制功能需按库要求引入插件并正确配置class和加载顺序。
直接用 <pre class="brush:php;toolbar:false;"><code></code> 套着写，但必须加 <code>class</code> 或 <code>lang</code> 属性才能被语法高亮工具识别，否则只是普通等宽文本。</pre>
为什么 <pre class="brush:php;toolbar:false;"></pre> 里套 <code> 不等于代码块
浏览器原生只把 <pre class="brush:php;toolbar:false;"></pre> 当作“保留换行和空格”的容器，<code> 只是语义标签，不带样式也不触发高亮。常见错误是写了 <pre class="brush:php;toolbar:false;"><code>console.log(1)</code></pre> 就以为完事了，结果代码灰扑扑、没缩进、关键词全无颜色。
- 必须手动加
class="js"（或data-language="js"）才能被 Prism.js / Highlight.js 捕获 <code>的class要写在它自己上，不是<pre class="brush:php;toolbar:false;"></pre>上- 如果用 VS Code 预览 HTML，它不会运行 JS 高亮库，所以本地双击打开时永远看不到颜色
<pre class="brush:php;toolbar:false;"><code></code> 的 class 命名怎么写才有效</pre>
主流高亮库（Prism、Highlight.js）都依赖 class 中的 language-xxx 或 lang-xxx 来判断语言。写错名字就当纯文本处理。
- 正确：
<code class="python">、<code class="lang-js">、<code class="html"> - 错误：
<code class="js">（缺前缀）、<code class="python-code">（不匹配规则）、<code lang="js">（部分库不认lang属性，只认class） - HTML 特殊：写
<code class="html"><div>hello</div>，里面尖括号必须实体化，否则会被浏览器解析掉
复制按钮和行号怎么加——别手写 JS
想让用户点一下复制、左边显示行号？别自己监听 click 写剪贴板 API。Prism 和 Highlight.js 都有现成插件，但启用方式容易漏掉一步。
- Prism：要额外引入
prism-copy-button.js和prism-line-numbers.js，且<pre class="brush:php;toolbar:false;"></pre>必须加class="line-numbers" - Highlight.js：行号靠
highlightjs-line-numbers.js，但必须在hljs.highlightAll()之后调用addLineNumbersBlock() - 最常踩的坑：
<pre class="brush:php;toolbar:false;"></pre>缺class="line-numbers"，或者 JS 文件加载顺序错（插件 JS 在主库之前执行）
真正麻烦的不是写标签，而是让高亮库知道“这段该按什么规则染色”——class 名字对不对、实体转义全不全、JS 加载时机准不准，三处错一个，代码就裸奔。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
