Highlightjs with Angular?

Question

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

}

Aleš Doganoc · Accepted Answer · 2018-11-21 22:41:53Z

2

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.

answered Nov 21, 2018 at 22:41

Aleš Doganoc

12.1k30 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Highlightjs with Angular?

Per the Answer

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Per the Answer

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related