Showing posts with label ngx-highlightjs. Show all posts
Showing posts with label ngx-highlightjs. Show all posts


October 30, 2017
Super easy to use, auto highlight code and auto-detect language



  1. Install it with npm
$ npm install --save ngx-highlightjs
  1. Head to highlight.js download page and get your custom package bundle including only the languages you need.
  2. Create new folder in src/assets/lib/hljs and extract the downloaded zip file there.


Import HighlightModule library from any module:
 import { HighlightModule } from 'ngx-highlightjs';  
  imports: [  
   // ...  
 export class AppModule { }  
The function forRoot accepts 1 optional parameters, forRoot(options?: HighlightOptions)
With options parameter you can set:
  • theme: select the theme, use theme's name without the extension, default: 'github'
  • path: hljs library location, default: 'assets/lib/hljs'
  • auto: auto-highlight when code's text changes, default: true
Choose highlighting theme:
 HighlightModule.forRoot({ theme: 'monokai-sublime'});  
List of all available themes from highlight.js Import highlight.js library from a custom path
   const options: HighlightOptions = {  
    theme: 'monokai-sublime',  
    path: 'assets/js/highlight-js'  
Now you can use the directive highlight, you can:
  • Highlight a code element
  •  <!-- Highlight target element -->  
     <pre><code highlight [code]="someCode"></code></pre>  
     <!-- Or -->  
     <pre><code highlight [textContent]="someCode"></code></pre>  
  • Highlight all child code elements
  •  <!-- Highlight child elements of type <pre><code> -->  
     <div highlight="all">  
      <pre><code [textContent]="htmlCode"></code></pre>  
      <pre><code [textContent]="tsCode"></code></pre>  
      <pre><code [textContent]="cssCode"></code></pre>  
  • Highlight custom elements
  •  <!-- Highlight custom child elements -->  
     <div highlight="section code">  
      <section><code [textContent]="pythonCode"></code></section>  
      <section><code [textContent]="swiftCode"></code></section>  


  • [highlight]: string, default ''
    • Use just highlight on the element to highlight it.
    • Use highlight="all" to highlight all child code elements.
    • Use highlight="{selector}" to highlight custom child elements.
  • [code]: string, default null

Note: Special thanks to Murhaf Sousli
Disclaimer: The blog is created to share angular directives information to geek, curious Angular Developers.