语法高亮显示器不检测新行

Question

我使用此插件突出显示textarea：

http://www.jqueryscript.net/text/jQuery-Based-Text-Highlighter-For-Textarea.html

$('textarea').textareaHighlighter({
  matches: [
   {
      'match': ['hello','dear','this is a test', 'text to match'], // will check for this matches
      'matchClass': 'match'             // on matched text this class will be added
    }
  ]
});

颜色出现，但不是在好的地方，它没有检测到行的结束。

当我激活调试模式时：

$('textarea').textareaHighlighter({
    debug: true,
    matches: [
         {
      'match': ['hello','dear','this is a test', 'text to match'], // will check for this matches
      'matchClass': 'match'             // on matched text this class will be added
    },
        {
            'match': /([\%'])(?:(?=(\\?))\2.)*?\1/g,
            'matchClass': 'tags'
        }
    ]
});

我得到了这个结果：

这是一个演示 https://jsfiddle.net/9at1jgfv/1/

Answer 1

最后在网站搜索一小时后： http://www.jqueryscript.net/demo/jQuery-Based-Text-Highlighter-For-Textarea/

我找到了解决方案，添加了一个类：

    .target {
        overflow: hidden;
        border: 1px solid #ddd;
        border-radius: 3px;
        resize: none;
        white-space: pre-wrap;      <----------------- the magic solution
        background-color: #f9f9f9;
        -webkit-appearance: none;
    }


<textarea class="target" name="message" required="true" style="width:600px; height:470px;">  hello,

  I'm using this is a test.

  thank you dear
</textarea>

我希望这将有助于将来的人。