highlight.js does not work with Angular 2

Question

I am trying to add syntax highlighting to my application using highlight.js but it doesn't seem to work with Angular 2.

Could you please let me know what I might be doing incorrectly?

Here is the Plnkr: https://plnkr.co/edit/G3NFFPGXKyc9mV1a6ufJ?p=preview

This is the component:

import {Component} from 'angular2/core';
@Component({
selector: "my-app",
template: `
Hello!
<pre>
            <code class="html">
              &lt;html&gt;
                &lt;body&gt;

                &lt;h1&gt;My First Heading&lt;/h1&gt;
                &lt;p&gt;My first paragraph.&lt;/p&gt;

                &lt;/body&gt;
              &lt;/html&gt;
            </code>
          </pre>
`
})
export class AppComponent{
}

This is where I am adding highlight.js using cdn:

<!DOCTYPE html>
<html>
   <head>
      <!-- IE required polyfills, in this exact order -->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.0/es6-shim.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.25/system-polyfills.js"></script>
      <script src="https://npmcdn.com/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
      <!-- Angular polyfill required everywhere -->
      <script src="https://code.angularjs.org/2.0.0-beta.13/angular2-polyfills.js"></script>
      <script src="https://code.angularjs.org/tools/system.js"></script>
      <script src="https://code.angularjs.org/tools/typescript.js"></script>
      <script src="https://code.angularjs.org/2.0.0-beta.13/Rx.js"></script>
      <script src="https://code.angularjs.org/2.0.0-beta.13/angular2.dev.js"></script>
      <link rel="stylesheet" href="style.css" />
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.4.0/styles/solarized-light.min.css">
      <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.4.0/highlight.min.js"></script>
      <script>hljs.initHighlightingOnLoad();</script>
      <script>
         System.config({
           transpiler: 'typescript', 
           typescriptOptions: { emitDecoratorMetadata: true }, 
           packages: {
             'api': {defaultExtension: 'ts'}, 
             'app': {defaultExtension: 'ts'} 
           } 
         });
         System.import('app/main')
             .then(null, console.error.bind(console));
      </script>
   </head>
   <body>
      <my-app>loading...</my-app>
   </body>
</html>

https://highlightjs.org/usage/

nice article for code highlighting https://blog.almightytricks.com/2020/10/27/code-highlighting-ngx-quill/ — Sangram Badi, Oct 28 '20 at 03:35

score 19 · Accepted Answer · edited May 04 '17 at 21:52

You need to explicitly apply highlightjs on a block this way:

import {Component, ElementRef, ViewChild} from 'angular2/core';

declare var hljs: any;

@Component({
  selector: "my-app",
  template: `
    Hello!
    <pre>
      <code #code class="html">
        &lt;html&gt;
          &lt;body&gt;

          &lt;h1&gt;My First Heading&lt;/h1&gt;
          &lt;p&gt;My first paragraph.&lt;/p&gt;

          &lt;/body&gt;
        &lt;/html&gt;
      </code>
    </pre>
  `
})
export class AppComponent{
  @ViewChild('code')
  codeElement: ElementRef;

  ngAfterViewInit() {
    hljs.highlightBlock(this.codeElement.nativeElement);
  }
}

See this plunkr

A good approach would be to create a custom directive for this:

@Directive({
  selector: 'code[highlight]'
})
export class HighlightCodeDirective {
  constructor(private eltRef:ElementRef) {
  }

  ngAfterViewInit() {
    hljs.highlightBlock(this.eltRef.nativeElement);
  }
}

and use it this way:

@Component({
  selector: "my-app",
  template: `
    Hello!
    <pre>
      <code highlight class="html">
        (...)
      </code>
    </pre>
  `,
  directives: [ HighlightCodeDirective ]
})
(...)

thanks Thierry. that works. but what if there are multiple blocks of code on the same page. Can i apply #code to all those block? I though I can use #code on only one block. — takeradi, May 18 '16 at 19:06
You're welcome! Yes, you're right ;-) I added an approach based on a directivve. See my updated answer... — Thierry Templier, May 18 '16 at 19:09

Murhaf Sousli · Answer 2 · 2021-06-02T08:33:14.510

6

I have published highlight.js module for angular, install it from npm

npm install --save ngx-highlightjs

It is very simple to use, it loads highlight.js automatically for you and works with lazy modules, check out the demo

edited Jun 02 '21 at 08:33

answered Jul 29 '17 at 03:20

Murhaf Sousli

12,622
20
119
185

@PSKP I've updated the link https://ngx-highlight.netlify.app/ – Murhaf Sousli Jun 02 '21 at 08:33

yurzui · Answer 3 · 2019-03-06T09:08:53.343

4

I think that you have to fire highlight manually.

To do that you can delegate this function to special directive like:

@Directive({
  selector: 'pre'
})
class PreHighlight implements AfterViewInit {
  constructor(private elRef: ElementRef) {}

  ngAfterViewInit() {
    hljs.highlightBlock(this.elRef.nativeElement);
  }
}

Plunker Example

edited Mar 06 '19 at 09:08

answered May 18 '16 at 19:06

yurzui

205,937
32
433
399

it works on multiple pre tags on one page when the `highlightBlock` method is called here `ngAfterViewInit()`. Check out Thierry's solution and please upvote his answer if possible. – takeradi May 18 '16 at 21:51
@mila Thanks. Fixed – yurzui Mar 06 '19 at 09:09

score 3 · Answer 4 · answered Oct 02 '21 at 10:59

Angular 12+

Another way of doing this is custom usage of highlight.js

First, install the library

 npm install highlight.js

Add styles file to angular.json

"styles": [
   "./node_modules/highlight.js/styles/default.css" // I choose default but you can choose your favorite one.
],

In the component, you want to use highlighter import highlight.js

import hljs from 'highlight.js';

...

 constructor(@Inject(DOCUMENT) private document: Document) { }

 ngOnInit(): void {
    setTimeout(() => {
          this.document.querySelectorAll('pre code').forEach((el) => {
            hljs.highlightElement(el);
          });
        }, 500)
  }

Note: If you fetch data from an API please make sure your data is rendered on the page then run forEach()

score 0 · Answer 5 · answered Nov 28 '20 at 18:32

0

The best highlightjs module for angular by far is angular2-highlight-js

https://www.npmjs.com/package/angular2-highlight-js

npm i angular2-highlight-js

answered Nov 28 '20 at 18:32

Jonathan

3,893
5
46
77

highlight.js does not work with Angular 2

5 Answers5

Linked