javascript - 使用 ngx-prism 高亮显示 JS 语法

Question

我想在我的站点上显示一些代码并突出显示语法以使其更具可读性。我基本上想为此使用一些库，所以我找到了这个 ngx-prism。我遵循了 its docs 中的每一步这是:

我运行两个命令:

• 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>标签:

我用 ng serve --aot 构建我的项目.

是我做错了什么还是这个库坏了？如果是这样的话，你能给我一些替代方案吗？

Answer 1

您是否包含其中一个主题 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';