如何在HTML中实现类似开发者网站的代码展示效果？

嘿，我来给你拆解下怎么搞定这个事儿！其实StackOverflow那种清爽专业的代码展示效果，核心就是HTML语义化结构+定制化CSS样式，再配合可选的语法高亮工具，分几步就能轻松实现：

一、基础HTML结构：用<pre><code>组合 #

StackOverflow的代码块底层就是用这两个标签嵌套的，原因很实在：

• <pre>标签会严格保留代码里的换行、空格和缩进，不会像普通文本那样把多个空格合并成一个，完美还原代码的原始格式；
• <code>是语义化标签，明确告诉浏览器“这是一段代码”，方便后续的样式调整和脚本处理。

基础示例：

<pre><code>function calculateSum(numbers) {
  let total = 0;
  for (const num of numbers) {
    total += num;
  }
  return total;
}

console.log(calculateSum([1,2,3])); // 输出6
</code></pre>

二、核心CSS美化：还原StackOverflow的视觉风格 #

光有结构还不够，得用CSS调整细节，让它看起来和StackOverflow一样舒服。下面是一套接近官方风格的CSS代码，你可以直接用或者按需修改：

/* 代码块容器样式 */
pre {
  background-color: #f6f8fa; /* 浅灰背景，和StackOverflow一致 */
  border-radius: 6px; /* 圆角设计，避免生硬 */
  padding: 16px; /* 内边距，让代码和边框保持合适距离 */
  overflow-x: auto; /* 代码过长时横向滚动，不会撑破容器 */
  margin: 16px 0; /* 上下外边距，和周围内容明确区分 */
}

/* 代码文本样式 */
pre code {
  font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace; /* 等宽字体，代码更清晰易读 */
  font-size: 14px; /* 合适的字号，兼顾可读性和紧凑感 */
  line-height: 1.45; /* 行高，避免代码过于拥挤 */
  color: #24292e; /* 深灰色文字，护眼又清晰 */
  word-wrap: normal; /* 禁止自动换行，保持代码结构完整性 */
  white-space: pre; /* 严格保留原始空格和换行 */
}

三、进阶：实现语法高亮（彩色代码效果） #

如果想要像StackOverflow那样，不同语言的代码有彩色高亮，就得用专门的语法高亮库，比如Prism.js或者highlight.js，这里以Prism.js为例讲下本地实现步骤（完全不用外链）：

1. 去Prism.js官网下载对应语言的JS和CSS文件（比如你需要JavaScript、Python的高亮，就勾选对应的选项）；
2. 把下载的prism.css和prism.js放到你的项目目录里；
3. 在HTML页面里引入这两个文件（CSS放<head>里，JS放<body>末尾）；
4. 给你的<code>标签加上对应语言的类名，比如<code class="language-javascript">；
5. 页面加载后，Prism会自动识别代码并添加高亮样式。

示例代码：

<head>
  <link rel="stylesheet" href="./prism.css">
</head>
<body>
  <pre><code class="language-javascript">function calculateSum(numbers) {
    let total = 0;
    for (const num of numbers) {
        total += num;
    }
    return total;
}
console.log(calculateSum([1,2,3])); // 输出6
</code></pre>
  <script src="./prism.js"></script>
</body>

四、Markdown场景的适配 #

如果你是用Markdown编辑器（比如StackOverflow的自带编辑器），其实不用手动写<pre><code>，直接用三个反引号```包裹代码就行，编辑器会自动转成对应的HTML结构：

```javascript
function calculateSum(numbers) {
  let total = 0;
  for (const num of numbers) {
    total += num;
  }
  return total;
}

之后再套上面的CSS样式，就能得到和StackOverflow一模一样的展示效果啦！

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