html中的textarea 显示行号

HTML中的`<textarea>`元素通常用于创建多行文本输入字段，但它本身并不支持内置的行号显示。如果你想在textarea中添加行号，这通常是通过JavaScript或者CSS结合使用来实现的。以下是一个简单的实现方法：

1. 使用JavaScript:
JavaScript可以动态地为textarea添加行号，例如，你可以使用`oninput`事件监听文本框内容的变化，然后更新行号。

<textarea id="text-with-line-numbers" oninput="updateLineNumber(this)"></textarea>
<script>
function updateLineNumber(textarea) {
    var lines = textarea.value.split("\n");
    var lineNumbers = lines.map((line, index) => `${index + 1}. ${line}`);
    textarea.insertAdjacentHTML('beforeend', lineNumbers.join('\n'));
}
</script>

2. 使用CSS:
另一种方法是使用伪元素和计数器，通过CSS来样式化textarea的每一行前面的行号，但这不会自动更新，需要手动操作或定期刷新。

textarea {
    counter-reset: linenumber;
    display: block;
    padding-left: 3em; /* 增加足够的空间来显示行号 */
}

textarea::before {
    content: counter(linenumber);
    counter-increment: linenumber;
    margin-right: 0.5em;
    display: inline-block;
    width: 1.5em;
    text-align: right;
}