Can anyone help me with highlighting specific keywords in Angular using ace-builds? I've tried but can't seem to get it right. Here's the code snippet from my component:
Check out the code on Stackblitz
import {
AfterViewInit,
Component,
ElementRef,
OnInit,
ViewChild,
} from '@angular/core';
import * as ace from 'ace-builds';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit, AfterViewInit {
@ViewChild('editor') private editor: ElementRef;
constructor() {}
ngAfterViewInit() {
ace.config.set('fontSize', '14px');
const editor = ace.edit(this.editor.nativeElement);
const oop = ace.require('ace/lib/oop');
const TextMode = ace.require('arc/mode/text').Mode;
const TextHighlightRules = ace.require(
'ace/mode/text_highlight_rules'
).TextHighlightRules;
const customHighlightRules = function () {this.$rules = {start: [{regex: /\b(keyword1|keyword2)\b/,token: 'keyword'}]};};
oop.inherits(customHighlightRules, TextHighlightRules);
const Mode = function () { this.HighlightRules = customHighlightRules; };
oop.inherits(Mode, TextMode);
(function () { this.$id = 'ace/mode/custom'; }.call(Mode.prototype));
// Set here
editor.getSession().setMode(new (ace.require('ace/mode/custom').Mode)());
editor.setValue('keyword1 some text keyword2', 1);
}
ngOnInit() {}
}