textarea 显示行号

要在 textarea 中显示行号，可以使用 CSS 和 JavaScript 实现。以下是一个简单的示例：

HTML 代码：

<textarea id="myTextarea"></textarea>

CSS 代码：

#myTextarea {
  font-family: monospace;
  font-size: 14px;
  line-height: 1.5;
  border: 1px solid #ccc;
  padding: 10px;
  white-space: pre;
}
.line-numbers {
  display: inline-block;
  width: 2em;
  background-color: #f7f7f7;
  color: #999;
  text-align: center;
  user-select: none;
}

JavaScript 代码：

var textarea = document.getElementById('myTextarea');
var lineNumberDiv = document.createElement('div');
lineNumberDiv.className = 'line-numbers';
textarea.parentNode.insertBefore(lineNumberDiv, textarea);
updateLineNumbers();

textarea.addEventListener('input', function() {
  updateLineNumbers();
});

function updateLineNumbers() {
  var lines = textarea.value.split('\n');
  var lineNumbers = '';
  for (var i = 0; i < lines.length; i++) {
    lineNumbers += (i + 1) + '\n';
  }
  lineNumberDiv.textContent = lineNumbers;
}

这段代码会在 textarea 上方创建一个显示行号的 div 元素，通过 JavaScript 实现监听 textarea 输入事件，并动态更新行号。通过 CSS 控制行号的样式和位置。