TypeScript: Not highlighting custom class / interface types

[JaimeStill]

Using: prismjs@1.14.0

Does not continue to highlight custom class / interface types after they are initially defined.

Example, BigData is not highlighted:

Also, a StackBlitz.

[Golmote]

Hi! Thanks for reporting.
Unfortunately, Prism is not a parser and it has no knowledge regarding the actual meaning of your code. This means it can't recognize whether BigData is a class or anything else when used outside of a few easily identifiable places.

More specifically, in your example, the first occurrence of BigData can easily be matched as a class (or rather an interface in that case) because it immediately follows the interface keyword. But Prism has no easy way to identify it later.

The only thing I can think of would be to use the after-tokenize hook to post-process the tokens and identify classes used elsewhere. That would require some work, but I think it's doable. (See related #1228 (comment))

I don't think this is something we want to handle by default in Prism.

[JaimeStill]

Hi! Thank you for your response and the corresponding information. I'll check it out and see what I can do with it.

I believe, in the cases shown above, that there are a couple standard instances with TypeScript where you can always easily match a custom class name:

1. As a type constraint inside of generic angle brackets

2. Inside of parenthesis following a colon.

[001AJD]

I am trying to highlight this piece of code but prismjs is not highlighting the type of object

products: Observable<Product[]>;

Prismjs should have highlighted <Products[]> but instead prismjs omitted it, this is what I got as output

Any solutions to this?

[RunDevelopment]

@001AJD You have to escape all < in the markup of the <code> element with <.
The browser will interpret <Products[]> as a valid HTML tag. Prism only highlights the text content of <code> elements meaning that it will ignore all HTML tags in <code> elements. You can work around this with Unescaped Markup though (or by simply escaping all < characters).

[001AJD]

@001AJD You have to escape all < in the markup of the <code> element with <.
The browser will interpret <Products[]> as a valid HTML tag. Prism only highlights the text content of <code> elements meaning that it will ignore all HTML tags in <code> elements. You can work around this with Unescaped Markup though (or by simply escaping all < characters).

Thanks!