HTML中code标签实现彩色代码文本的方法

酷墨同学_4225

发布时间：2026-09-06 06:10:32

440人浏览过

来源于php中文网

原创

code标签本身不支持彩色，需依赖highlight.js或Prism.js等库解析语法并添加class，再通过CSS着色；必须用<pre>结构，且代码内容须HTML实体转义。

html中code标签实现彩色代码文本的方法

code标签本身不支持彩色，必须靠外部库或CSS手动控制

code 标签只是语义标记，浏览器默认只给它等宽字体和基础行高，没有任何颜色逻辑。所谓“彩色代码文本”，本质是给不同语法成分（如关键字、字符串、注释）加 class，再用 CSS 上色。这一步 code 自己完全不参与，得靠 highlight.js 或 Prism.js 这类库完成。

直接写 <code class="color-red">console.log()</code> 只能统一变红，无法区分 console（函数名）和 "log"（字符串）
想让 const 变蓝、"hello" 变绿、// comment 变灰——必须先解析语法结构，再打上对应 class
纯 CSS 无法自动识别语法，除非你手动给每个 token 加 class，不现实

正确结构必须是

，且 language-xxx 类名要写对</H3>
<p>高亮库只扫描 <code><pre><code class="js">...</code></pre></code> 这种结构。漏掉 <code><pre></code>，或者把 class 写成 <code>class="javascript"</code>，<code>highlight.js</code> 就直接跳过。</p>
<ul>
<li>✅ 正确：<code><pre><code class="javascript">const x = 1;</code></pre></code></li>
<li>❌ 错误：<code><code class="javascript">const x = 1;</code></code>（没 <code><pre></code>，不触发解析）</li>
<li>❌ 错误：<code><pre><code class="js">const x = 1;</code></pre></code>（<code>highlight.js</code> 不认缩写，必须 <code>language-js</code>）</li>
<li>⚠️ 注意：Prism.js 对 class 宽松些，<code>class="js"</code> 或 <code>class="js"</code> 都行；但别混用，保持项目统一</li>
</ul>

<H3>原始代码必须 HTML 实体转义，否则 DOM 会错乱</H3>
<p>如果你在 <code><code></code> 里直接写 <code>x < 5 && y > 0</code>，浏览器会把 <code><</code> 当成标签起始，<code>&</code> 当成字符实体前缀，轻则渲染空白，重则脚本执行或结构塌陷。</p><div class="aritcle_card flexRow">
                                                        <div class="artcardd flexRow">
                                                                <a class="aritcle_card_img" href="/xiazai/skill6712" title="Wechat HTML Publisher"><img
                                                                                src="https://img.php.cn/upload/skill/000/000/081/179109368394970.jpg" alt="Wechat HTML Publisher"  onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
                                                                <div class="aritcle_card_info flexColumn">
                                                                        <a href="/xiazai/skill6712" title="Wechat HTML Publisher">Wechat HTML Publisher</a>
                                                                        <p>直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。</p>
                                                                </div>
                                                                <a href="/xiazai/skill6712" title="Wechat HTML Publisher" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
                                                        </div>
                                                </div>
<ul>
<li>必须提前转义：<code><</code> → <code><</code>，<code>></code> → <code>></code>，<code>&</code> → <code>&</code></li>
<li>不要依赖 JS 库自动转义——<code>highlight.js</code> 和 <code>Prism.js</code> 都不干这事，得你来</li>
<li>服务端渲染时用模板引擎（如 EJS、Nunjucks）的 escape 函数；前端动态插入时用 <code>textContent</code> 赋值，或手写转义函数</li>
<li>错误示例：<code><code>if (x < 10) { ... }</code></code> → 渲染后只剩 <code>if (x</code>，后面全丢</li>
</ul>

<H3>自定义颜色要改 CSS，不是改 HTML 结构</H3>
<p>高亮库生成的 HTML 类似这样：<code><code class="js"><span class="token keyword">const</span> <span class="token variable">x</span> = 1;</code></code>。颜色由 CSS 控制，比如：</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<pre class="brush:php;toolbar:false;"><pre class="brush:php;toolbar:false;">.token.keyword { color: #007acc; }
.token.string { color: #a31515; }
.token.comment { color: #008000; }