Mastering the art of integrating PrismJS and its typings effectively in TypeScript and Angular 2

Question

Mastering the art of integrating PrismJS and its typings effectively in TypeScript and Angular 2

I'm putting together a small application using angular-cli and I am trying to integrate PrismJS but facing issues with making it function properly.

Essentially, I've set up a vendor directory where I have placed Prism's scripts and styles, loading them in the index.html.

Additionally, I need to include type definitions to ensure my app compiles correctly:

npm i --save-dev @typings/prismjs

After that, I should be able to call Prism.whatever() anywhere within my code, however, this is not working as expected.

Even my IDE is unable to identify the namespace Prism.

Upon inspecting the content of the definition file (index.d.ts), I noticed that starting from version 1.6, it no longer includes

declare var Prism : PrismJS.Prism;

Instead, there is just an export namespace Prism. This led me to question whether I need to import something since there are no declare statements present.

To address this, I decided to revert to an older version of the definition (1.4.16) which does include

declare var Prism : PrismJS.Prism;

Now, my IDE (webstorm) recognizes Prism. However, when attempting to compile, webpack still throws an error:

Cannot find name 'Prism'

My query is quite straightforward: what am I missing here?

Apologies for the seemingly obvious inquiry.

Thank you!

angular typescript

Answer 1

Answer №1

To integrate prism.js into your Angular project using angular-cli, follow these steps:

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

Next, ensure TypeScript recognizes Prism by adding the declaration:

declare var Prism;

You can then utilize Prism in your component like so:

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

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

Answer 2

To integrate prism.js into your Angular project using angular-cli, follow these steps:

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

Next, ensure TypeScript recognizes Prism by adding the declaration:

declare var Prism;

You can then utilize Prism in your component like so:

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

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

Answer 3

Answer №2

It seems like you've completed the following steps -

npm install prismjs -S
npm install @types/prismjs -D

Next, you'll need to import it in the component as -

import * as prism from 'prismjs';

After that, you can utilize prism.whatEverMethod() which is supported by Prism.js

Answer 4

It seems like you've completed the following steps -

npm install prismjs -S
npm install @types/prismjs -D

Next, you'll need to import it in the component as -

import * as prism from 'prismjs';

After that, you can utilize prism.whatEverMethod() which is supported by Prism.js

Answer 5

Answer №3

To enhance the existing solutions, it's possible to incorporate different languages in addition to the default ones. To start with, you need to set up Prism by running npm i prismjs.

Modify your angular.json file as follows:

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

Incorporate the required languages in your component:

import 'prismjs';
import 'prismjs/components/prism-css';
import 'prismjs/components/prism-javascript';
// ...you can import other languages too

declare var Prism: any;

Check out the list of available languages here.

Lastly, implement the code highlighting feature:

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

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

Incorporate it in your template like this:

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

Answer 6

To enhance the existing solutions, it's possible to incorporate different languages in addition to the default ones. To start with, you need to set up Prism by running npm i prismjs.

Modify your angular.json file as follows:

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

Incorporate the required languages in your component:

import 'prismjs';
import 'prismjs/components/prism-css';
import 'prismjs/components/prism-javascript';
// ...you can import other languages too

declare var Prism: any;

Check out the list of available languages here.

Lastly, implement the code highlighting feature:

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

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

Incorporate it in your template like this:

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

Answer 7

Answer №4

I attempted to use angular-prism and ng2-prism, but unfortunately did not have any success (perhaps it was my mistake?).

If you encounter the "Expression has changed after it was checked." error, consider placing the code inside ngAfterViewInit within a setTimeout function.

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

In terms of displaying correctly in HTML, it is more accurate to do the following:

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

Answer 8

I attempted to use angular-prism and ng2-prism, but unfortunately did not have any success (perhaps it was my mistake?).

If you encounter the "Expression has changed after it was checked." error, consider placing the code inside ngAfterViewInit within a setTimeout function.

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

In terms of displaying correctly in HTML, it is more accurate to do the following:

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

Mastering the art of integrating PrismJS and its typings effectively in TypeScript and Angular 2

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Is there a way to deactivate keyup loopback in Angular 2?

Adjusting the return type based on the relationships defined in a Prisma object

Is it feasible to evaluate a Typescript method parameter decorator at request time in a nodejs+nestjs environment rather than just at build time?

Warning: Unhandled promise rejection detected

Tips for making Angular automatically generate the property in HTML when employing the bind feature

The Exporting menu in AmCharts4 does not include the ability to export in CSV, XLSX, or JSON formats

What is the best way to transform an Observable array containing objects into an Observable that emits the data contained within those objects?

Emphasize x-axis heading in a Highcharts graph

What methods can be used to test included content in Angular?

React Native: Dynamic Rendering based on Conditions

Utilizing a monorepo approach enables the inclusion of all *.d.ts files

Transmit: Forwarding information back to the recipient

Show blob file as a PDF document in a popup or dialog box using HTML and TypeScript

What is the best way to perform an AJAX request in Typescript with JSON data?

I'm struggling to transfer information from my form to TypeScript in Angular

The validation for the email field in Bootstrap, specifically in Angular 5, is not functioning properly for the "Email is Required

Error: The TypeScript aliases defined in tsconfig.json cannot be located

What is the best way to perform unit testing on an Angular component that utilizes the Router?

`It is important to note that in Tailwind CSS, `h-8` does not supersede `h-4

Utilizing Angular to automatically extract keys from nested objects in a response