将行号添加到 HTML 文本区域答案

【问题标题】：Adding Line Numbers To HTML Textarea将行号添加到 HTML 文本区域
【发布时间】：2011-01-01 00:13:15
【问题描述】：

我有一个<textarea />，如下面的代码所示。如何在其左侧显示行号？

有 jQuery 插件吗？

<TEXTAREA name="program" id="program" rows="15" cols="65" ></TEXTAREA>

【问题讨论】：

代码是否需要显示在文本区域（即可编辑）中，还是可以格式化为另一个块中的代码？

标签： html textarea

【解决方案1】：

有Lined TextArea ^{（链接不再有效，请参阅mirror）} Alan Williamson 的 jQuery 插件
麻省理工学院许可证
jQuery 1.3+

【讨论】：

这在 IE 中似乎不兼容。
这个插件非常好，但不适用于 textarea 的 "min-width" 和 "max-width" css 属性。如果没有“宽度”而只有“最小宽度”，插件会为包裹的文本区域设置不正确的宽度（大约 16 像素太高），因此浏览器会在文本上方呈现行号。
我添加了一个镜像，其中 zip 文件和演示链接正在工作。搜索“jquery plugin lined textarea”带来了更新的解决方案

【解决方案2】：

你可以试试 Code Mirror，这是一个用于在网页中嵌入代码编辑器的 JavaScript 库。

通过代码行，它具有强大的功能，例如

自动补全
主题
混合语言模式
搜索
合并/差异界面
自定义滚动条等

【讨论】：

【解决方案3】：

这是一个非常简单但有效的技巧。它插入已添加行号的图像。

唯一的问题是您可能需要创建自己的图像以匹配您的 UI 设计。

https://jsfiddle.net/vaakash/5TF5h/

textarea {
    background: url(http://i.imgur.com/2cOaJ.png);
    background-attachment: local;
    background-repeat: no-repeat;
    padding-left: 35px;
    padding-top: 10px;
    border-color:#ccc;
}

致谢：Aakash Chakravarthy

【讨论】：

可以称之为解决方案，尽管我称之为快速修复
此解决方案无法正确滚动。此外，如果一行文本比 textarea 宽，它将换行。这意味着文本将在下一行继续，但行号不会跟上。
这在 Chrome 和 Safari 中可以接受滚动，但在 Firefox 中完全不能滚动，我不知道为什么……
放大/缩小时也无法正确缩放
如果人们想知道，这张图片会上升到数字1500

【解决方案4】：

没有人尝试使用 HTML5 Canvas 对象并在其上绘制行号来做到这一点。所以这就是我在几个小时内设法汇集的东西。将 canvas 和 textarea 并排放置，并在 canvas 上绘制数字。

https://www.w3schools.com/code/tryit.asp?filename=G68VMFWS12UH

确实存在限制，我们无法在 Paint() 函数中轻松处理自动换行，除非迭代整个 textarea 内容并绘制到镜像对象以测量每个行高。也会产生非常复杂的代码。

preview image

【讨论】：

是的，没有在 FireFox 中测试过。但我看不出它为什么不能在 FireFox 中工作的任何理由。到目前为止，它在 IE11、Opera12、Edge、Chrome 和变体、WebKit 和变体以及其他一些支持 W3C Canvas 对象的浏览器中工作。任何解释究竟是什么不工作？感谢您的信息。
在 Firefox 中，我无法添加新行，无论我输入什么都是单行（虽然我点击了“返回”按钮）。
我的头顶认为 Firefox 没有正确处理换行符，尝试 css "white-space: pre;"或其他一些组合。过去我注意到这是浏览器的大问题，它接缝有些人仍然受到同样的影响。
它不能很好地工作，因为在许多行之后，行号与 textarea 行不一致。我试图调整它，但几次尝试后放弃了。一开始我不想要它，但 CodeMirror 是我的解决方案。
不知道你做了什么调整，你用了多少行，或者你用的是什么浏览器。我刚刚在 Chrome 中尝试了一百万行，行对齐工作得很好。注意到只有 chrome 在 100 万行上往往会变慢，测量 paintLineNumbers() 函数，它只需要 0~1 ms，猜测 textarea 控制在 Chrome 中非常慢。

【解决方案5】：

TLDR：使用 CodeMirror

这里有人推荐了CodeMirror，我怎么推荐都不够！但这个答案并没有真正提供任何技术细节。

其他解决方案：我在这里尝试的所有其他方法都存在行号与行不匹配的问题。我相信这是因为我将 DPI（每英寸点数）监控为 120%，而这些解决方案没有考虑到这一点。

那么，你如何使用 CodeMirror？？？ 简单！ Just look at the 21,000 words of the documentation! 我希望不到一两页就能解释你 99% 的问题。

演示一下！

100% 工作演示，它在 StackOverflow 沙箱中完美运行：

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

<script language="javascript" type="text/javascript" src="https://codemirror.net/lib/codemirror.js"></script>
<script language="javascript" type="text/javascript" src="https://codemirror.net/mode/perl/perl.js"></script>

<link rel="stylesheet" type="text/css" href="https://codemirror.net/lib/codemirror.css"></link>
<link rel="stylesheet" type="text/css" href="https://codemirror.net/theme/abbott.css"></link>

<textarea id="code" name="code">
if($cool_variable) {
    doTheCoolThing();     # it's PRETTY cool, imho
}</textarea>

TLDR：如何在页面或更少页面中使用 CodeMirror

第 1 步 - 加载基本核心库

将此添加到您的 <head> 块...

<script language="javascript" type="text/javascript" src="/static/js/codemirror-5.62.0/lib/codemirror.js"></script>
<link rel="stylesheet" type="text/css" href="/static/js/codemirror-5.62.0/lib/codemirror.css"></link>

而且，如果你喜欢额外的括号颜色匹配，也加载这个：

<script language="javascript" type="text/javascript" src="/codemirror-5.62.0/addon/edit/matchbrackets.js"></script>

第 2 步 - 设置语法高亮

查看/codemirror-5.62.0/mode/ 目录，看看哪种语言与您将要编码的语言相匹配。该区域提供广泛的支持。

将此添加到您的 <head> 块...

<script language="javascript" type="text/javascript" src="/static/js/codemirror-5.62.0/mode/perl/perl.js"></script>

第 3 步 - 初始化和显示 CodeMirror

有一些 textarea 可以使用....

<textarea id="code" name="code"></textarea>

在 JS 中初始化并设置您的代码镜像。您需要使用 Mimetype 来表示您要使用的模式，在这种情况下，我表示的是 Perl Mimetype...

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

第 4 步 - 选择主题

选择一些你喜欢的主题，'liquibyte'、'cobalt' 和 'abbott' 都是相当不错的暗模式主题。在定义editor之后运行这个...

editor.setOption('theme', 'cobalt');

就是这样！

【讨论】：

【解决方案6】：

CodePress 是 WordPress 中使用的。

【讨论】：

【解决方案7】：

function generateWithNumber() {
  let inputTexts = document.getElementById("input").value
  let textsByLine = inputTexts.split("\n");
  const listMarkup = makeUL(textsByLine);
  document.getElementById("output").appendChild(listMarkup);
}
function makeUL(array) {
    let list = document.createElement('ol');
    for (let i = 0; i < array.length; i++) {
        let item = document.createElement('li');
        item.appendChild(document.createTextNode(array[i]));
        list.appendChild(item);
    }
    return list;
}
// document.getElementById('foo').appendChild(makeUL(options[0]));

ol {
  counter-reset: list;
}
ol > li {
  list-style: none;
}
ol > li:before {
  content: counter(list) ") ";
  counter-increment: list;
}

<textarea id="input"></textarea>
<button onClick=generateWithNumber() >Generate</button>
<p id="output"></p>

【讨论】：