Wie man PrismJS und seine Typisierungen korrekt mit typescript/angular 2 verwendet

Question

Ich baue eine kleine App mit angular-cli und ich möchte PrismJS verwenden, aber ich kann es nicht funktionieren.

Also im Grunde habe ich einen vendor Ordner erstellt, wo ich meine Skripte und Stile Prism und laden Sie sie in die index.html.

Ich muss auch Typdefinitionen, um in der Lage zu kompilieren meine App installieren: npm i --save-dev @typings/prismjs.

Dann muss ich nur Prism.whatever() irgendwo in meinem Code anrufen, aber das funktioniert nicht.

Auch meine IDE erkennt den Namensraum Prism nicht. Durch Überprüfung des Inhalts der Definition (index.d.ts) habe ich gesehen, dass seit Version 1.6, es declare var Prism : PrismJS.Prism; nicht mehr enthält. Es gibt nur einige export namespace Prism. Also habe ich mich gefragt, ob ich etwas importieren muss, da declare verwendet wird.

Es scheint mir komisch, etwas aus einer Definitionsdatei zu importieren.

Da ich dies übergehen wollte, habe ich eine ältere Version der Definition (1.4.16) installiert, die declare var Prism : PrismJS.Prism; enthält.

Jetzt ist meine IDE (webstorm) glücklich! Es kann Prism erkennen. Aber wenn ich versuche zu kompilieren, gibt Webpack immer noch einen Fehler aus: Cannot find name 'Prism'.

Also meine Frage ist ziemlich einfach: Was habe ich vergessen?

Entschuldigung für diese offensichtliche Frage.

Vielen Dank!

Answer 1

in Winkel-cli hinzufügen prism.js wie folgt aus:

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

danach können Sie glücklich Typoskript machen mit

declare var Prism; 

und verwenden Sie es so, dass

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


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

Answer 2

I denke, du hast getan - 1. npm installieren prismjs -S 2. npm installieren @ types/pris mjs -D

Jetzt müssen Sie es in der Komponente importieren als - import * als Prisma von 'prismajs';

und verwenden Sie dann prism.whatEverMethod(), das Prisma js

Answer 3

unterstützt Ich habe versucht, Winkelprisma und NG2-Prisma ohne Erfolg (aber war mein schlechtes vielleicht?).

Möglicherweise möchten Sie hinzufügen, um den Code innerhalb von ngAfterViewInit innerhalb eines setTimeout hinzuzufügen, um den Ausdruck nicht zu aktivieren, nachdem er aktiviert wurde. Error.

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

auch in HTML ist dies richtig, wenn Sie es wnt korrekt angezeigt werden:

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