Qfyilyi

The ng2-smart-table application documentation has code elements snippets that look like this:

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

The resulting documentation looks like this.

When looking at the resulting application html, it looks like highlightjs is doing the highlighting, but I don't see an import of an angular dependency that would perform the transform (Or any preprocessing by the scripts), so just wondering how it works?

Per the Answer

Thought is as really cool how simple this is to do with 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);

}



}

Check the code more closely there is a highlight directive (ng2-smart-table/src/app/shared/directives/highlight.directive.ts) that uses highlightjs. It is part of the sample application not the library so you need to copy it if you want to do the same in your application.