如何正确使用PrismJS及其打字与打字稿/角度2

Question

我正在使用angular-cli构建一个小应用程序,我想使用PrismJS,但我无法使用它.

基本上我已经创建了一个供应商文件夹,我将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

我想你已经做到了——

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

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

import * as prism from 'prismjs';

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

Answer 2

在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);
}