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

发布时间：2020-12-17 17:33:17 所属栏目：安全来源：网络整理

导读：我正在使用angular-cli构建一个小应用程序,我想使用PrismJS,但我无法使用它. 基本上我已经创建了一个供应商文件夹,我将Prism的脚本和样式放在index.html中. 我还需要安装类型定义才能编译我的应用程序： npm i --save-dev @typings/prismjs 然后,我只需要在

我正在使用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;

了.只有一些导出命名空间Prism.所以我想知道是否必须导入一些东西,因为使用了任何声明.

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

当我想要跨过这个时,我已经安装了包含的定义的旧版本(1.4.16)

declare var Prism : PrismJS.Prism;

现在,我的IDE(webstorm)很高兴！它可以识别棱镜.但是当我尝试编译时,webpack仍会输出错误：

Cannot find name 'Prism'

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

抱歉这个显而易见的问题.

谢谢！

解决方法

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!