highlight.js Açısal 2

Ben highlight.js kullanarak başvurumun sözdizimi vurgulama eklemek çalışıyorum çalışmaz ama siz bana bildirin misiniz Açısal 2.highlight.js Açısal 2

çalışmak görünmüyor ne yanlış yapıyor olabilir? İşte

Plnkr geçerli: Bu bileşen

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

olduğunu https://plnkr.co/edit/G3NFFPGXKyc9mV1a6ufJ?p=preview

ve ben CDN kullanarak highlight.js ekliyorum budur:

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

kaynak

2016-05-18 takeradi

'yi açıkça uygulamanız gerekiyor Bir blokta 10 bu şekilde:

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

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

ve bunu şu şekilde kullanın::

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

bu plunkr

İyi bir yaklaşım bunun için özel bir direktif oluşturmak olacaktır görün

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

kaynak

2016-05-18 19:00:57

teşekkürler Thierry. bu işe yarıyor. ama aynı sayfada birden fazla kod bloğu varsa ne olur? Tüm bu bloğa # kodu uygulayabilir miyim? Ben sadece bir blokta # kodu kullanabilirim. – takeradi

Rica ederim! Evet haklısınız ;-) Direktivale dayalı bir yaklaşım ekledim. Güncellenmiş yanıtıma bakın ... –

Vurgulamayı manuel olarak tetiklemeniz gerektiğini düşünüyorum. Bunu yapmak için bir yönerge kullanmayı düşünebiliriz:

İşte

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

olduğu tekabül plunkr https://plnkr.co/edit/Gf0Y52NIsEmNbbauvL0Y?p=preview

Güncelleme

Başlatma ngAfterViewInit kanca taşınması gerekiyor

. @Thierry cevabı gör.

kaynak

2016-05-18 19:06:36 yurzui

, 'highlightBlock' yöntemi 'ngAfterViewInit()' olarak adlandırıldığında, bir sayfada birden fazla ön etiket üzerinde çalışır. Thierry'nin çözümüne bir göz atın ve mümkünse lütfen cevabını verin. – takeradi

Ben

npm install --save ngx-highlightjs

O sizin için otomatik olarak komut dosyası ve temasını yükleme kolları, kullanımı çok basit, demo kontrol NPM yükleyebilirsiniz, highlight.js açısal için modülünü yayınladık .

kaynak

2017-07-29 03:20:56

Çok havalı görünüyor – Dummy

highlight.js Açısal 2

cevap

İlgili konular