如何在可编辑模式下为文本区域中的每一行加上数字前缀

I googled this for a while now and had no luck finding something reasonable, and what I'm trying to achieve is something similar to this:

我用谷歌搜索了一段时间，发现了一些合理的东西，但运气不佳，我想要实现的是类似的东西:

Just to note that the technologies I'm working with are angular, html 5 and css 3. I did find some jquery library/plugin but I was wondering if there is a way i could do this with the technology stack I'm working with and avoid jquery.

我所使用的技术是角的，html 5和css 3。我确实找到了一些jquery库/插件，但我想知道是否有一种方法可以使用我正在使用的技术堆栈来实现这一点，并避免使用jquery。

2 个解决方案

#1

You can use a library like ace

你可以使用像ace这样的图书馆

Demo:

演示:

var editor = ace.edit("editor");
editor.setTheme("ace/theme/monokai");
editor.getSession().setMode("ace/mode/javascript");

#editor { 
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.2/ace.js"></script>

<div id="editor">function foo(items) {
    var x = "All this is syntax highlighted";
    return x;
}</div>

#2

After googling for while, I managed to find a library called Behave.js, a lightweight library for adding IDE style behaviors to plain text areas, making it much more enjoyable to write code in. I've put a plunker to see it in action.

在搜索了一段时间后，我找到了一个名为“行为”的库。js是一个轻量级的库，用于向纯文本区域添加IDE样式行为，使编写代码变得更有趣。我已经把它放在了行动中。

plunker

砰砰作响

#1