如何在HTML页面中用TAB或四个空格保留C代码的缩进格式

问题场景 #

要在HTML页面中嵌入C代码，但直接用<div>包裹时，HTML会自动合并空白字符，导致代码缩进丢失。现有代码及渲染效果如下：

现有HTML代码

<style type="text/css">
    .codebox {
            color: rgb(230, 230, 210);

            width: 700px;
            height: 100%;
            padding-top: 2px;
            padding-left: 5px;
            padding-right: 5px;
            padding-bottom: 2px;

            background-color: rgb(170, 150, 190, 0.37);
            border: 2px solid rgb(170, 150, 190);
            border-radius: 5px;
        }
</style>

<div class="codebox">
    int main(int argc, char **argv)
    {
        size_t x;
        for(x = 0; x < 256; ++x) {
            ...
        }
        return 0;
    }
</div>

实际渲染效果（缩进丢失）

int main(int argc, char **argv)
{
size_t x;
for(x = 0; x < 256; ++x) {
...
}
return 0;
}

解决方案 #

以下两种方法都适合不熟悉前端的开发者，无需复杂操作：

方法1：给.codebox添加CSS属性保留空白

只需在原.codebox的CSS中添加white-space: pre-wrap;，同时修正透明度写法、优化样式，就能保留缩进且自动换行：

.codebox {
    color: rgb(230, 230, 210);
    width: 700px;
    height: 100%;
    padding: 2px 5px; /* 简化padding写法 */
    background-color: rgba(170, 150, 190, 0.37); /* 修正为rgba格式，正确设置透明度 */
    border: 2px solid rgb(170, 150, 190);
    border-radius: 5px;
    white-space: pre-wrap; /* 核心：保留空格/换行，超出宽度自动换行 */
    font-family: monospace; /* 可选：用等宽字体，代码更美观 */
}

HTML结构保持不变，即可渲染出带正确缩进的代码。

方法2：用<pre>+<code>组合并自定义样式

如果担心div的空白处理问题，可改用<pre>标签（天生保留空白），再通过自定义样式覆盖其默认格式：

<style type="text/css">
    .codebox {
        color: rgb(230, 230, 210);
        width: 700px;
        padding: 2px 5px;
        background-color: rgba(170, 150, 190, 0.37);
        border: 2px solid rgb(170, 150, 190);
        border-radius: 5px;
        white-space: pre-wrap;
        font-family: monospace;
        margin: 0; /* 去掉pre默认的外边距 */
    }
</style>

<pre class="codebox"><code>
int main(int argc, char **argv)
{
    size_t x;
    for(x = 0; x < 256; ++x) {
        ...
    }
    return 0;
}
</code></pre>

关键说明 #

• white-space: pre-wrap; 是核心属性：既保留文本中的空格、换行，又能在内容超出容器宽度时自动换行，完美解决缩进丢失和代码溢出问题。
• font-family: monospace; 让代码使用等宽字体，提升阅读体验。
• 原CSS中的rgb(170, 150, 190, 0.37)写法错误，需改为rgba()才能正确设置颜色透明度。

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