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

在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

我认为你已经完成了 -

npm install prismjs -S
npm install @types/prismjs -D

现在你需要将它作为 -

import * as prism from 'prismjs';

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

Answer 3

我想通过使用默认语言之外的其他语言来扩展先前的答案。首先，使用EndModal()安装Prism。

在您的<svg-container id="test-container> <svg-circle radius="2" (clickEvent)="doSomething($event)"></svg-circle> </svg-container>中添加：

npm i prismjs

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

angular.json

有关所有可用语言，请参见here。

最后，将代码突出显示：

"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;

Answer 4

我已经尝试过角棱镜和ng2棱镜而没有成功（但我的可能不好吗？）。

您可能希望添加以在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>

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

4 个答案: