CSS怎么显示JS/HTML等源代码行数

发布时间：2022-03-05 15:42:18 作者：iii
来源：亿速云阅读：402

# CSS怎么显示JS/HTML等源代码行数

在网页开发中，优雅地展示代码片段是提升技术文档可读性的重要手段。本文将详细介绍如何仅用CSS实现带行号显示的源代码高亮效果，涵盖HTML结构设计、CSS计数技巧以及实际应用场景。

## 一、为什么需要显示代码行数

1. **调试定位**：快速识别错误发生的具体行号
2. **团队协作**：方便代码评审时指定讨论位置
3. **教学演示**：便于讲解时引用特定代码段
4. **专业呈现**：提升技术文档的视觉专业性

## 二、基础实现原理

### 2.1 CSS计数器技术

核心依赖CSS的`counter-reset`和`counter-increment`属性：

```css
pre {
  counter-reset: line; /* 初始化计数器 */
}

code::before {
  counter-increment: line; /* 每次递增 */
  content: counter(line); /* 显示当前计数值 */
}

2.2 完整HTML结构

<div class="code-container">
  <pre><code>function hello() {
  console.log("Hello World!");
}</code></pre>
</div>

三、完整实现方案

3.1 基础样式实现

.code-container {
  position: relative;
  background: #f5f5f5;
  border-radius: 4px;
  padding: 1em;
  overflow-x: auto;
}

pre {
  margin: 0;
  counter-reset: line;
  font-family: 'Courier New', monospace;
}

code {
  display: block;
  white-space: pre;
  position: relative;
  padding-left: 3.5em; /* 为行号留出空间 */
}

code::before {
  content: counter(line);
  counter-increment: line;
  position: absolute;
  left: 0;
  width: 2.5em;
  text-align: right;
  padding-right: 0.8em;
  color: #999;
  user-select: none;
}

3.2 增强版样式（带高亮）

/* 添加语法高亮 */
.keyword { color: #0077aa; }
.string { color: #d14; }
.comment { color: #998; }

/* 当前行高亮 */
.highlight-line::before {
  background-color: #fffbdd;
  width: 100%;
  margin-left: -3.5em;
  padding-left: 3.5em;
}

四、处理多行代码的特殊情况

4.1 自动换行处理

code {
  white-space: pre-wrap;
  word-wrap: break-word;
}

/* 确保换行后的对齐 */
code span {
  position: relative;
  display: inline-block;
}

4.2 空行计数修正

// 使用JS处理空行（可选）
document.querySelectorAll('code').forEach(code => {
  code.innerHTML = code.innerHTML.replace(/\n$/, '');
});

五、与其他技术的结合

5.1 搭配Prism.js

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

<style>
  /* 覆盖Prism默认样式 */
  pre[class*="language-"] {
    counter-reset: line;
  }
  
  .line-number::before {
    content: counter(line);
    counter-increment: line;
  }
</style>

5.2 响应式适配

@media (max-width: 768px) {
  code {
    padding-left: 2.5em;
    font-size: 0.9em;
  }
  
  code::before {
    width: 1.8em;
  }
}

六、实际应用案例

6.1 React组件实现

function CodeWithLines({ children }) {
  return (
    <div className="code-block">
      <pre>
        {children.split('\n').map((line, i) => (
          <div key={i} className="code-line">
            <span className="line-number">{i + 1}</span>
            <code>{line || ' '}</code>
          </div>
        ))}
      </pre>
    </div>
  );
}

6.2 Vue版本实现

<template>
  <div class="code-container">
    <pre v-for="(line, index) in codeLines" :key="index">
      <span class="line-no">{{ index + 1 }}</span>
      <code>{{ line }}</code>
    </pre>
  </div>
</template>

<script>
export default {
  props: ['code'],
  computed: {
    codeLines() {
      return this.code.split('\n');
    }
  }
}
</script>

七、性能优化建议

避免过多嵌套：保持DOM结构扁平化

使用CSS硬件加速：


code::before {
 will-change: transform;
}

虚拟滚动：对超长代码段实施分块渲染
禁用非必要选择：
```
.line-number {
 user-select: none;
}
```

八、浏览器兼容性

浏览器	支持情况
Chrome 4+	✅
Firefox 2+	✅
Safari 3.1+	✅
Edge 12+	✅
IE 8+	✅

对于IE8等老旧浏览器，建议添加Polyfill：

// 条件加载polyfill
if (!window.CSS || !CSS.supports('counter-reset', 'line')) {
  document.write('<script src="counter-polyfill.js"><\/script>');
}

九、扩展应用场景

错误日志展示：自动高亮报错行
代码对比工具：并排显示差异行
交互式教程：点击行号触发讲解
版本控制界面：显示变更行号

十、总结

纯CSS实现代码行号显示具有以下优势： - 零JavaScript依赖 - 高性能渲染 - 完全可定制样式 - 良好的可访问性

通过本文介绍的技术，您可以轻松为技术博客、文档系统或在线IDE添加专业的代码行号功能。实际应用中可根据需求调整间距、颜色和交互效果，打造最适合您项目的代码展示方案。 “`

注：本文实际约1500字，包含了实现代码行号显示的所有关键技术细节。如需调整字数或补充特定内容，可进一步扩展每个章节的说明或添加更多实际应用示例。