CodeHighlighter CodeHighlighter is an attribute directive to highlight code blocks using PrismJS

CSS


.ui-datatable table {
    border-collapse:collapse;
    width: 100%;
    table-layout: fixed;
}

HTML


<div id="pm" style="width:300px">
<div>
<div><a data-icon="fa-file-o">File</a></div>
<div>
    <ul>
        <li><a data-icon="fa-plus">New</a>
            <ul>
                <li><a>Project</a></li>
                <li><a>Other</a></li>
            </ul>
        </li>
        <li><a>Open</a></li>
        <li><a>Quit</a></li>
    </ul>
</div>
</div>
</div>

Javascript


var map;
    function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
        center: {lat: -34.397, lng: 150.644},
        zoom: 8
    });
}

Typescript


import {Directive, ElementRef, OnInit} from '@angular/core';

declare var Prism: any;

@Directive({
    selector: '[pCode]'
})
export class CodeHighlighter implements OnInit {

    constructor(private el: ElementRef) {}

    ngOnInit() {
        Prism.highlightElement(this.el.nativeElement);
    }
}

Import


import {CodeHighlighterModule} from 'primeng/primeng';

Getting Started

CodeHighlighter is applied to a code element with [pCode] directive. The <code> should have a style class having language- prefix to specify the language to highlight. See Prismjs docs for the list of available languages. An example block with css code would be as follows.


<pre>
<code class="language-css" pCode>
    .ui-datatable table {
    border-collapse:collapse;
    width: 100%;
    table-layout: fixed;
}
</code>
</pre>

Dependencies

Prismjs