@smartcodelab/ngx-highlightjs

> This is Angular (version 6+) Directive, Highlights the code with appropriate CSS. > This uses the core "highlightjs" Javascript Module

Usage no npm install needed!

<script type="module">
  import smartcodelabNgxHighlightjs from 'https://cdn.skypack.dev/@smartcodelab/ngx-highlightjs';
</script>

README

@smartcodelab/ngx-highlightjs

This is Angular (version 6+) Directive, Highlights the code with appropriate CSS. This uses the core "highlightjs" Javascript Module

Installation

Install highlightjs and @smartcodelab/ngx-highlightjs library. Use Below commands:

$ npm install highlightjs @smartcodelab/ngx-highlightjs @smartcodelab/ngx-prettify--save
or
$ yarn add highlightjs @smartcodelab/ngx-highlightjs @smartcodelab/ngx-prettify

Consuming @smartcodelab/ngx-highlightjs library

In your Angular AppModule: (or other Module as required by your project)

import { NgxHighlightjsModule } from '@smartcodelab/ngx-highlightjs';


@NgModule({
  imports: [
    /* Along with import of all other Modules...*/

    NgxHighlightjsModule
  ]
})
export class AppModule {}

Once your library is imported, you can use it in your Angular component.

In .html file

<div>
  <h4> This is highlightjs Example using directive of @smartcodelab/ngx-highlightjs</h4>
  <pre><code highlight [textContent]='code'></code></pre>
</div>

In .ts file

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {

  code = `
  <!DOCTYPE html><title>Title</title><style>body {width: 500px;}</style>
  <script type="application/javascript">function $init() {return true;}</script>
  <body><p checked class="title" id='title'>Title</p>
    <!-- here goes the rest of the page --></body>`;

  constructor() {}

}

In style.scss file import the necessary style as per your requirements.


@import "~highlightjs/styles/monokai-sublime.css";

License

MIT