highlight.jsは角2

私はhighlight.jsを使用して自分のアプリケーションにシンタックスハイライトを追加しようとしているでは動作しませんが、あなたが私に教えてくださいませんアンギュラ2.highlight.jsは角2

で動作するようには思えないものをI間違っている可能性がありますか？ここで

はPlnkrです：https://plnkr.co/edit/G3NFFPGXKyc9mV1a6ufJ?p=preview

は、これは、コンポーネント

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

であると私はCDNを使用してhighlight.js追加してい場所です：

<!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/

出典

2016-05-18 takeradi

を明示的に適用する必要がありますブロックの10こうして：

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

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

とこのようにそれを使用します：

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

このplunkr

が良いアプローチは、このためのカスタムディレクティブを作成することです参照してください。

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

出典

2016-05-18 19:00:57

Thierryに感謝します。それは動作します。同じページに複数のコードブロックがある場合はどうなりますか？ #codeをすべてのブロックに適用できますか？私は1つのブロックだけで#codeを使用することができます。 – takeradi

よろしくお願いします！はい、あなたは正しいです;-)私は指向性に基づいたアプローチを追加しました。私の更新された答えを見てください... –

私はあなたが手動でハイライトを発射しなければならないと思います。あなたはそれを行うためのディレクティブを使用して検討することができます：

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

ここでは、対応するplunkrがhttps://plnkr.co/edit/Gf0Y52NIsEmNbbauvL0Y?p=preview

で更新

初期化ngAfterViewInitフックに移動する必要があります。 @Thierryの答えを参照してください。

出典

2016-05-18 19:06:36 yurzui

'highlightBlock'メソッドがここで' ngAfterViewInit（） 'と呼ばれるとき、それは1ページの複数のpreタグで動作します。可能であれば、ティエリーの解決策をチェックして、彼の答えをupvoteしてください。 – takeradi

私は角度のためhighlight.jsモジュールを公開している、NPM

npm install --save ngx-highlightjs

からインストールすることがdemoアウトを確認し、それはあなたのために自動的にスクリプトやテーマを読み込む処理し、使用することは非常に簡単です。

出典

2017-07-29 03:20:56

非常にクールな男だ – Dummy

highlight.jsは角2

答えて

関連する問題