Hello,
Hope you can help me with this. I created a simple plugin to highlight TypeScript syntax (also useful for ES6)
woltlab.com/pluginstore/file/2591/Currently, I'm treating the template strings (strings inside backticks ` ) as normal quotes but I'd like to treat them differently especially when there are variables or html tags inside:
Built-in JS highlighter
JavaScript
let name = "TypeScript";
let greeting = `Hello, ${name}! Your name has ${name.length} characters`;
console.log(greeting);
// some Angular code...
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `<h1>Hello {{name}}</h1>`
})
export class AppComponent { name = 'Angular'; }
Alles anzeigen
TS highlighter:
WebStorm highlighter:
The class looks like this, I think I have to store the template string in some temporal variable and evaluate it with RegEx but I'm not sure how to do it nor the regular expressions I need to use.
PHP
class TsHighlighter extends Highlighter {
/**
* @inheritDoc
*/
protected $separators = ["(", ")", "{", "}", "[", "]", ";", ".", ","];
/**
* @inheritDoc
*/
protected $operators = ["=", ">", "<", "!", "~", "?", ":", "==", "<=", ">=", "!=",
"&&", "||", "++", "--", "+", "-", "*", "/", "&", "|", "^", "%", "<<", ">>", ">>>", "+=", "-=", "*=",
"/=", "&=", "|=", "^=", "%=", "<<=", ">>=", ">>>="];
protected $quotes = ["'", '"', '`'];
/**
* @inheritDoc
*/
protected function highlightKeywords($string) {
$string = parent::highlightKeywords($string);
$string = preg_replace('!(?<='.$this->separatorsRegEx.')(@[a-z0-9-]+)(?='.$this->separatorsRegEx.')!i', '<span class="hlDecorators">\\0</span>', $string);
return $string;
}
/**
* @inheritDoc
*/
protected $keywords1 = [
"break",
"case",
...
];
/**
* @inheritDoc
*/
protected $keywords2 = [
"implements",
"interface",
"let",
...
];
/**
* @inheritDoc
*/
protected $keywords3 = [
"any",
"Array",
...
];
/**
* @inheritDoc
*/
protected $keywords4 = [
"abstract",
"as",
...
];
protected $keywords5 = [
"RegExp",
"Function",
...
];
}
Alles anzeigen