2021-10-30

How to make a syntax highlighter that highlights symbols

I wanted to make a syntax highlighter that highlights symbols. Look at the example:

function hello(){
  return "hello";
}

I want to highlight all the symbols:

{([</!&|\>])};.,:=+*-@$~_^?%'"

And I made a little one that highlighted strings. When I wanted to make one that highlights symbols I got confused. Now I want to know What topics should I learn to make it? Any example, github repo, tutorial, topic or ...? EDIT: I found the way to do that but I still have problem. My code is the following:

function syntaxue(){
  var codes = document.getElementsByClassName("syntaxue");
  for (var i=0; i < codes.length; i++){
    var data = codes[i].innerHTML;
    data = data.replace(/([^\w\s&;])/g, '<span class="sym">$1</span>');
    data = data.replace(/(&lt;)/g, '<span class="sym">$1</span>');
    data = data.replace(/(&gt;)/g, '<span class="sym">$1</span>');
    data = data.replace(/([\d])/g, '<span class="num">$1</span>');
    codes[i].innerHTML = data;
  }
}

When I want to highlight strings, the code becomes sth else.(Sorry I'm not English) And I was testing HTML markup I saw this:

&lt;html&gt;

Instead of this:

<html>

And the &; symbols were highlighted not their results. Can anyone help me?



from Recent Questions - Stack Overflow https://ift.tt/3mnCnD0
https://ift.tt/eA8V8J

No comments:

Post a Comment