如何向 HTML 文本区域添加行号？

向 HTML Textarea 添加行号：指南

处理 时HTML 中的元素，在文本旁边显示行号对于可读性和编辑准确性来说是一个很有价值的功能。让我们探索此任务的全面解决方案。

CodeMirror

向文本区域添加行号的最推荐工具是 CodeMirror。它是一个流行的开源 JavaScript 库，提供了广泛的文本编辑功能。要使用 CodeMirror，只需包含该库并使用适当的选项实例化它即可。

实时演示

这是一个演示如何使用 CodeMirror 进行行编号的工作演示：

var editor = CodeMirror.fromTextArea(document.getElementById('code'), {
    lineNumbers: true,
    mode: 'text/x-perl',
    theme: 'abbott',
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/perl/perl.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/theme/abbott.min.css">

<textarea>

其他提示

如果您遇到行号与实际行不匹配的问题，可能是您的显示器的每英寸点数(DPI) 设置为高于 100%。 CodeMirror 考虑到了这一点，但其他解决方案可能不会。

结论

CodeMirror 是一种可靠而强大的解决方案，用于向 HTML 中的文本区域添加行号。它提供了一系列自定义选项，并与 HTML 元素无缝集成。

以上是如何向 HTML 文本区域添加行号？的详细内容。更多信息请关注PHP中文网其他相关文章！