0.0.5 • Published 6 years ago
@smartcodelab/ngx-highlightjs v0.0.5
@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-prettifyConsuming @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