使用span标签为何得到不符合预期的代码样式效果？

问题描述 #

想要实现的效果：注释行单独拥有深色背景与浅灰色文字，代码行保持正常样式。

实际使用的代码：

<!DOCTYPE html>
<html>
<head>
<style>
span{ background-color: rgb(33, 30, 47);
            color: rgb(147, 149, 152);}
</head>
<body>
<pre>
<code>
<span>// Prints 5 to the console</br>
                console.log(5);
</span>
</code>
</pre>
</body>
</html>

实际得到的效果：整个代码块背景样式统一，同时存在多余缩进、格式混乱的问题。

问题原因 #

1. 样式范围错误：你把注释和代码都包裹在同一个<span>里，导致所有内容都应用了相同的背景与文字样式，无法区分注释和代码。
2. 手动格式破坏了<pre>的默认行为：<pre>标签会自动保留代码里的换行和空白字符，你手动添加的<br>标签、代码行前的大量额外缩进，都会被<pre>原样渲染，直接导致格式混乱。
3. 行内元素的局限性：<span>是行内元素，包裹多行内容时背景会连成一整块，无法实现单条注释行独立背景的效果。

修复方案 #

调整代码结构，让注释单独用<span>包裹，移除手动的<br>和多余缩进，利用<pre>维护代码原生格式：

<!DOCTYPE html>
<html>
<head>
<style>
.comment {
    background-color: rgb(33, 30, 47);
    color: rgb(147, 149, 152);
    display: block; /* 让span变成块级元素，单独占一行 */
}
</style>
</head>
<body>
<pre><code>
<span class="comment">// Prints 5 to the console</span>
console.log(5);
</code></pre>
</body>
</html>

说明：

• 给注释单独的<span>设置类名.comment，仅对注释应用目标样式。
• 移除<br>和多余缩进，让<pre>自动处理换行与缩进逻辑。
• 给.comment添加display: block，让注释行单独占一行，背景仅覆盖注释区域。

内容的提问来源于stack exchange，提问作者santosh shah