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

HTML 文本区域的行号增强

问题：行号如何显示在左边距元素？

答案：

CodeMirror 简介

社区成员强烈推荐 CodeMirror，这是一个强大的工具，擅长显示线条

实施

CodeMirror 提供轻松集成。通过实现以下代码将其合并到您的项目中：

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

在此示例中：

• lineNumbers 属性启用行编号。
• mode 指定语法Perl 的突出显示。
• 主题将编辑器的外观设置为“Abbott”

演示

在 StackOverflow 沙箱中体验带有行号的 CodeMirror 的全功能演示：

<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 设置造成的。然而，CodeMirror 可以有效地处理这些情况。

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