highlight.js non funziona con angolare 2

Sto provando ad aggiungere l'evidenziazione della sintassi per la mia applicazione utilizza highlight.js ma non sembra di lavorare con angolare 2.highlight.js non funziona con angolare 2

La prego di farmi sapere quello che ho potrebbe fare in modo errato?

Ecco la Plnkr: https://plnkr.co/edit/G3NFFPGXKyc9mV1a6ufJ?p=preview

Questo è il componente

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{ 
}

e questo è dove sto aggiungendo highlight.js utilizzando 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/

fonte

2016-05-18 takeradi

È necessario applicare esplicitamente highlightjs su un blocco in questo modo:

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

Vai a questa plunkr

Un buon approccio sarebbe quello di creare una direttiva personalizzato per questo:

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

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

e usarlo in questo modo:

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

fonte

2016-05-18 19:00:57

grazie Thierry. che funzioni. ma cosa succede se ci sono più blocchi di codice sulla stessa pagina. Posso applicare #code a tutti quei blocchi? Anche se posso usare #code su un solo blocco. – takeradi

Prego! Sì, hai ragione ;-) Ho aggiunto un approccio basato su una directivve. Vedi la mia risposta aggiornata ... –

Penso che sia necessario attivare l'evidenziazione manualmente. Si potrebbe prendere in considerazione di utilizzare una direttiva per farlo:

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

Ecco il corrispondente plunkr https://plnkr.co/edit/Gf0Y52NIsEmNbbauvL0Y?p=preview

Aggiornamento

inizializzazione dovrebbe essere spostato al gancio ngAfterViewInit. Vedi la risposta @Thierry.

fonte

2016-05-18 19:06:36 yurzui

funziona su più pre-tag su una pagina quando il metodo 'highlightBlock' è chiamato qui' ngAfterViewInit() '. Controlla la soluzione di Thierry e, se possibile, revoca la risposta. – takeradi

ho pubblicato highlight.js modulo per angolare, installarlo dal NPM

npm install --save ngx-highlightjs

E 'molto semplice da usare, gestisce il caricamento automaticamente lo script e il tema per voi, controllare il demo fuori .

fonte

2017-07-29 03:20:56

Sembra un tipo fantastico – Dummy

highlight.js non funziona con angolare 2

risposta

Problemi correlati