1- 介绍

在 HTML 中展示代码时，保持代码的原始格式非常重要，但默认情况下 HTML 会忽略多余的空格和换行（即空白折叠现象）。本教程将指导您如何正确显示代码格式，避免此类问题。

2- 问题演示

• HTML 的空白折叠：

  <p>
       这里我写了一段Python代码
      def hello():
          print("Hello, World!")
  </p>
  

  浏览器中实际显示为：

  这里我写了一段Python代码def hello(): print("Hello, World!")
  

  问题分析：默认情况下，HTML 会忽略标签中的多余空白字符，导致代码格式丢失。

3- 使用 <pre> 元素

• <pre> 的功能：
  <pre> 用于展示预格式化的文本，浏览器会保留空格和换行。

  示例：

  <pre>
      这里我写了一段Python代码
          def hello():
              print("Hello, World!")
  </pre>
  

  显示效果：

  这里我写了一段Python代码
      def hello():
          print("Hello, World!")
  

4- 自定义 <pre> 样式

• 浏览器默认样式：
  <pre> 的默认样式是通过 CSS 的 white-space: pre 属性实现的：

  pre {
      white-space: pre;
  }
  

• 自定义样式：
  您可以通过 CSS 调整 <pre> 元素的外观：

  pre {
      font-family: "Courier New", monospace;
      font-size: 14px;
      margin: 10px;
      padding: 10px;
      background-color: #f4f4f4;
      border: 1px solid #ccc;
      border-radius: 5px;
  }
  

5- 使用 <code> 元素增强语意化

• <code> 的作用：
  <code> 表示代码片段，具有明确的语义，有助于 SEO 优化和代码可读性。

• 单独使用 <code>：

  <code>print("Hello, World!")</code>
  

• 与 <pre> 结合使用：

  <pre><code>
  def hello():
      print("Hello, World!")
  </code></pre>
  

• 为 <code> 添加样式：

  code {
      white-space: pre;
      background-color: #f9f9f9;
      padding: 2px 4px;
      border-radius: 4px;
  }
  

6- 处理长代码段

如果代码段较长，可以使用 CSS 为 <pre> 添加滚动条：

pre {
    overflow-x: auto;
    max-width: 100%;
}

示例：

<pre>
def long_function():
    print("This is a very long code example to demonstrate how horizontal scrolling works.")
</pre>

7- 使用语法高亮

为了进一步提升代码的可读性，您可以使用语法高亮库，例如 Highlight.js 或 Prism.js：

• 引入 Highlight.js：

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/default.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
  <script>hljs.highlightAll();</script>
  

• 代码示例：

  <pre><code class="language-python">
  def hello():
      print("Hello, World!")
  </code></pre>
  

  显示效果：代码将根据指定语言自动高亮。

8- 总结与注意事项

• 总结：

  • 使用 <pre> 保留代码的格式，结合 <code> 增强语意化。
  • 配合 CSS 调整样式，让代码显示更加美观。
  • 使用语法高亮工具提升代码的可读性。

• 注意事项：

  • 兼容性：大多数现代浏览器支持 <pre> 和 <code> 的语法，但应测试您的页面是否在目标浏览器中显示正常。
  • 长代码段：使用滚动条或分页展示，避免用户体验受影响。
  • 语法高亮：如果需要多语言支持，确保加载正确的语言包。

通过这些技巧，您可以在 HTML 中更专业地展示代码内容，提升用户体验。