Search code examples
angular5ace-editor

How to highlight each line using ACE Editor in Angular TypeScript?

I use ACE Editor in my Angular5 project.
As you can see I want to validate allow and deny email in the editor.
I want to highlight each line that is duplicated. ACE Editor can be highlighted each line like that? Please see this picture

Solution

  • Use the addMarker to add highlight to the lines you want to show a highlight.

    Range = ace.require('ace/range').Range;
editor.session.addMarker(
    new Range(from, start_pos, to, end_pos), 
    "show-highlight", 
    "fullLine");

    Here start_pos and end_pos are the lines you would like to highlight. Add CSS to the class "show-highlight"

    .show-highlight {
  position:absolute;
  background: yellow; //Specify the color you would like to use
}