How to correctly use PrismJS and its typings with typescript / angular 2

Question

I'm building a little app with angular-cli and I would like to use PrismJS but I can't get it work.

So basically I've created a vendor folder where I put my Prism's scripts and styles and load them in the index.html .

I also need to install type definitions in order to be able to compile my app :

npm i --save-dev @typings/prismjs

Then, I just have to call Prism.whatever() anywhere in my code but this doesn't work.

Even my IDE doesn't recognize the namespace Prism .

By checking the content of the definition ( index.d.ts ) I've seen that since version 1.6, it doesn't contain

declare var Prism : PrismJS.Prism;

anymore. There is just some export namespace Prism . So I was wondering if I have to import something since any declare is used.

It seems weird to me to import something from a definition file.

As I wanted to step over this, I've installed an older version of the definition (1.4.16) which contains

declare var Prism : PrismJS.Prism;

Now, my IDE (webstorm) is happy! It can recognize Prism . But when I try to compile, webpack still outputs an error:

Cannot find name 'Prism'

So my question is pretty basic: what have I forgotten?

Sorry for this obvious question.

Thanks!

Answer 1

in angular-cli add prism.js like that:

"scripts": [
   "../node_modules/prismjs/prism.js"
],

after that, you can make typescript happy with

declare var Prism;

and use it like that

<code [innerHtml]="myCode"></code>

ngAfterViewInit() {
   const code = 'var data = 1;';
   this.myCode = Prism.highlight(code, Prism.languages.javascript);
}

Answer 2

I think you have done -

1. npm install prismjs -S
2. npm install @types/prismjs -D

now you need to import it ithe n component as -

import * as prism from 'prismjs';

and then use prism.whatEverMethod() which prism js supports

Answer 3

I would like to extend the previous answers with the ability to use other languages besides the default ones. At first, install Prism with npm i prismjs .

In your angular.json add:

"scripts": [
    "../node_modules/prismjs/prism.js"
]

In your component import the necessary languages:

import 'prismjs';
import 'prismjs/components/prism-css';
import 'prismjs/components/prism-javascript';
// ...you can import further languages aswell

declare var Prism: any;

See here for all available languages.

Finally, apply the code highlighting:

code: string = 'helloWorld() { console.log("hello world"); }';
languageIdentifier: string = 'typescript';

ngOnInit() {
    this.code = Prism.highlight(this.code, Prism.languages[this.languageIdentifier]);
}

in the template:

<code [innerHtml]="code"></code>

Answer 4

I've tried angular-prism and ng2-prism without success (but was my bad maybe?).

You might want to add to add the code inside ngAfterViewInit inside a setTimeout to not trigger the "Expression has changed after it was checked." error.

ngAfterViewInit() {
    setTimeout(() => {
       const code = 'var data = 1;';
       this.myCode = Prism.highlight(code, Prism.languages.javascript);
    }
}

also in html this is more correct if you wnt it to be displayed correctly:

<pre><code [innerHtml]="myCode" class="language-csharp"></code></pre>