css制作存放代码

使用 <pre> 和 <code> 标签

在 HTML 中，<pre> 标签用于保留文本的格式（包括空格和换行），<code> 标签用于标记代码片段。结合两者可以更好地展示代码。

<pre><code>
  function helloWorld() {
    console.log("Hello, World!");
  }
</code></pre>

通过 CSS 美化代码块

为代码块添加背景色、边框和字体样式，提升可读性。

pre {
  background-color: #f4f4f4;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 10px;
  overflow-x: auto;
}

code {
  font-family: "Courier New", monospace;
  color: #333;
}

语法高亮支持

使用第三方库（如 Prism.js 或 Highlight.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-javascript">
  const greet = () => "Hello, World!";
</code></pre>

响应式代码容器

确保代码块在移动设备上可横向滚动，避免内容溢出。

pre {
  max-width: 100%;
  overflow-x: auto;
  white-space: pre-wrap;
  word-wrap: break-word;
}

自定义滚动条样式

为代码块的滚动条添加样式（仅支持 WebKit 浏览器）。

pre::-webkit-scrollbar {
  height: 8px;
}

pre::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}