使用 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';

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

Highlighting JS syntax with ngx-prism

javascript

angular

prismjs