Подсветка синтаксиса JS с помощью призмы ngx - PullRequest
Новая
       27

Подсветка синтаксиса JS с помощью призмы ngx

0 голосов
/ 22 октября 2019

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

Я выполняю обе команды:

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

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

Я импортировал 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> тег:

enter image description here

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

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

1 Ответ

0 голосов
/ 22 октября 2019

Вы включили один из 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';
...