highlight.js不角2

我嘗試添加使用語法高亮highlight.js我的申請工作，但它似乎並沒有與角2highlight.js不角2

工作能否請你讓我知道什麼，我可能是不正確的？

這裏是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

您需要明確應用highlightjs塊上這樣說：

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

一個好的方法是創建這個自定義指令：

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

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

，並使用這種方式：

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

來源

2016-05-18 19:00:57

感謝蒂埃裏。這樣可行。但是如果在同一頁面上有多個代碼塊呢？我可以將#code應用於所有這些塊嗎？我雖然只能在一個塊上使用＃代碼。 – takeradi

不客氣！是的，你是對的;-)我添加了一個基於directivve的方法。看到我更新的答案... –

我認爲你必須手動激發突出顯示。你可以考慮使用一個指令，要做到這一點：

@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（）'時，它可以在一個頁面上的多個預標籤上工作。查看蒂埃裏的解決方案，如果可能的話，請提高他的答案。 – takeradi

我已經發表highlight.js的角度模塊，從NPM安裝

npm install --save ngx-highlightjs

它使用起來非常簡單，它會爲你自動加載腳本和主題，檢查出demo 。

來源

2017-07-29 03:20:56

看起來很酷的傢伙 – Dummy

highlight.js不角2

回答

相關問題