如何正确使用 PrismJS 及其与 typescript / angular 2 的类型

Question

我正在用angular-cli构建一个小应用程序，我想使用PrismJS，但我无法让它工作。

所以基本上我已经创建了一个vendor文件夹，我将 Prism 的脚本和样式放在其中，并将它们加载到index.html 中。

我还需要安装类型定义才能编译我的应用程序：

npm i --save-dev @typings/prismjs

然后，我只需要在我的代码中的任何地方调用Prism.whatever() ，但这不起作用。

甚至我的 IDE 也无法识别命名空间Prism 。

通过检查定义（ index.d.ts ）的内容，我看到自 1.6 版以来，它不包含

declare var Prism : PrismJS.Prism;

了。 只有一些export namespace Prism 。 所以我想知道我是否必须导入一些东西，因为使用了任何declare 。

从定义文件中导入一些东西对我来说似乎很奇怪。

因为我想跳过这个，我安装了一个旧版本的定义（1.4.16），其中包含

declare var Prism : PrismJS.Prism;

现在，我的 IDE (webstorm) 很高兴！ 它可以识别Prism 。 但是当我尝试编译时，webpack 仍然输出错误：

Cannot find name 'Prism'

所以我的问题很基本：我忘记了什么？

很抱歉这个明显的问题。

谢谢！

Answer 1

在 angular-cli 中像这样添加prism.js：

"scripts": [
   "../node_modules/prismjs/prism.js"
],

之后，你可以让打字稿满意

declare var Prism;

并像那样使用它

<code [innerHtml]="myCode"></code>

ngAfterViewInit() {
   const code = 'var data = 1;';
   this.myCode = Prism.highlight(code, Prism.languages.javascript);
}

Answer 2

我想你已经做到了——

1. npm install prismjs -S
2. npm install @types/prismjs -D

现在你需要将它导入到 n 组件中 -

import * as prism from 'prismjs';

然后使用棱镜js支持的prism.whatEverMethod()

Answer 3

我想扩展以前的答案，使其能够使用除默认语言之外的其他语言。 首先，使用npm i prismjs安装 Prism。

在你的angular.json添加：

"scripts": [
    "../node_modules/prismjs/prism.js"
]

在您的组件中导入必要的语言：

import 'prismjs';
import 'prismjs/components/prism-css';
import 'prismjs/components/prism-javascript';
// ...you can import further languages aswell

declare var Prism: any;

请参阅此处了解所有可用语言。

最后，应用代码高亮：

code: string = 'helloWorld() { console.log("hello world"); }';
languageIdentifier: string = 'typescript';

ngOnInit() {
    this.code = Prism.highlight(this.code, Prism.languages[this.languageIdentifier]);
}

在模板中：

<code [innerHtml]="code"></code>

Answer 4

我已经尝试过 angular-prism 和 ng2-prism 没有成功（但我可能是坏的吗？）。

您可能希望在 setTimeout 中添加 ngAfterViewInit 中的代码，以不触发“表达式在检查后已更改”。 错误。

ngAfterViewInit() {
    setTimeout(() => {
       const code = 'var data = 1;';
       this.myCode = Prism.highlight(code, Prism.languages.javascript);
    }
}

同样在 html 中，如果您希望它正确显示，则更正确：

<pre><code [innerHtml]="myCode" class="language-csharp"></code></pre>