css制作存放代码
使用 <pre> 和 <code> 标签
HTML 提供了 <pre> 和 <code> 标签来展示代码片段。<pre> 保留格式（如空格和换行），<code> 语义化标记代码内容。
<pre><code>
.container {
display: flex;
justify-content: center;
}
</code></pre>添加语法高亮
通过第三方库（如 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-css">
.button {
background-color: #3498db;
border-radius: 4px;
}
</code></pre>自定义样式
通过 CSS 调整代码块的字体、背景和边框样式。
pre {
background-color: #f4f4f4;
padding: 16px;
border-radius: 4px;
overflow-x: auto;
}
code {
font-family: "Courier New", monospace;
color: #333;
}响应式处理
确保代码块在小屏幕上可横向滚动，避免内容溢出。
pre {
max-width: 100%;
overflow-x: auto;
}内联代码样式
对行内代码使用 <code> 标签并添加样式。
<p>使用 <code>display: flex;</code> 实现布局。</p>code {
background-color: #f0f0f0;
padding: 2px 4px;
border-radius: 2px;
}
