Выделение синтаксиса JS с помощью ngx-prism

Я хочу отобразить код на своем сайте и выделить синтаксис, чтобы он был более читабельным. Я в основном хотел использовать для этого какую-то библиотеку, поэтому нашел эту призму ngx. Я следил за каждым шагом из его документов, а именно:

Я запускаю обе команды:

Я импортировал PrismModule в свой app.module и добавил его в массив импорта

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

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

Затем в одном из своих компонентов я попытался использовать это:

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

У меня нет ошибок, но выделение не работает .. Похоже, пустой тег <code>:

введите описание изображения здесь

Я строю свой проект с ng serve --aot.

Я что-то делаю не так или эта библиотека не работает? Если это так, то не могли бы вы поделиться мне альтернативой?


javascript angular prismjs
person BT101    schedule 21.10.2019    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вы включили один из файлов CSS темы? Без этого он не будет знать, какой стиль использовать для выделения.

Включите в свой styles.css файл такую ​​строку:

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

Ознакомьтесь с документацией, чтобы увидеть полный список доступных тем (вам нужна только одна):

@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';
person ulmas    schedule 22.10.2019
comment
У меня такая же проблема с JSON. Я также импортировал css в свой global.scss. любая идея, что еще может быть не так. github.com/ngx-prism/core/issues/13 - person Bhavesh; 05.05.2020