Prismjs not highlighting typescript code snippets

Question

I was toying around with Prism.js and for some reason, highlighting typescript code is not working as intended. Prism.js couldn't event tokenize the snippet...

Here is a demo within codesandbox

Any help/idea is appreciated.

Answer 1

When imported as a module, Prism by default does not include all languages (otherwise the bundle would be very large). Prism only includes the common/popular/most used languages like HTML, CSS, JavaScript, and even Markdown.

To add TypeScript, you have to import the component like this:

import Prism from "prismjs";
import "prismjs/themes/prism-twilight.css";
import "prismjs/components/prism-typescript";

Codesandbox