CODEWITHSUNDEEP
javascriptjquerysyntax-highlighting
Mimouni
Mimouni

Reputation: 3640

syntax highlighter doesn't detect new line

I'm using this plugin to highlight 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
    }
  ]
});

the color appear, but not in the good places, it doesn't detect ending of line.

enter image description here

when I activate the debug mode :

$('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'
        }
    ]
});

i get this result : enter image description here

here is a demo https://jsfiddle.net/9at1jgfv/1/

Upvotes: 3

Views: 123

Answers (1)

Mimouni
Mimouni

Reputation: 3640

Finally after one hour of search in the website source : http://www.jqueryscript.net/demo/jQuery-Based-Text-Highlighter-For-Textarea/

I found the solution, by adding a class :

    .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>

and i hope this will help someone in the future.

Upvotes: 2

Related Questions