blocks|key|1747741|text|在角-cli中添加像这样的prism.js：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1747742|"scripts":+[
+++"../node_modules/prismjs/prism.js"
],|code-block|syntax|javascript|1747743|在那之后，你可以让打字本满意|1747744|declare+var+Prism;|1747745|然后像那样使用它|1747746|<code+[innerHtml]="myCode"></code>

ngAfterViewInit()+{
+++const+code+=+'var+data+=+1;';
+++this.myCode+=+Prism.highlight(code,+Prism.languages.javascript);
}|1747747|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|U|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

in angular-cli add prism.js like that:

<pre><code>"scripts": [
 "../node_modules/prismjs/prism.js"
],
</code></pre>

after that, you can make typescript happy with 

<pre><code>declare var Prism;
</code></pre>

and use it like that

<pre><code>&lt;code [innerHtml]="myCode"&gt;&lt;/code&gt;

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

blocks|key|1747754|text|我觉得你做了-|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1747755|npm+install+prismjs+-S|ordered-list-item|offset|length|style|CODE|1747756|npm+install+@types/prismjs+-D|1747757|现在您需要将它导入n个组件，作为-|1747758|import+*+as+prism+from+'prismjs';|code-block|syntax|javascript|1747759|然后使用棱镜js支持的prism.whatEverMethod()。|1747760|entityMap^0|0|0|M|0|0|T|0|0|0|B|M|0^^$0|@$1|2|3|4|5|6|7|V|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|W|8|@$E|X|F|Y|G|H]]|9|@]|A|$]]|$1|I|3|J|5|D|7|Z|8|@$E|10|F|11|G|H]]|9|@]|A|$]]|$1|K|3|L|5|6|7|12|8|@]|9|@]|A|$]]|$1|M|3|N|5|O|7|13|8|@]|9|@]|A|$P|Q]]|$1|R|3|S|5|6|7|14|8|@$E|15|F|16|G|H]]|9|@]|A|$]]|$1|T|3|-4|5|6|7|17|8|@]|9|@]|A|$]]]|U|$]]

I think you have done - 

<ol>
<li><code>npm install prismjs -S</code></li>
<li><code>npm install @types/prismjs -D</code></li>
</ol>

now you need to import it ithe n component as -

<pre><code>import * as prism from 'prismjs';
</code></pre>

and then use <code>prism.whatEverMethod()</code> which prism js supports

blocks|key|451152|text|我尝试过棱镜和NG2棱镜，但都没有成功(但我的缺点可能是吗？)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|451153|您可能需要添加在ngAfterViewInit中添加setTimeout中的代码，以避免触发“表达式检查后发生了更改”。错误。|451154|ngAfterViewInit()+{
++++setTimeout(()+=>+{
+++++++const+code+=+'var+data+=+1;';
+++++++this.myCode+=+Prism.highlight(code,+Prism.languages.javascript);
++++}
}|code-block|syntax|javascript|451155|同样，在html中，如果您要正确地显示它，则这是更正确的：|451156|<pre><code+[innerHtml]="myCode"+class="language-csharp"></code></pre>|451157|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

I've tried angular-prism and ng2-prism without success (but was my bad maybe?).

You might want to add to add the code inside ngAfterViewInit inside a setTimeout to not trigger the "Expression has changed after it was checked." error.

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

also in html this is more correct if you wnt it to be displayed correctly:

<pre><code>&lt;pre&gt;&lt;code [innerHtml]="myCode" class="language-csharp"&gt;&lt;/code&gt;&lt;/pre&gt;
</code></pre>

blocks|key|1793892|text|我想扩展以前的答案，除了默认的语言之外，我还可以使用其他语言。首先，用npm+i+prismjs安装棱镜。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1793893|在您的angular.json中添加：|1793894|"scripts":+[
++++"../node_modules/prismjs/prism.js"
]|code-block|syntax|javascript|1793895|在组件中导入必要的语言：|1793896|import+'prismjs';
import+'prismjs/components/prism-css';
import+'prismjs/components/prism-javascript';
//+...you+can+import+further+languages+aswell

declare+var+Prism:+any;|1793897|有关所有可用语言，请参见这里。|1793898|最后，应用突出显示的代码：|1793899|code:+string+=+'helloWorld()+{+console.log("hello+world");+}';
languageIdentifier:+string+=+'typescript';

ngOnInit()+{
++++this.code+=+Prism.highlight(this.code,+Prism.languages[this.languageIdentifier]);
}|1793900|在模板中：|1793901|<code+[innerHtml]="code"></code>|1793902|entityMap|0|LINK|mutability|MUTABLE|url|https://prismjs.com/#supported-languages^0|Z|D|0|3|C|0|0|0|0|C|2|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|18|8|@$9|19|A|1A|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1B|8|@$9|1C|A|1D|B|C]]|D|@]|E|$]]|$1|H|3|I|5|J|7|1E|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|1F|8|@]|D|@]|E|$]]|$1|O|3|P|5|J|7|1G|8|@]|D|@]|E|$K|L]]|$1|Q|3|R|5|6|7|1H|8|@]|D|@$9|1I|A|1J|1|1K]]|E|$]]|$1|S|3|T|5|6|7|1L|8|@]|D|@]|E|$]]|$1|U|3|V|5|J|7|1M|8|@]|D|@]|E|$K|L]]|$1|W|3|X|5|6|7|1N|8|@]|D|@]|E|$]]|$1|Y|3|Z|5|J|7|1O|8|@]|D|@]|E|$K|L]]|$1|10|3|-4|5|6|7|1P|8|@]|D|@]|E|$]]]|11|$12|$5|13|14|15|E|$16|17]]]]

I would like to extend the previous answers with the ability to use other languages besides the default ones. 
At first, install Prism with <code>npm i prismjs</code>.

In your <code>angular.json</code> add: 

<pre><code>"scripts": [
 "../node_modules/prismjs/prism.js"
]
</code></pre>

In your component import the necessary languages:

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

declare var Prism: any;
</code></pre>

See <a href="https://prismjs.com/#supported-languages" rel="nofollow noreferrer">here</a> for all available languages.

Finally, apply the code highlighting:

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

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

in the template:

<pre><code>&lt;code [innerHtml]="code"&gt;&lt;/code&gt;
</code></pre>

I'm building a little app with angular-cli and I would like to use PrismJS but I can't get it work.

So basically I've created a vendor folder where I put my Prism's scripts and styles and load them in the index.html.

I also need to install type definitions in order to be able to compile my app :

<pre><code>npm i --save-dev @typings/prismjs
</code></pre>

Then, I just have to call <code>Prism.whatever()</code> anywhere in my code but this doesn't work.

Even my IDE doesn't recognize the namespace <code>Prism</code>. 

By checking the content of the definition (<code>index.d.ts</code>) I've seen that since version 1.6, it doesn't contain 

<pre><code>declare var Prism : PrismJS.Prism;
</code></pre>

anymore. There is just some <code>export namespace Prism</code>. So I was wondering if I have to import something since any <code>declare</code> is used.

It seems weird to me to import something from a definition file.

As I wanted to step over this, I've installed an older version of the definition (1.4.16) which contains 

<pre><code>declare var Prism : PrismJS.Prism;
</code></pre>

Now, my IDE (webstorm) is happy! It can recognize <code>Prism</code>. But when I try to compile, webpack still outputs an error: 

<pre><code>Cannot find name 'Prism'
</code></pre>

So my question is pretty basic: what have I forgotten?

Sorry for this obvious question.

Thanks!

How to correctly use PrismJS and its typings with typescript / angular 2

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我正在用angular构建一个小应用程序，我想使用PrismJS，但我无法让它工作。因此，基本上，我已经创建了一个供应商文件夹，我将棱镜的脚本和样式放在index.html中加载。为了能够编译我的应用程序，我还需要安装类型定义：npm i --save-dev @typings/prismjs然后，我只需在代码中的任何...

问如何正确使用PrismJS及其带有类型标/角2的类型
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何正确使用PrismJS及其带有类型标/角2的类型EN