Highlightjs与Angular?

时间:2018-11-21 22:20:10

标签: node.js angular typescript highlightjs

ng2-smart-table application documentation具有code个元素片段,如下所示:

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

resulting documentation looks like this

当查看生成的应用程序html时,似乎highlightjs正在突出显示,但是我看不到导入会执行转换的角度相关性(或脚本进行的任何预处理),所以只是想知道它是如何工作的?

根据答案

使用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 个答案:

答案 0 :(得分:1)

仔细检查代码,发现有highlight directive(ng2-smart-table / src / app / shared / directives / highlight.directive.ts)使用Highlightjs。它是示例应用程序的一部分,而不是库的一部分,因此,如果要在应用程序中执行相同的操作,则需要将其复制。