代码显示标签(code)

代码显示在网页开发中很常见，无论是展示示例还是文档说明，都需要清晰地呈现代码块。HTML提供了多种方式来实现这一需求，从简单的内联代码到复杂的语法高亮。

内联代码显示

使用<code>标签可以标记内联代码片段，通常与文本混排。浏览器默认会以等宽字体显示：

<p>在HTML中，使用<code>&lt;div&gt;</code>标签创建容器。</p>

效果显示为：在HTML中，使用<div>标签创建容器。

多行代码块

对于多行代码，<pre>标签保留所有空白字符和换行，常与<code>组合使用：

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

语法高亮实现

纯HTML无法实现语法高亮，需要借助CSS或JavaScript库。以下是使用Prism.js的示例：

<link href="prism.css" rel="stylesheet" />
<script src="prism.js"></script>

<pre><code class="language-javascript">
// 箭头函数示例
const sum = (a, b) => a + b;
console.log(sum(2, 3)); // 输出5
</code></pre>

自定义代码样式

通过CSS可以自定义代码显示效果：

code {
  background: #f4f4f4;
  padding: 0.2em 0.4em;
  border-radius: 3px;
  font-family: 'Courier New', monospace;
}

pre {
  background: #282c34;
  color: #abb2bf;
  padding: 1em;
  overflow: auto;
  border-radius: 5px;
}

pre code {
  background: transparent;
  padding: 0;
}

响应式代码容器

确保代码块在不同设备上可读：

<div class="code-container">
  <pre><code>
@media (max-width: 768px) {
  pre {
    font-size: 14px;
    white-space: pre-wrap;
  }
}
  </code></pre>
</div>

代码复制功能

添加一键复制按钮提升用户体验：

<div class="code-wrapper">
  <button class="copy-btn">复制</button>
  <pre><code id="copy-code">
const data = {
  id: 1,
  value: "示例文本"
};
  </code></pre>
</div>

<script>
document.querySelector('.copy-btn').addEventListener('click', () => {
  const code = document.getElementById('copy-code').textContent;
  navigator.clipboard.writeText(code);
});
</script>

代码注释展示

区分代码和注释的显示样式：

<pre><code class="language-css">
/* 主容器样式 */
.container {
  width: 100%;  /* 响应式宽度 */
  margin: 0 auto;
}

.button {
  color: #fff;  /* 白色文字 */
  background: #0066cc;  /* 蓝色背景 */
}
</code></pre>

行号显示

通过CSS计数器添加行号：

<style>
.line-numbers {
  counter-reset: line;
}

.line-numbers code {
  display: block;
}

.line-numbers span {
  display: block;
  line-height: 1.5;
}

.line-numbers span:before {
  counter-increment: line;
  content: counter(line);
  display: inline-block;
  width: 2em;
  padding-right: 1em;
  margin-right: 1em;
  color: #999;
  text-align: right;
  border-right: 1px solid #ddd;
}
</style>

<div class="line-numbers">
<pre><code>
<span>function factorial(n) {</span>
<span>  if (n <= 1) return 1;</span>
<span>  return n * factorial(n - 1);</span>
<span>}</span>
</code></pre>
</div>

代码折叠功能

实现可折叠的代码区块：

<details>
  <summary>查看解决方案代码</summary>
  <pre><code>
  // 斐波那契数列实现
  function fibonacci(n) {
    if (n <= 1) return n;
    return fibonacci(n - 1) + fibonacci(n - 2);
  }
  </code></pre>
</details>

终端样式代码

模拟命令行终端的显示效果：

<div class="terminal">
  <div class="terminal-header">
    <span class="dot red"></span>
    <span class="dot yellow"></span>
    <span class="dot green"></span>
    <span class="title">bash</span>
  </div>
  <pre class="terminal-body"><code>
$ npm install package-name
+ package-name@1.0.0
added 1 package in 0.5s
  </code></pre>
</div>

<style>
.terminal {
  background: #1e1e1e;
  border-radius: 5px;
  overflow: hidden;
}
.terminal-header {
  padding: 0.5em;
  background: #333;
  display: flex;
  align-items: center;
}
.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-right: 6px;
}
.red { background: #ff5f56; }
.yellow { background: #ffbd2e; }
.green { background: #27c93f; }
.title {
  color: #aaa;
  margin-left: 1em;
  font-size: 0.8em;
}
.terminal-body {
  color: #f0f0f0;
  margin: 0;
  padding: 1em;
}
</style>

代码差异对比

展示代码修改前后的差异：

<pre><code>
<span style="color:green">+ // 新增的代码行</span>
<span style="color:red">- // 删除的代码行</span>
<span>  // 未修改的代码行</span>
<span style="color:blue">! // 修改的代码行</span>
</code></pre>

交互式代码示例

创建可编辑运行的代码块：

<div class="live-code">
  <div class="editor">
    <h3>HTML</h3>
    <textarea id="html-code" rows="5">
<div id="output">点击按钮改变我</div>
<button onclick="changeText()">点击</button>
    </textarea>
    
    <h3>JavaScript</h3>
    <textarea id="js-code" rows="3">
function changeText() {
  document.getElementById('output').textContent = '文本已改变!';
}
    </textarea>
  </div>
  
  <button class="run-btn">运行代码</button>
  
  <div class="result">
    <h3>结果</h3>
    <iframe id="result-frame"></iframe>
  </div>
</div>

<script>
document.querySelector('.run-btn').addEventListener('click', () => {
  const html = document.getElementById('html-code').value;
  const js = document.getElementById('js-code').value;
  const iframe = document.getElementById('result-frame');
  const doc = iframe.contentDocument || iframe.contentWindow.document;
  
  doc.open();
  doc.write(`
    <!DOCTYPE html>
    <html>
    <head><title>Live Code</title></head>
    <body>${html}<script>${js}</script></body>
    </html>
  `);
  doc.close();
});
</script>