如何使每行都是不同颜色的html文本输入

Question

我正在创建一个接受用户输入并提高可读性的Web工具，我想将每行（在\ n之后）更改为不同的颜色。

我目前在文本区域中有用户输入。我对这样的前端工作非常陌生，所以我不确定从哪里开始。我曾想过要使用下面的JavaScript，将其用于输出以按每行划分文本，但是我看不到如何对用户输入起作用。

 var lines = $("#binding-text").val().split("\n");
 for(var i = 0;i < lines.length;i++)
 {
    //code here using lines[i] which will give you each line

 }

理想情况下，随着用户键入，我将让每行键入的输入跟随新的行更改颜色。例如：

“ a \ n”（将显示为蓝色） “ ab \ n”（将显示为红色） “ cd \ n”（将显示为绿色）

Answer 1

您是否考虑过使用CSS渐变来重复条纹？注意，我将line-height设置为与条纹高度相同。

.horizontal-stripes {
  border: solid 1px red;
  background: repeating-linear-gradient( 180deg, #fff, #fff 20px, #ccc 20px, #ccc 40px);
  height: 200px;
  width: 15em;
}

textarea {
  min-height: 10em;
  width: 15em;
  line-height: 20px;
}

<textarea class="horizontal-stripes"></textarea>