Highlightjs с Angular?

Документация по приложению ng2-smart-table имеет code фрагменты элементов, которые выглядят так:

<code highlight class="typescript">{{ snippets.require }}</code>

Полученная документация выглядит следующим образом.

При просмотре полученного html приложения, кажется, что https://highlightjs.org/ делает подсветку, но я не вижу импорта угловой зависимости, которая бы выполняла преобразование (или какую-либо предварительную обработку скриптами), так что просто интересно, как это работает?

В ответ

Мысль настолько крутая, насколько просто это сделать с Angular:

import { Directive, ElementRef, AfterViewInit } from '@angular/core';
import * as hljs from 'highlight.js';

@Directive({
selector: 'code[highlight]',
})
export class HighlightCodeDirective implements AfterViewInit {

constructor(private elRef: ElementRef) { }

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

}

1 ответ

Решение

Проверьте код более внимательно, есть директива highlight (ng2-smart-table/src/app/shared/directives/highlight.directive.ts), которая использует highlightjs. Это часть примера приложения, а не библиотеки, поэтому вам нужно скопировать его, если вы хотите сделать то же самое в своем приложении.

Другие вопросы по тегам