1

我想在我的网站上显示一些代码并突出显示语法，以便它更具可读性。我基本上想为此使用一些库，所以我找到了这个 ngx-prism。我遵循其文档中的每一步，即：

我运行这两个命令：

  • 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.

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

4

1 回答 1

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';
于 2019-10-22T03:04:11.323 回答