highlight.js не работает с угловыми 2

Я пытаюсь добавить подсветку синтаксиса для моего приложения с помощью highlight.js, но это не похоже на работу с угловыми 2.highlight.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{ 
}

и это, где я добавляю highlight.js с помощью 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/

источник

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

Добро пожаловать! Да, вы правы ;-) Я добавил подход, основанный на директиве. См. Мой обновленный ответ ... –

Я думаю, что вам нужно стрелять из подсветки вручную. Вы могли бы рассмотреть возможность использовать директиву, чтобы сделать это:

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

Вот соответствующий plunkr https://plnkr.co/edit/Gf0Y52NIsEmNbbauvL0Y?p=preview

Update

Инициализация должна быть перенесена в ngAfterViewInit крюк. См. Ответ @Thierry.

источник

2016-05-18 19:06:36 yurzui

он работает с несколькими предварительными тегами на одной странице, когда метод 'highlightBlock' вызывается здесь' ngAfterViewInit() '. Проверьте решение Тьерри и, пожалуйста, по возможности отведите его ответ. – takeradi

Я опубликовал Highlight.js модуль для углового, установите его с НПМ

npm install --save ngx-highlightjs

Он очень прост в использовании, он обрабатывает загрузки сценария и тема для вас автоматически, проверьте demo из ,

источник

2017-07-29 03:20:56

Кажется, очень холодный чувак – Dummy

ответ

Смежные вопросы