Question

我有一个textarea，如下面的代码，如何在它的左侧显示行号。

是否有jquery插件？

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

Answer 1

Alan Williamson为jQuery添加了Lined TextArea插件麻省理工学院执照 jQuery 1.3+

Answer 2

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

使用代码行，它具有很强大的功能，如

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

Answer 3

CodePress是WordPress中使用的。

Answer 4

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

唯一的问题是您可能需要创建自己的图像以匹配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

Answer 5

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>

Answer 6

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');

就是这样！

Answer 7

没有人尝试使用HTML5 Canvas对象并在其上绘制行号来做到这一点。所以这是我在几个小时内设法汇集的内容。将画布和文本区域彼此相邻放置，并在画布上绘制数字。

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

确实有一个局限性，我们无法在Paint（）函数中轻松处理“向后包裹”，而无需迭代整个textarea内容并绘制成镜像对象以测量每个行高。也会产生非常复杂的代码。

preview image

Html将行号添加到textarea

7 个答案: