I am attempting to create custom highlighter rules by referencing examples from here and here.
import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import * as ace from 'ace-builds';
import 'ace-builds/src-noconflict/mode-javascript';
import 'ace-builds/src-noconflict/theme-github';
import 'ace-builds/src-noconflict/ext-language_tools';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
@ViewChild('codeEditor') codeEditorElmRef: ElementRef;
private codeEditor: any;
constructor() { }
ngOnInit() {
var oop = ace.require('ace/lib/oop');
var textHighlightRules = ace.require('ace/mode/text_highlight_rules').TextHighlightRules;
const $rules = {
start: [
{
regex: /sometext/,
token: "keyword"
},
{
regex: /othertext/,
token: "keyword"
}
]
};
const customHighlightRules = function CustomHighlightRules() {
this.$rules = $rules;
};
oop.inherits(customHighlightRules, textHighlightRules);
//exports.MyNewHighlightRules = customHighlightRules; //??
const element = this.codeEditorElmRef.nativeElement;
const options = {
minLines: 14,
maxLines: Infinity,
highlightSelectedWord: true,
enableBasicAutocompletion: true,
enableSnippets: true,
enableLiveAutocompletion: true
};
this.codeEditor = ace.edit(element, options);
this.codeEditor.setTheme('ace/theme/github');
this.codeEditor.getSession().setMode('ace/mode/text');
this.codeEditor.setShowFoldWidgets(true);
}
}
I want to highlight the keyword "sometext". How can I adapt this example for use with Angular and TypeScript? I have been unable to find any functional examples demonstrating integration with Angular.