highlight.js funktioniert nicht mit kantigem 2

Ich versuche Syntax hinzufügen, um meine Anwendung hervorgehoben highlight.js verwenden, aber es scheint nicht mit kantigem 2.highlight.js funktioniert nicht mit kantigem 2

arbeiten Könnten Sie mir bitte mitteilen, was ich könnte es falsch machen? Hier

ist die Plnkr: https://plnkr.co/edit/G3NFFPGXKyc9mV1a6ufJ?p=preview

Dies ist die Komponente

import {Component} from 'angular2/core'; 

@Component({ 
    selector: "my-app", 
    template: ` 
     Hello! 
     <pre> 
     <code class="html"> 
      &lt;html&gt; 
      &lt;body&gt; 

      &lt;h1&gt;My First Heading&lt;/h1&gt; 
      &lt;p&gt;My first paragraph.&lt;/p&gt; 

      &lt;/body&gt; 
      &lt;/html&gt; 
     </code> 
     </pre> 
    ` 
}) 
export class AppComponent{ 
}

und das ist, wo ich highlight.js bin Zugabe CDN:

<!DOCTYPE html> 
<html> 

<head> 
    <!-- IE required polyfills, in this exact order --> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.0/es6-shim.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.25/system-polyfills.js"></script> 
    <script src="https://npmcdn.com/angular2/es6/dev/src/testing/shims_for_IE.js"></script> 

    <!-- Angular polyfill required everywhere --> 
    <script src="https://code.angularjs.org/2.0.0-beta.13/angular2-polyfills.js"></script> 

    <script src="https://code.angularjs.org/tools/system.js"></script> 
    <script src="https://code.angularjs.org/tools/typescript.js"></script> 
    <script src="https://code.angularjs.org/2.0.0-beta.13/Rx.js"></script> 
    <script src="https://code.angularjs.org/2.0.0-beta.13/angular2.dev.js"></script> 
    <link rel="stylesheet" href="style.css" /> 

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.4.0/styles/solarized-light.min.css"> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.4.0/highlight.min.js"></script> 
    <script>hljs.initHighlightingOnLoad();</script> 

    <script> 
     System.config({ 
     transpiler: 'typescript', 
     typescriptOptions: { emitDecoratorMetadata: true }, 
     packages: { 
      'api': {defaultExtension: 'ts'}, 
      'app': {defaultExtension: 'ts'} 
     } 
     }); 
    System.import('app/main') 
      .then(null, console.error.bind(console)); 
    </script> 
</head> 

<body> 
    <my-app>loading...</my-app> 
</body> 

</html>

https://highlightjs.org/usage/

Quelle

2016-05-18 takeradi

Sie müssen explizitanwenden 10 auf einen Block auf diese Weise:

import {Component, ElementRef, ViewChild} from 'angular2/core'; 

declare var hljs: any; 

@Component({ 
    selector: "my-app", 
    template: ` 
    Hello! 
    <pre> 
     <code #code class="html"> 
     &lt;html&gt; 
      &lt;body&gt; 

      &lt;h1&gt;My First Heading&lt;/h1&gt; 
      &lt;p&gt;My first paragraph.&lt;/p&gt; 

      &lt;/body&gt; 
     &lt;/html&gt; 
     </code> 
    </pre> 
    ` 
}) 
export class AppComponent{ 
    @ViewChild('code') 
    codeElement: ElementRef; 

    ngAfterViewInit() { 
    hljs.highlightBlock(this.codeElement.nativeElement); 
    } 
}

Sehen Sie diese plunkr

Ein guter Ansatz eine benutzerdefinierte Richtlinie für diese zu schaffen wäre:

@Directive({ 
    selector: 'code[highlight]' 
}) 
export class HighlightCodeDirective { 
    constructor(private eltRef:ElementRef) { 
    } 

    ngAfterViewInit() { 
    hljs.highlightBlock(this.eltRef.nativeElement); 
    } 
}

und verwenden Sie es auf diese Weise:

@Component({ 
    selector: "my-app", 
    template: ` 
    Hello! 
    <pre> 
     <code highlight class="html"> 
     (...) 
     </code> 
    </pre> 
    `, 
    directives: [ HighlightCodeDirective ] 
}) 
(...)

Quelle

2016-05-18 19:00:57

danke Thierry. das funktioniert. Aber was ist, wenn auf derselben Seite mehrere Codeblöcke vorhanden sind? Kann ich #code auf all diese Blöcke anwenden? Ich kann zwar #code auf nur einem Block verwenden. – takeradi

Gern geschehen! Ja, du hast Recht ;-) Ich habe einen Ansatz hinzugefügt, der auf einer Direktive basiert. Siehe meine aktualisierte Antwort ... –

Ich denke, dass Sie Highlight manuell auslösen müssen. Man könnte erwägen, eine Richtlinie zu verwenden, das zu tun:

@Directive({ 
    selector: 'pre' 
}) 
class PreHighlight { 
    constructor(refElem: ElementRef) { 
    hljs.highlightBlock(refElem.nativeElement); 
    } 
}

Hier ist die plunkr https://plnkr.co/edit/Gf0Y52NIsEmNbbauvL0Y?p=preview

aktualisieren

Initialisierung sollte ngAfterViewInit Haken bewegt werden entspricht. Siehe @Thierry Antwort.

Quelle

2016-05-18 19:06:36 yurzui

es funktioniert auf mehreren Vor-Tags auf einer Seite, wenn die 'highlightBlock' Methode hier' ngAfterViewInit() 'aufgerufen wird. Sieh dir Thierrys Lösung an und bitte, wenn möglich, deine Antwort. – takeradi

Ich habe veröffentlicht highlight.js Modul für Winkel, installieren Sie es von npm

npm install --save ngx-highlightjs

Es ist sehr einfach zu bedienen, es behandelt das Skript und das Thema für Sie automatisch geladen wird, überprüfen Sie die demo out .

Quelle

2017-07-29 03:20:56

Scheint sehr cooler Typ – Dummy

highlight.js funktioniert nicht mit kantigem 2

Antwort

Verwandte Themen