Highlighting JS syntax with ngx-prism

Question

I want to display some code at my site and highlight syntax so it's more readable. I basically wanted to use some library for that so I found this ngx-prism. I followed every step from its docs which is:

I run both commands:

• npm i --save @ngx-prism/core

• npm i --save @types/prismjs@1.9.0 prismjs@1.9.0

I imported PrismModule to my app.module and added it to imports array

import { PrismModule } from '@ngx-prism/core';

imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    HttpClientModule,
    PrismModule
],

Then in one of my components I tried to use it:

<ngx-prism [language]="'javascript'">
     {{ "var lol = 'wtf'; \n alert(lol) " }}
</ngx-prism>

I don't have any error but highlighting doesn't work.. It looks like bare <code> tag:

I build my project with ng serve --aot .

Am I doing something wrong or this lib is broken? If that's the case then can you share me some alternative?

Answer 1

Have you included one of the theme CSS files? Without that it won't know which style to use to highlight.

In your styles.css file, include a line like so:

@import '~prismjs/themes/prism-solarizedlight.css';

Check the docs for the full list of available themes (you only need one):

@import '~prismjs/themes/prism-coy.css';
@import '~prismjs/themes/prism-dark.css';
@import '~prismjs/themes/prism-funky.css';
@import '~prismjs/themes/prism-okaidia.css';
@import '~prismjs/themes/prism-solarizedlight.css';
@import '~prismjs/themes/prism-tomorrow.css';
@import '~prismjs/themes/prism-twilight.css';
@import '~prismjs/themes/prism.css';