HTML怎么插入代码块_HTML pre code标签教程【展示】

需加class=”xxx”才能被高亮工具识别，仅语义标签无样式；html中尖括号须实体化；行号与复制功能需按库要求引入插件并正确配置class和加载顺序。

直接用 <pre class="brush:php;toolbar:false;">&lt;code&gt;&lt;/code&gt; 套着写，但必须加 &lt;code&gt;class&lt;/code&gt; 或 &lt;code&gt;lang&lt;/code&gt; 属性才能被语法高亮工具识别，否则只是普通等宽文本。&lt;/strong&gt;&lt;/p&gt; &lt;H3&gt;为什么 &lt;code&gt;&lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;&lt;/code&gt; 里套 &lt;code&gt;&lt;code&gt;&lt;/code&gt; 不等于代码块&lt;/H3&gt; &lt;p&gt;浏览器原生只把 &lt;code&gt;&lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;&lt;/code&gt; 当作“保留换行和空格”的容器，&lt;code&gt;&lt;code&gt;&lt;/code&gt; 只是语义标签，不带样式也不触发高亮。常见错误是写了 &lt;code&gt;&lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;&lt;code&gt;console.log(1)&lt;/code&gt;</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;">&lt;code&gt;&lt;/code&gt; 的 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 加载时机准不准，三处错一个，代码就裸奔。